<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转果冻</title>
<style>
#myDIV {
margin: 250px;
width: 250px;
height: 250px;
background: orange;
position: relative;
font-size: 20px;
animation: animate 5s linear infinite;
}
/* Chrome, Safari, Opera */
@keyframes animate {
0% {
transform: rotate(0deg);
border-radius: 10% 80% 10% 80% / 80% 10% 80% 10%;
}
50% {
transform: rotate(180deg);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
}
100%{
transform: rotate(360deg);
border-radius: 10% 80% 10% 80% / 80% 10% 80% 10%;
}
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
文章来源地址https://www.toymoban.com/news/detail-606592.html
文章来源:https://www.toymoban.com/news/detail-606592.html
到了这里,关于西北乱跑娃 -- CSS动态旋转果冻效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!