不支援ie和firefox,支援webkit瀏覽器。注意,在現代瀏覽器中需要使用-webkit-字首。
/* geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px
at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* box and geometry values combined */
clip-path: padding-box
circle(50px
at 0 100px);
複製**
一些 demo
classname="demo">
三角裁剪h4>
classname="clipclass1" />
圓形裁剪h4>
classname="clipclass2" />
橢圓裁剪h4>
classname="clipclass3" />
裁剪插圖h4>
classname="clipclass4" />
div>
複製**
.demo > div
.clipclass1
.clipclass2
.clipclass3
.clipclass4
複製**
spinner.tsx
import react, from
"react";
import proptypes from
"prop-types";
/** * @desc 載入動畫元件
* @param
* size: 半徑大小
* spinnercolor: 顏色
* spinnerwidth: 圓圈寬度
* visible: 是否顯示
*/export inte***ce ispinnerprops
class
spinner
extends
component
;render() = this.props;
if (!visible)
const = this.props;
const dimension = size || math.min(width, height);
return (
id=classname="spinner"
style=}
/>
);}}
export default spinner;
複製**
這裡我們還缺 spinner 的樣式,我們這裡建立乙個高階元件更好的擴充我們的 spinner。
使用上面的使用方法
import react from
"react";
const css = `
.spinner
// 其他瀏覽器支援 @-webkit-等 這裡為了節省空間就不加了,需要支援
@keyframes rota
to }@keyframes sweep
50%
100% }`;
const spinner_id = "spinner_id_style";
const id_holder = {};
id_holder.id = 0;
export
const spinnermixin = component =>
class
extends
react.component
else
if (head)
}//加上唯一 id 區分多個 spinner
id_holder.id += 1;
this.state = `};}
render() />;}};
複製**
import react, from
"react";
import proptypes from
"prop-types";
import from
"./help";
// ...... some codes
export
default spinnermixin(spinner);
複製**
import react from
"react";
import reactdom from
"react-dom";
import spinner from
"./spinner";
function
return (
hello clip-pathh1>
classname="container">
載入動畫h4>
spinnercolor="red"
spinnerwidth=
size=
visible=
/>
div>
div>
);}const rootelement = document.getelementbyid("root");
複製**
然後就可以看到最開始的動畫效果了
python寫乙個服務 Python寫乙個服務
coding utf 8 import json from urllib.parse import parse qs from wsgiref.server import make server 定義函式,引數是函式的兩個引數,都是python本身定義的,預設就行了。定義檔案請求的型別和當前請求成功...
寫乙個東東
最近打了幾天的三國無雙6,感覺不錯!很久很久以前,乙個小學同學帶了我到機室玩三國無雙。自此,我便喜歡上了這個遊戲。現在我玩的遊戲內有兩個 三國無雙和cs。ps 曾經有些怪我的這個好朋友帶我打遊戲,但現在想來,若不是他,我的童年又怎麼會有歡樂呢。人活著,快樂是最重要的.因為以前是用專用手柄打的,感覺非...
寫乙個網頁
1 建立站點資料夾,站點資料夾的名字可以是中文 2 在站點資料夾下面建立子資料夾和子檔案 css js images html,前三個都是資料夾形式 子資料夾和子檔案的名字不能是中文 2.重置所有預設的樣式和設定一些全域性樣式,並將設定樣式的css檔案和對應的頁面關聯起來 3.劃分區域 如果的寬度大...