动画特效

最新推荐文章于 2022-12-21 08:32:43 发布

黎成诃月

最新推荐文章于 2022-12-21 08:32:43 发布

阅读量202

点赞数

分类专栏：前端-css

本文链接：https://blog.csdn.net/weixin_40292626/article/details/80268024

版权

前端-css 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>

.wrapper>.jxz{ width: 200px;height: 200px; border-radius: 200px; color: #fff; text-align: center; background: #00FFFF;line-height: 200px ; margin-left: 500px; margin-top: 100px; animation:xz 5s ; animation-timing-function:linear; animation-iteration-count:infinite;-webkit-box-reflect: below; font-size: 30px;}

.wrapper>#wjx {margin: 50px 0; position: relative;display: block; color: red; width: 0px; height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent;-moz-transform: rotate(35deg); -webkit-transform: rotate(35deg);-ms-transform: rotate(35deg);-o-transform: rotate(35deg); animation:wjx 8s ; animation-timing-function:linear; animation-iteration-count:infinite; position: absolute;}
.wrapper>#wjx:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute;height: 0; width: 0; top: -45px;left: -65px;display: block; content:""; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform:rotate(-35deg); -o-transform: rotate(-35deg);}
.wrapper>#wjx:after {position: absolute; display: block; color: red; top: 3px;left: -105px;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent;-webkit-transform: rotate(-70deg);-moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform:rotate(-70deg);content:"";}

.wrapper>.wz{ width: 100px;height: 100px; border-radius: 100px; background: blueviolet; position: absolute; margin: 0 0 0 1000px; animation:xxxx 8s ; animation-timing-function:linear; animation-iteration-count:infinite;}

@keyframes xz{

from{ transform: rotate(0deg); background: #FF0000;}to{ transform: rotate(360deg); background: #00FFFF;}
}
@keyframes wjx{
from{ transform: rotate(0deg);}to{ transform: rotate(360deg);}

}
}
@keyframs xxxx{
0%{ background: aquamarine;}
10%{ background: blue; left: 40px; top: 40px; transform: rotate(20deg);}
20%{ background: aquamarine; left: 80px; top: 80px; transform: rotate(40deg);}
30%{ background: blanchedalmond; left: 160px; top: 120px;transform: rotate(60deg);}
40%{ background-color: burlywood; left: 320px;top: 160px;transform: rotate(80deg);}
50%{ background-color: darkred; left: 640px;top:200px;transform: rotate(120deg);}
60%{ background-color: darkviolet; left: 1280px;top: 240px;transform: rotate(160deg);}
70%{ background-color: blueviolet; left: 640px;top: 280px;transform: rotate(200deg);}
80%{ background-color: darkmagenta; left: 320px;top: 320px;transform: rotate(240deg);}
90%{ background: darkblue; left: 160px;top: 360px;transform: rotate(280deg);}
100%{ background: #000; left: 120px; top: 400px;transform: rotate(320deg);}g);}
}

</style>
</head>
<body>
<div class="wrapper">
<div class="jxz">
love u
</div>
<div id="wjx"></div>
<div class="wz"></div>
</div>
</body>
</html>

黎成诃月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画特效

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt;.wrapper&gt;.jxz{ width: 200px;height: 200px; border-radius:
复制链接

扫一扫