码迷,mamicode.com
首页 > Web开发 > 详细

11.纯 CSS 创作一个荧光脉冲 loader 特效

时间:2018-12-23 15:19:30      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:span   city   --   padding   css伪类   animation   ati   loader   linear   

原文地址:https://segmentfault.com/a/1190000014700727

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代码:

 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 }

 

11.纯 CSS 创作一个荧光脉冲 loader 特效

标签:span   city   --   padding   css伪类   animation   ati   loader   linear   

原文地址:https://www.cnblogs.com/FlyingLiao/p/10164056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!