小圆围绕大圆360度旋转的2种方法

最新推荐文章于 2024-03-07 16:46:41 发布
最新推荐文章于 2024-03-07 16:46:41 发布
阅读量6.7k 收藏
点赞数 1
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sweetllh/article/details/70185870
版权

第一种 ：覆盖法
1. ul包含7个li，每个li包含图片和含小圆的span；
2. li、img、div、span都给border-radius:50%，img（图片）的大小要小于li；
3. span（小圆）由一个div包住，div覆盖（定位）到li上面去，div的大小和li大小一样;
4. 给每个li和span定位；
5. div旋转360度，小圆就旋转360度；

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>face</title>
    </head>
    <body>
        <ul>
            <li class="image1">
                <img src="imgs/1.jpg" alt="" />
                <div><span></span></div>
            </li>
            <li class="image2">
                <img src="imgs/2.jpg" alt="" />
                <div><span></span></div>
            </li>
            <li class="image3">
                <img src="imgs/3.jpg" alt="" />
                <div><span></span></div>
            </li>
            <li class="image4">
                <img src="imgs/4.jpg" alt="" />
                <div><span></span></div>
            </li>
            <li class="image5">
                <img src="imgs/5.jpg" alt="" />
                <div><span></span></div>
            </li>
            <li class="image6">
                <img src="imgs/6.jpg" alt="" />
                <div><span></span></div>
            </li>
        </ul>
    </body>
</html>

css

<style type="text/css">
            /*基本设置*/
            html, body, div, ul, li{
                margin: 0;
                padding: 0;
                list-style: none;
            }

            ul{
                width: 600px;
                height: 600px;
                background: #2a2a2a;
                position: relative;
                margin: 0 auto;
            }

            li{
                width: 70px;
                height: 70px;
                border: 1px solid #ff4346;
                border-radius:70px;
                padding: 15px;
                position: relative;
            }

            img{
                width: 70px;
                height: 70px;
                border: 1px solid transparent;
                border-radius:70px;
            }
            /*给每个图片定位*/
            li.image1{
                position: absolute;
                left:30px;
                top: 80px;
            }

            li.image2{
                position: absolute;
                left:265px;
                top: 80px;
            }

            li.image3{
                position: absolute;
                right:30px;
                top: 80px;
            }

            li.image4{
                position: absolute;
                left:135px;
                top: 265px;
            }

            li.image5{
                position: absolute;
                right:135px;
                top: 265px;
            }

            li.image6{
                position: absolute;
                left:265px;
                bottom: 30px;
            }

            span{
                display: block;
                width: 10px;
                height: 10px;
                border-radius: 10px;
            }
            /*小圆给一个div包住，div覆盖到li上面去，div的大小和li大小一样，div旋转360度就是小圆围绕脸谱转360*/
            li div{
                width: 100px;
                height: 100px;
                border-radius: 100px;
                position: absolute;
                left:0;
                top: 0;
            }

            li div{
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                transition: transform 10s;
                animation: circle 10s infinite linear;
                -webkit-animation:circle 10s infinite linear;
                -moz-animation:circle 10s infinite linear;
            }

            @keyframes circle{
                0%{ transform:rotate(0deg); }
                100%{transform:rotate(360deg);}
            }

            @-webkit-keyframes circle{
                0%{ transform:rotate(0deg) ; }
                100%{transform:rotate(360deg);}
            }

            @-moz-keyframes circle{
                0%{ transform:rotate(0deg) ; }
                100%{transform:rotate(360deg);}
            }
            /*给每个小圆定位*/
            .image1 span{
                background: #c11ced;
                position: absolute;
                left: 18px;
                top:2px;
            }

            .image2 span{
                background: #FF4346;
                position: absolute;
                right: 18px;
                bottom: 2px;
            }

            .image3 span{
                background: #18ed58;
                position: absolute;
                left: 18px;
                bottom: 3px;
            }

            .image4 span{
                background: #0352cc;
                position: absolute;
                left: 40px;
                bottom: -4px;
            }

            .image5 span{
                background: #d90fb2;
                position: absolute;
                left: -5px;
                bottom: 53px;
            }

            .image6 span{
                background: #dff757;
                position: absolute;
                left: 67px;
                bottom: 0px;
            }
        </style>

第二种方法：改变小圆的旋转起点transform-origin
1. ul包含7个li，每个li包含图片和含小圆的span；
2. li、img、div、span都给border-radius:50%，img（图片）的大小要小于li；
3. 给每个li和span定位；
4. 改变span（小圆）的旋转起点transform-origin，使其位置刚好；
5. div旋转360度，小圆就旋转360度；

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>face</title>
    </head>
    <body>
        <ul>
            <li class="image1">
                <img src="imgs/1.jpg" alt="" />
                <span></span>
            </li>
            <li class="image2">
                <img src="imgs/2.jpg" alt="" />
                <span></span>
            </li>
            <li class="image3">
                <img src="imgs/3.jpg" alt="" />
                <span></span>
            </li>
            <li class="image4">
                <img src="imgs/4.jpg" alt="" />
                <span></span>
            </li>
            <li class="image5">
                <img src="imgs/5.jpg" alt="" />
                <span></span>
            </li>
            <li class="image6">
                <img src="imgs/6.jpg" alt="" />
                <span></span>
            </li>
        </ul>
    </body>
</html>

CSS

<style type="text/css">
            html, body, div, ul, li{
                margin: 0;
                padding: 0;
                list-style: none;
            }

            ul{
                width: 600px;
                height: 600px;
                background: #2a2a2a;
                position: relative;
                margin: 0 auto;
            }

            li{
                width: 70px;
                height: 70px;
                border: 1px solid #ff4346;
                border-radius:70px;
                padding: 15px;
                position: relative;
            }

            img{
                width: 70px;
                height: 70px;
                border: 1px solid transparent;
                border-radius:70px;
            }

            li.image1{
                position: absolute;
                left:30px;
                top: 80px;
            }

            li.image2{
                position: absolute;
                left:265px;
                top: 80px;
            }

            li.image3{
                position: absolute;
                right:30px;
                top: 80px;
            }

            li.image4{
                position: absolute;
                left:135px;
                top: 265px;
            }

            li.image5{
                position: absolute;
                right:135px;
                top: 265px;
            }

            li.image6{
                position: absolute;
                left:265px;
                bottom: 30px;
            }

            span{
                display: block;
                width: 10px;
                height: 10px;
                border-radius: 10px;
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                transition: transform 10s;
                animation: circle 10s infinite linear;
                -webkit-animation:circle 10s infinite linear;
                -moz-animation:circle 10s infinite linear;
            }

            @keyframes circle{
                0%{ transform:rotate(0deg); }
                100%{transform:rotate(360deg);}
            }

            @-webkit-keyframes circle{
                0%{ transform:rotate(0deg) ; }
                100%{transform:rotate(360deg);}
            }

            @-moz-keyframes circle{
                0%{ transform:rotate(0deg) ; }
                100%{transform:rotate(360deg);}
            }

            .image1 span{
                background: #c11ced;
                position: absolute;
                left: 18px;
                top:2px;
                transform-origin: 32px 48px;
            }

            .image2 span{
                background: #FF4346;
                position: absolute;
                right: 18px;
                bottom: 2px;
                transform-origin: -22px -38px;
            }

            .image3 span{
                background: #18ed58;
                position: absolute;
                left: 18px;
                bottom: 3px;
                transform-origin: 32px -38px;
            }

            .image4 span{
                background: #0352cc;
                position: absolute;
                left: 40px;
                bottom: -4px;
                transform-origin: 10px -46px;
            }

            .image5 span{
                background: #d90fb2;
                position: absolute;
                left: -5px;
                bottom: 53px;
                transform-origin: 55px 12px;
            }

            .image6 span{
                background: #dff757;
                position: absolute;
                left: 67px;
                bottom: 0px;
                transform-origin: -17px -40px;
            }
        </style>
sweetllh
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义view—小圆围绕大圆旋转
07-25
简单的demo，小圆围绕大圆360度旋转
wpf加载动画（圆圈旋转）
11-18
这段代码定义了一个旋转360度，持续1秒的动画，并让它无限重复。`Ellipse` 是我们的旋转图形，而 `RenderTransform` 中的 `RotateTransform` 使得旋转成为可能。 在实际应用中，我们可能还需要控制动画的启动和停止...
Web 动画之旅 CSS 变换的世界：创建流畅的 Web 动画
sybh的博客
02-18 1162
简单地说，CSS 变换特性允许你通过应用位移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）等变换效果，以及三维空间的变换，改变 Web 元素的位置、大小和外观，从而创建各种动画、视觉效果和交互效果。这些变换可以通过 CSS 的transform属性应用于 HTML 元素，使得 Web 开发者能够实现富有创意和引人入胜的用户界面。CSS 变换和许多 CSS 功能一样，异常出色，绝不仅限于动画开发中。
小圆绕大圆转
Jiajun Zhu
07-09 7155
圆外螺线/外摆线 · 圆内螺线/内摆线
小圆大圆转圈问题
特别喜欢喝可乐
03-06 1万+
题1. 北师大版《数学》九年级下册127页有这样一道题：如图1，取两枚大小相同的硬币，将其中一枚固定在桌面上，另一枚沿着固定硬币的边缘滚动一周，那么滚动的硬币自身转了多少圈？                                                                                                                 ...
动图之一个圆绕另一个圆转动
Leslie Lee's blog includes programming in math, physics, and engineering.
06-14 9229
已知圆1与圆2，圆2不动 问题1：圆1绕圆2转一圈，圆1自转多少圈？ 问题2：圆1绕圆2转一圈，圆1与圆2的接触点在圆1上的为a，点a相对于圆2圆心转了多少度？ 圆心没有自转 圆1的圆心走了2π(r1+r2)2\pi(r_1+r_2)2π(r1​+r2​)，圆1自转了的路程也是2π(r1+r2)2\pi(r_1+r_2)2π(r1​+r2​)，因此圆1自转了2π(r1+r2)2πr1\frac{2\pi(r_1+r_2)}{2\pi r_1}2πr1​2π(r1​+r2​)​圈 ...
android自定义view圆,Android自定义View实现圆形环绕效果
weixin_33680447的博客
05-25 315
Android自定义View实现圆形环绕效果发布时间：2020-08-23 00:06:58来源：脚本之家阅读：140作者：zuozuoshenghen之前项目中需要实现一个四周环绕中心圆形头像的效果，感觉还是自定义比较方便，于是就自己封装了一个控件去实现。先贴张图显示最终效果。首先自定义一个View继承自LinearLayout,通过动态添加childView的方式将子控件添加到View中。思路...
CSS循环圆形旋转文字动画.rar
10-01
这段代码定义了一个名为`rotateText`的动画，使得元素在动画周期内从原点旋转到180度，然后反向旋转回到起点，完成360度旋转。 其次，CSS的布局技巧也至关重要。可能使用了诸如`position: absolute;`或`position: ...
圆形进度控件
09-07
使用`canvas.drawArc()`方法，传入圆心坐标、半径、起始角度、结束角度（基于360度制）以及绘制的Paint对象。 4. **动画效果**：为了使进度条更生动，我们可以添加动画。使用`ObjectAnimator`或`ValueAnimator`可以...
css3鼠标经过圆形旋转特效.zip
07-05
/* 旋转360度，实现完整一圈的旋转效果 */ } ``` `transition`属性在这里扮演了关键角色，它定义了元素从一种样式过渡到另一种样式的速度。`0.5s`表示过渡时间为半秒，`ease`则是默认的缓动函数，使得动画开始和...
JavaScript canvas实现围绕旋转动画
11-28
使用canvas的convas来实现围绕旋转动画，外圈顺时针，里层逆时针 代码demo链接地址：代码demo链接地址 html文件 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #f0f0f0; } </style> [removed][removed] <
一个小圆沿着大圆圆周滚动，求小圆转动周数
热门推荐
jiyanfeng1的专栏
10-02 1万+
两个圆环，半径分别是1和2，小圆在大圆内部绕大圆一周，小圆自身转几周？如果在大圆外部，小圆自身转几周？  这个题的思路如下： 小圆圆心，小圆和大圆的接触点有着不同的角速度。 小圆在大圆内部滚动时，二者的比值是1：2. 小圆在大圆内部滚动时，二者的比值是3：2. 不论小圆在大圆里还是在大圆外，小圆大圆的接触点绕小圆心转数总是2周。 所以，小圆在大圆内部滚动时，小圆心绕大圆心滚动1周。
android 小球绕外圆旋转
csdn_yang123的博客
09-20 3177
android 小球绕外圆旋转
c/c++实现图像旋转任意角度
richer_live的博客
08-11 4253
c/c++实现图像旋转任意角度
数字图像处理（十五）图像旋转
qq_41596730的博客
11-26 1万+
数字图像处理，图像旋转
前端实现图片绕指定圆心转动，且图片自身不转动的功能
最新发布
Aa12364567的博客
03-07 661
然后利用transform-origin: bottom left;前端实现图片绕指定圆心转动，且图片自身不转动的功能、用transform: rotate 去做旋转。逆时针旋转 animation 选择反向运行的。利用css的animation 去做循环。img 在div旋转的同时 做反向旋转。
纯css3实现圆点围绕圆圈匀速无限旋转
weixin_30245867的博客
12-06 3245
这个东西只是一个思路，大部分的效果都是通过js实现的，但是这里通过css3实现，其实效果要好得多，而且我建议很多效果如果可以通过css实现，要比js实现的效果要好。 预览地址我放在了GitHub里 https://musclemen.github.io/website-update/demo.html 1 <!doctype html> 2 ...
js+css3围绕中心圆形旋转动画js特效
ICode联盟
05-09 1377
下载地址 js+css3圆形旋转动画特效，鼠标悬停的时候会暂停，离开的时候又继续旋转。 dd:
变色的旋转圆圈JS特效代码
山鹰的专栏
01-20 1109
变色的旋转圆圈 var CoLoUrS=new Array('ff0000','ffffff','0000ff','ffffff'); var dots=16; var ThingsInArray; var step=0.3; var a_StEp=0.05; var RunTime=0; var currStep = 0; var Xpos = 0; var Ypo
js小圆均匀围绕在大圆上代码怎么布局
05-25
可以使用 CSS 实现小圆均匀围绕在大圆上的效果，以下是一个简单的示例代码： HTML 代码： ```html <div class="container"> <div class="big-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> </div> ``` CSS 代码： ```css .container { position: relative; width: 300px; height: 300px; } .big-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; border-radius: 50%; background-color: #ccc; } .small-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(60deg) translate(100px) rotate(-60deg); width: 20px; height: 20px; border-radius: 50%; background-color: #f00; } ``` 解释一下代码： - `.container` 是一个容器，用来包含大圆和小圆。 - `.big-circle` 是大圆，使用绝对定位、居中和圆角实现。 - `.small-circle` 是小圆，也使用绝对定位，通过 CSS transform 属性实现绕大圆均匀分布的效果。其中，`translate(-50%, -50%)` 用来将小圆的中心点移到大圆的中心点，`rotate(60deg)` 用来将小圆旋转 60 度，`translate(100px)` 用来将小圆向外移动 100 像素，最后一个 `rotate(-60deg)` 用来将小圆再次旋转 -60 度，使其方向正确。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值