css3实现炫酷的水波背景 

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8 />
<title>Nothing</title>
<style type="text/css">
#post{
　　width: 500px;
　　height: 500px;
　　overflow: hidden;
　　-webkit-animation: transform 25s ease-in-out infinite alternate both;
　　animation: transform 25s ease-in-out infinite alternate both;
　　transform-style: preserve-3d;
}
img{
　　display: block;
　　width: 100%;
}
@-webkit-keyframes transform {
0%,to {
　　border-radius: 63% 37% 54% 46%/55% 48% 52% 45%
}

14% {
　　border-radius: 40% 60% 54% 46%/49% 60% 40% 51%
}

28% {
　　border-radius: 54% 46% 38% 62%/49% 70% 30% 51%
}

42% {
　　border-radius: 61% 39% 55% 45%/61% 38% 62% 39%
}

56% {
　　border-radius: 61% 39% 67% 33%/70% 50% 50% 30%
}

70% {
　　border-radius: 50% 50% 34% 66%/56% 68% 32% 44%
}

84% {
　　border-radius: 46% 54% 50% 50%/35% 61% 39% 65%
}
}

@keyframes transform {
0%,to {
　　border-radius: 63% 37% 54% 46%/55% 48% 52% 45%
}

14% {
　　border-radius: 40% 60% 54% 46%/49% 60% 40% 51%
}

28% {
　　border-radius: 54% 46% 38% 62%/49% 70% 30% 51%
}

42% {
　　border-radius: 61% 39% 55% 45%/61% 38% 62% 39%
}

56% {
　　border-radius: 61% 39% 67% 33%/70% 50% 50% 30%
}

70% {
　　border-radius: 50% 50% 34% 66%/56% 68% 32% 44%
}

84% {
　　border-radius: 46% 54% 50% 50%/35% 61% 39% 65%
}
}
</style>
</head>
<body>
　　<div id="post">
　　　　<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF">
　　</div>
</body>
</html>

　　

posted @ 2022-01-21 10:59  李昂唐  阅读(340)  评论(0)    收藏  举报