css3实现动态水波纹

看的一个专栏前端每日实战 的文章，大家可以去看看。

下面是看了大神写的之后，自己写了一遍；

先上效果图：

html代码：

美味虾尾

css代码：

.content {width: 300px;height: 300px;box-shadow: 0px 5px 10px 0px rgb(177, 174, 174);background-color: rgb(243, 225, 202);background-image: linear-gradient(rgb(250, 203, 203) 60%,rgba(22, 21, 21, 0.8));overflow: hidden;position: relative;}.content p {color: rgb(252, 247, 247);font-size: 30px;text-align: center;line-height: 150px;position: relative;z-index: 99999;font-weight: bold;font-family: serif;}.wave {position: absolute;width: 550px;height: 550px;top: -300px;left: -100px;background-color: rgba(111, 194, 243, 0.3);border-radius: 38%;animation: drift 5s linear infinite;}.wave:nth-of-type(1) {animation-duration: 5s;}.wave:nth-of-type(2) {animation-duration: 7s;}.wave:nth-of-type(3) {animation-duration: 10s;}@keyframes drift {from {transform: rotate(360deg);}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！