光圈扩散

光圈扩散效果,在网站效果上很多场景都需要用到,简单的利用了伪类、animate、transform!比如:地图闪烁点、功能作用提示、以及按钮点击等等

《光圈扩散》
效果图
HTML代码:
<i class="shine-ring"></i>
CSS代码:
.shine-ring {
    width: 48px;
    height: 48px;
    position: relative;
    display: block;
    border: 1px solid #fff;
    border-radius: 100%;
    transform: rotateY(62deg);
}
.shine-ring:before,
.shine-ring:after {
    content: "";
    display: block;
    width: 58px;
    height: 58px;
    border: 1px dotted #fff;
    border-radius: 100%;
    position: absolute;
    top: -5px;
    left: -5px;
    animation: shineRing 1.5s linear infinite;
    opacity: 0.8;
}
.shine-ring:before {animation-delay: .6s;}
.shine-ring:after {animation-delay: 0s;}
@keyframes shineRing {from {transform: scale(1, 1);opacity: 0.8;}to {transform: scale(1.8, 1.8);opacity: 0;}}
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注