css定位+旋转动画(在指定位置旋转)

<body>

<div></div>

</body>

<style>

body {

position: relative;

}

div {

position: absolute;

top: 0;

left: 50%;

transform: translate(-50%, -50%);

width: 100px;

height: 100px;

background-color: bisque;

border-radius: 30px;

/* 旋转重点 */

animation: rotate 1s linear infinite;

}

/* 定义旋转动画 */

@keyframes rotate {

from {

transform: translate(-50%, -50%) rotate(0deg);

}

to {

transform: translate(-50%, -50%) rotate(360deg);

}

}

</style>


版权声明:本文为Sleepless_er原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。