css条纹波浪动画效果代码
代码语言:html
所属分类:动画
代码描述:css条纹波浪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> * { box-sizing: border-box; } html { width: 100%; height: 100%; } body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: translate3d(0, 0, 0);overflow: hidden } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } body { background: #2c3e50; } .container { position: relative; width: 10em; height: 5em; font-size: 50px; overflow: hidden; } .wave { border-width: 0.1em; border-style: solid; position: absolute; -webkit-animation: wave 1500ms infinite alternate; animation: wave 1500ms infinite alternate; transform: rotate(-44.5deg); } .wave:nth-child(1) { width: 9.5125em; height: 9.5125em; bottom: -4.75625em; left: 0.24375em; -webkit-animation-delay: 75ms; animation-delay: 75ms; border-color: transparent transparent #1abc9c #1abc9c; border-radius: 9.5125em; } .wave:nth-child(2) { width: 9.025em; height: 9.025em; bottom: -4.5125em; left: 0.4875em; -webkit-animation-delay: 150ms; animation-delay: 150ms; border-color: transparent transparent rgba(26, 188, 156, 0.90476) rgba(26, 188, 156, 0.90476); border-radius: 9.025em; } .wave:nth-child(3) { width: 8.5375em; height: 8.5375em; bottom: -4.26875em; left: 0.73125em; -webkit-animation-delay: 225ms; animation-delay: 225ms; border-color: transparent transparent rgba(26, 188, 156, 0.85714) rgba(26, 188, 156, 0.85714); border-radius: 8.5375em; } .wave:nth-child(4) { width: 8.05em; height: 8.05em; bottom: -4.025em; left: 0.975em; -webkit-animation-delay: 300ms; animation-delay: 300ms; border-color: transparent transparent rgba(26, 188, 156, 0.80952) rgba(26, 188, 156, 0.80952); border-radius: 8.05em; } .wave:nth-child(5) { width: 7.5625em; height: 7.5625em; bottom: -3.78125em; left: 1.21875em; -webkit-animation-delay: 375ms; animation-delay: 375ms; border-color: transparent transparent rgba(26, 188, 156, 0.7619) rgba(26, 188, 156, 0.7619); border-radius: 7.5625em; } .wave:nth-child(6) { width: 7.075em; height: 7.075em; bottom: -3.5375em; left: 1.4625em; -webkit-animation-delay: 450ms; animation-delay: 450ms; border-color: transparent transparent rgba(26, 188, 156, 0.71429) rgba(26, 188, 156, 0.71429); border-radius: 7.075em; } .wave:nth-child(7) { width: 6.5875em; height: 6.5875em; bottom: -3.29375em; left: 1.70625em; -webkit-animation-delay: 525ms; animation-delay: 525ms; border-color: transparent transparent rgba(26, 188, 156, 0.66667) rgba(26, 188, 156, 0.66667); border-radius: 6.5875em; } .wave:nth-child(8) { width: 6.1em; height: 6.1em; bottom: -3.05em; left: 1.95em; -webkit-animation-delay: 600ms; animation-delay: 600ms; border-color: transparent transparent rgba(26, 188, 156, 0.61905) rgba(26, 188, 156, 0.61905); border-radius: 6.1em; } .wave:nth-child(9) { width: 5.6125em; height: 5.6125em; bottom: -2.80625em; left: 2.19375em; -webkit-animation-delay: 675ms; animation-delay: 675ms; border-color: transparent transparent rgba(26, 188, 156, 0.57143) rgba(26, 188, 156, 0.57143); border-radius: 5.6125em; } .wave:nth-child(10) { width: 5.125em; height: 5.125em; bottom: -2.5625em; left: 2.4375em; -webkit-animation-delay: 750ms; animation-delay: 750ms; border-color: transparent transparent rgba(26, 188, 156, 0.52381) rgba(26, 188, 156, 0.52381); border-radius: 5.125em; } .wave:nth-child(11) { width: 4.6375em; height: 4.6375em; bottom: -2.31875em; left: 2.68125em; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0