纯css炫酷旋转

最新推荐文章于 2024-11-16 14:38:55 发布

qq_21700537

最新推荐文章于 2024-11-16 14:38:55 发布

阅读量197

点赞数

分类专栏： css 文章标签： css 旋转 html

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style>
html {
background: black;
}

div {
-webkit-animation: spinny 60s ease-in-out infinite;
animation: spinny 60s ease-in-out infinite;
border-radius:0%;
width: 60vmin;
height: 60vmin;
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin));
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin));

background: -webkit-radial-gradient(center top, circle, #00ffff, rgba(0, 0, 0, 0)),
-webkit-radial-gradient(bottom left, circle, #ffff00, rgba(0, 0, 0, 0)),
-webkit-radial-gradient(bottom right, circle, #ff00ff, rgba(0, 0, 0, 0));

background: url(images/logo.png) no-repeat center;
}

@-webkit-keyframes spinny {
from {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
}
to {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);/*----旋转圈数------*/
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);
}
}

@keyframes spinny {
from {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
}
to {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);/*----旋转圈数------*/
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);
}
}

</style>
</head>

<body>

<div></div>

</body>
</html>