11.純 CSS 創做一個熒光脈衝 loader 特效

時間 2019-11-10

標籤 css 一個熒光脈衝 loader 特效欄目 CSS 简体版

原文原文鏈接

原文地址：http://www.javashuo.com/article/p-rexqzjnd-ez.htmlcss

HTML代碼：html

1 <html>
2     <head>
3         <link rel="stylesheet" href="index.css">
4     </head>
5     <body>
6         <div class="circle"></div>
7     </body>
8 </html>

CSS代碼：segmentfault

 1 html, 
 2 body ,
 3 .circle{
 4     margin: 0;
 5     padding: 0;
 6     height: 100%;
 7     display: flex;
 8     justify-content: center;
 9     align-items: center;
10     
11 }
12 /* 畫出中間的實心圓 */
13 /* :root是一個CSS僞類，它匹配文檔的根元素 – <html>元素。 
14     w3 相關地址 http://www.w3school.com.cn/cssref/css_selectors.asp */
15 :root {
16     --innerRadius: 2em;
17 }
18 .circle {
19     width: calc(var(--innerRadius) * 2);
20     height: calc(var(--innerRadius) * 2);
21     background-color: lime;
22     border-radius: 50%;
23     /* 畫出圓環 */
24     box-shadow: 0 0 0 calc(var(--innerRadius) - 0.4em) white,
25                 0 0 0 var(--innerRadius) lime;
26     position: relative;
27 }
28 /* 用僞元素 ::before 畫出動畫用到的圓環 ； 用僞元素 ::after 再畫出一個動的圓環*/
29 .circle::before,
30 .circle::after {
31     content: '';
32     position: absolute;
33     width: calc(var(--innerRadius) * 2 * 2);
34     height: calc(var(--innerRadius) * 2 * 2);
35     border: 2px solid lime;
36     border-radius: 50%;
37     animation: pulse 2s linear infinite;
38 }
39 .circle::after {
40     animation-delay: 1s;
41 }
42 /* 增長動畫效果 
43 優化動畫——增長漸淡和彈性效果 */
44 @keyframes pulse {
45     from {
46         /* scale(x,y)定義 2D 縮放轉換，改變元素的寬度和高度。*/
47         transform: scale(1);
48         filter: opacity(0.9);
49     }
50 
51     to {
52         transform: scale(2);
53         filter: opacity(0);
54     }
55 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。