html将div转换为圆形,使用HTML / JavaScript / CSS沿圆形路径移动div

这篇博客介绍了如何使用纯CSS3创建一个圆形元素并实现无限循环的旋转动画。通过设置`border-radius`属性创建圆点,利用`@keyframes`定义动画关键帧,实现从0度到360度的平滑旋转效果。这个技巧适用于前端开发中的动态效果设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

您可以使用纯css3实现此目的.像这样写:

CSS

.dot{

position:absolute;

top:0;

left:0;

width:50px;

height:50px;

background:red;

border-radius:50%;

}

.sun{

width:200px;

height:200px;

position:absolute;

-webkit-animation-iteration-count:infinite;

-webkit-animation-timing-function:linear;

-webkit-animation-name:orbit;

-webkit-animation-duration:5s;

top:50px;

left:50px;

}

@-webkit-keyframes orbit {

from { -webkit-transform:rotate(0deg) }

to { -webkit-transform:rotate(360deg) }

}

HTML

更新

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值