CSS3动画：水波涟漪

最新推荐文章于 2024-08-06 15:26:56 发布

虎仔_

最新推荐文章于 2024-08-06 15:26:56 发布

阅读量933

点赞数 1

文章标签：大数据

本文链接：https://blog.csdn.net/qq_40063198/article/details/125497000

版权

教程

1:HTML 代码：

<div class="example">
    <div class="dot"></div>
</div>

2: CSS样式：设置animation属性

.dot:before{
    content:' ';
    position: absolute;
    z-index:2;
    left:0;
    top:0;
    width:10px;
    height:10px;
    background-color: #ff4200;
    border-radius: 50%;
}

.dot:after {
    content:' ';
    position: absolute;
    z-index:1;
    width:10px;
    height:10px;
    background-color: #ff4200;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
    -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal;/*定义动画方式*/
}

设置动画方式，像波浪一样，从小变大变无，所以我们要设置宽高从0 – 50px，透明度从有至无，这样就能实现水波涟漪效果啦。

@keyframes ripple {
    0% {
        left:5px;
        top:5px;
        opcity:75;
        width:0;
        height:0;
}
    100% {
        left:-20px;
        top:-20px;
        opacity: 0;
        width:50px;
        height:50px;
    }
}