《CSS实战案例汇总》涟漪
2021/5/17 10:30:00
本文主要是介绍《CSS实战案例汇总》涟漪,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
涟漪
实现效果
HTML代码
CSS代码
实现效果
HTML代码
<!DOCTYPE html> <head> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="ripple-bg"> <div class="ripple1"></div> <div class="ripple2"></div> <div class="ripple3"></div> </div> </body> </html>
1. ripple-bg为波纹的中心点,该div元素不进行任何动画。
2. 这里用了三个div元素来实现多层涟漪的效果。
CSS代码
.ripple-bg { width: 80px; height: 80px; border-radius: 50%; background-color: rgb(0, 195, 255); margin: 300px auto; } /* 共有样式 */ .ripple1, .ripple2, .ripple3{ width: 80px; height: 80px; border-radius: 50%; background-color: rgb(0, 195, 255); } /* 单独样式 */ /* 设置位置以及动画延迟 */ .ripple1 { animation: ripple-anim 3s ease-out 0s infinite; } .ripple2 { position: relative; top: -80px; animation: ripple-anim 3s ease-out 1s infinite; } .ripple3 { position: relative; top: -160px; animation: ripple-anim 3s ease-out 2s infinite; } /* 动画效果 */ @keyframes ripple-anim { 0% { transform: scale(0.5, 0.5); opacity: 1; } 30% { opacity: 1; } 100% { transform: scale(2, 2); opacity: 0; } }
1. 类名为ripple1、ripple2和ripple3的div元素颜色应和父类元素相同;位置设置为relative,相对于父类元素进行调整,将三层涟漪的中心点与父类元素重合。
2. 为实现多层涟漪效果,ripple1、ripple2和ripple3的动画开始时间应不同,所以要设置延迟。
3. 在动画中,涟漪由小变大,在进行到100%时,要将透明度设置为0,涟漪消失。
这篇关于《CSS实战案例汇总》涟漪的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享