当先锋百科网

首页 1 2 3 4 5 6 7

CSS3转圈动画可以让网页更加生动和有趣,引起用户的关注和兴趣。以下是一些CSS3转圈动画的代码示例:

/* CSS3旋转动画 */
.rotate {
animation: rotate 2s linear infinite; 
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* CSS3圆点环绕动画 */
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dot {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
animation: orbit 2s linear infinite;
}
@keyframes orbit {
from {
transform: translate(-200px) rotate(0deg) translate(200px);
}
to {
transform: translate(-200px) rotate(360deg) translate(200px); 
}
}
/* CSS3车轮动画 */
.wheel {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: #ccc;
}
.spoke {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 90px;
margin: -45px 0 0 -2px;
border-radius: 50%;
box-shadow: 0 0 10px 2px #000;
transform-origin: bottom center;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

以上是一些简单的CSS3转圈动画示例,通过在网页中应用这些动画,可以让你的网站更加动态和有趣,增强用户体验。