CSS世界之跳动的点
效果展示
实现思路
主要是利用伪元素 ::before
和 ::after
,以及 CSS 动画 animation
实现的效果
使用 ::before
做跳动的原点,::after
作为原点的阴影,分别设置各自的动画
这里涉及的动画都使用了 animation-direction: alternate;
,使动画实现正反交替的效果
animation-direction
属性的具体使用方法请参考 MDN-animation-direction
实现代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
| <style> .container { position: relative; height: 80px; width: 100%; display: flex; justify-content: center; } .dot:before{ content: ''; width: 20px; height: 20px; position: absolute; border-radius: 50%; background-color: #333; animation: dot .5s ease infinite alternate; } @keyframes dot { 0% { top: 60px; height: 5px; border-radius: 50px 50px 25px 25px; transform: scaleX(1.5); } 50% { height: 20px; border-radius: 50%; transform: scaleX(1); } 100% { top: 0; } } .dot:after{ content: ''; width: 20px; height: 4px; border-radius: 50%; position: absolute; top: 62px; animation: shadow .5s ease infinite alternate; } @keyframes shadow { 0% { filter: blur(1px); transform: scaleX(1.5); background-color: rgba(0,0,0,0.9); } 50% { transform: scaleX(1); background-color: rgba(0,0,0,0.6); } 100% { filter: blur(2px); transform: scaleX(0.5); background-color: rgba(0,0,0,0.3); } } </style>
|