旋转圆环代码介绍|老小孩讲述

旋 转 圆 环 代 码 介 绍

旋 转 圆 环 代 码

＜div style="margin-top: 0px; margin-left: 80px;"＞

＜style type="text/css"＞.圆环{

width: 500px; /*圆环宽*/

height: 500px; /*圆环高*/

position: relative; /*相对定位*/

animation: linear 动 20s infinite; /*匀速转动/一周期用时/循环转动*/

}

@keyframes 动{

from {transform:rotate(0deg);} /*动画设置*/

to {transform:rotate(360deg);} /*动画设置*/

}

＜/style＞

＜div class="圆环"＞＜img src="//image109.360doc.com/DownloadImg/2022/09/1614/252157638_1_20220916021521400.png" style="width: 500px; height: 500px;" /＞＜/div＞ ＜/div＞

旋 转 圆 环 素 材 （供选用）

http://img1.oldkids.cn/upload/2021/01/23/blog_20210123192631520.png

http://www.oldkids.cn/upload/2020/02/02/blog_20200202163109122.png

http://www.oldkids.cn/upload/2018/12/06/blog_20181206183813292.png

http://www.oldkids.cn/upload/2020/02/02/blog_20200202163109122.png

http://img1.oldkids.cn/upload/2021/01/22/blog_20210122212454619.png

//image109.360doc.com/DownloadImg/2022/09/1614/252157638_1_20220916021521400.png

提 醒 注 意 ！

①圆环直径（宽高相同）可依需要改变大小，但css样式中宽高设置要与圆环宽高保持一致，否则，将造成旋转中心不固定。

②建议使用时选取复制源码。若复制本页中的代码，粘贴后须将代码中的所有尖角符号改为英文尖角引号。

③旋转圆环在画面上必须进行定位，我这里用的是外边距定位，故属于相对定位。

④华龙老师好！不知此帖能否如您所愿，倘有不明之处或另有要求，我敬候尊言，再作新解。