React 寫乙個 spinner 圓形載入動畫

不支援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);
複製**

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.劃分區域 如果的寬度大...