CSS实现波浪效果图
波浪效果图
Document
50%
主要代码
.level:before {bottom: 50%; //波浪占整个圆球的高度border-radius: 45%;-webkit-animation-duration: 10s;animation-duration: 10s;}.level:after {bottom: 0%; opacity: 0;border-radius: 47%;-webkit-animation-duration: 10s;animation-duration: 10s;}@keyframes rotate {0% {-webkit-transform: translate(-50%, 0) rotateZ(0deg);transform: translate(-50%, 0) rotateZ(0deg);}50% {-webkit-transform: translate(-50%, -1%) rotateZ(180deg); //-50%：波浪水平上下波动transform: translate(-50%, -1%) rotateZ(180deg); //-1%：上下波动1%,值越小上下波动的幅度就越大}100% {-webkit-transform: translate(-50%, 0%) rotateZ(360deg);transform: translate(-50%, 0%) rotateZ(360deg);}}
波浪的高度是动态的话
let data=50%
$('head').append('');
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！