CSS3动画怎么让一个小圆点绕着一个圆运动

Posted 2023-04-06

http://www.17sucai.com/preview/94311/2014-05-23/CSS31/index.html
我要的原理。。

就像这个一样的。。

原理就是，先定义一个元素 ，然后定义动画XYZ轴偏移。

body > div > div:after 
    content: "";
    position: absolute;
    top: -5px;
    box-shadow: 0 0 12px #fff;
    left: 50%;
    margin-left: -5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #fff;
    -webkit-animation: particle_ 2s infinite linear;
    animation: particle_ 2s infinite linear;

body > div:nth-of-type(4) > div, body > div:nth-of-type(4) > div:after 
    -webkit-animation-delay: -1.5s;
    animation-delay: -1.5s;

body > div > div 
    width: 200px;
    height: 200px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: trail_ 2s infinite linear;
    transform-style: preserve-3d;
    animation: trail_ 2s infinite linear;

 

实施步骤：

建立一个BOX

在BOX中制作一个元素。

CSS动画定义BOX旋转按照你的轨迹。

通过。

-webkit-transform:rotateY( 0deg ) rotateZ( 0deg )  rotateX( 0deg );

           -moz-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg );

        -o-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg );

                transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg );

来定义旋转方向，0是不旋转。0-360度是一圈。

       -webkit-transition:transform 1s; 

transition:transform 1s;

这是设置动画时间。

一个BOX完成后，复制box，摆在统一中心点后，设置Z轴的数字。

参考技术A 这是源代码，看不懂就去查CSS样式作用
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
html, body 
  height: 100%;


body 
  background: radial-gradient(ellipse at center,  #34679a 0%,#214163 47%,#0d1926 100%);


body > div  
  position: absolute; 
  top: 12%; 
  left: 50%; 
  margin-left: -103px;
  width: 200px; 
  height: 200px; 
  border-radius: 50%; 
  border: 1px solid #fff;
  -webkit-transform-style: preserve-3d; 
  -webkit-transform: rotateX(80deg) rotateY(20deg);
  transform-style: preserve-3d; 
  transform: rotateX(80deg) rotateY(20deg);


body > div:first-of-type:after 
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  background: #fff;
  border-radius: 50%;
  -webkit-transform: rotateX(-80deg) rotateY(0);
  transform: rotateX(-80deg) rotateY(0);
  box-shadow: 0 0 25px #fff;
  -webkit-animation: nucleus_ 2s infinite linear;
  animation: nucleus_ 2s infinite linear;
  left: 50%;
  top: 50%;
  margin-top: -20px;
  margin-left: -20px;


body > div:nth-of-type(2) 
  -webkit-transform: rotateX(-80deg) rotateY(20deg);
  transform: rotateX(-80deg) rotateY(20deg);


body > div:nth-of-type(3) 
  -webkit-transform: rotateX(-70deg) rotateY(60deg);
  transform: rotateX(-70deg) rotateY(60deg);


body > div:nth-of-type(4) 
  -webkit-transform: rotateX(70deg) rotateY(60deg);
  transform: rotateX(70deg) rotateY(60deg);


body > div > div 
  width: 200px;
  height: 200px;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -webkit-animation: trail_ 2s infinite linear;
  transform-style: preserve-3d;
  animation: trail_ 2s infinite linear;


body > div > div:after 
  content: ""; 
  position: absolute; 
  top: -5px; 
  box-shadow: 0 0 12px #fff;
  left: 50%; 
  margin-left: -5px; 
  width: 5px; 
  height: 5px; 
  border-radius: 50%;
  background-color: #fff;
  -webkit-animation: particle_ 2s infinite linear;
  animation: particle_ 2s infinite linear;


body > div:nth-of-type(2) > div,
body > div:nth-of-type(2) > div:after 
  -webkit-animation-delay: -.5s;
  animation-delay: -.5s;


body > div:nth-of-type(3)  > div,
body > div:nth-of-type(3)  > div:after 
  -webkit-animation-delay: -1s;
  animation-delay: -1s;


body > div:nth-of-type(4) > div,
body > div:nth-of-type(4) > div:after 
  -webkit-animation-delay: -1.5s;
  animation-delay: -1.5s;


@-webkit-keyframes trail_  
    from 
        -webkit-transform: rotateZ(0deg);
     to 
        -webkit-transform: rotateZ(360deg);
    


@keyframes trail_  
    from 
        transform: rotateZ(0deg);
     to 
        transform: rotateZ(360deg);
    


@-webkit-keyframes particle_  
    from 
        -webkit-transform: rotateX(90deg) rotateY(0deg); 
        transform: rotateX(90deg) rotateY(0deg); 
     to 
      -webkit-transform: rotateX(90deg) rotateY(-360deg);  
        transform: rotateX(90deg) rotateY(-360deg); 
     



@keyframes particle_  
    from 
        transform: rotateX(90deg) rotateY(0deg); 
     to  
        transform: rotateX(90deg) rotateY(-360deg); 
     


@keyframes nucleus_  
    0% 
        box-shadow: 0 0 0 transparent;
     50%  
        box-shadow: 0 0 25px #fff;
     100%  
        box-shadow: 0 0 0 transparent;
    


@-webkit-keyframes nucleus_  
    0% 
        box-shadow: 0 0 0 transparent;
     50%  
        box-shadow: 0 0 25px #fff;
     100%  
        box-shadow: 0 0 0 transparent;
    


</style>
<body>

<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
</body>
</html>

参考技术B <style>
* padding:0;margin:0;font-size:14px; 
.d
width: 80px;height:80px;border-radius:50%;position:relative;margin: 50px auto;
background-color: #b7e9ee; box-shadow: 0 0 5px,0 0 10px #0ab;text-align:center;line-height:80px;

.small-pian
width: 50px;height:50px;position:absolute;margin: auto;top:0;bottom:0;left:0;right:0;
animation: run 4s linear infinite;

.small-pian .small-p
width: 10px;height:10px;position:absolute;top:20px;border-radius:50%;

.small-pian .p1
background-color: #ff7e08;left:80px;

.small-pian .p2
background-color: #ff0853;right:80px;

@keyframes run
0%
transform: rotateZ(0deg);

100%
transform: rotateZ(360deg);


</style>
</head>
<body>
<div class="d">Hello
<div class="small-pian">
<div class="small-p p1"></div>
<div class="small-p p2"></div>
</div>
</div>
<div class="d">Hello
<div class="small-pian">
<div class="small-p p2"></div>
</div>
</div>
</body>

参考技术C 原理就是，先定义一个元素 ，然后定义动画XYZ轴偏移。

swiper 怎么改圆点的大小

1、1：1触控运动 Swiper默认提供1:1的触控距离，当然，这个比率是可以设置的。（touchRatio） 2、触控模仿 这个功能对于开发桌面网站会很有用。简单来说，就是因为Swiper能够让鼠标事件表现得像触屏事件（点击以及拖曳滑块） 3、水平/垂直 Swiper运动主要有两种模式，horizontal(水平滑动)以及vertical（垂直运动的滑动） 4、自由模式（Free Mode） 这种模式下能够让slides 无需定位，就像通常的滑动条。（看下面的例子） 5、旋转调整 （rotation/resize） Swiper 在移动设备旋转后能自适应尺寸。 6、响应式 能使用百分比的宽高定义slides,为移动端提供不同的解决方案。 7、滑动阻止 简单来说，就是，只能使用一种模式，水平或者垂直滑动。 8、抵抗反弹（resistant bounds） Swiper能够提供一种机制，就是当滑动滑块超过最左以及最右（最上或最下）的位置时触发的一种抵御机制。 9、原生要素（native momentum） 有不少的原生东西提供给Swiper。 10、内建分页控制 Swiper能够快速生成内建的分页控制（pagination）,指定html 某一标签为pagination，Swiper就能做很多东西了。 11、自动播放 只用设置延迟时间，Swiper就会自动地轮播slides直到你触碰该滑块（touch）为止。 12、循环模式（Loop mode） 该种模式下，你能够无限滑动滑块，到最后一个之后会跳转回第一个。 13、旋转模式（Carousel mode） Swiper 能够让你在slides父容器下设置你所需要展示的slides数量。 14、滑动容器 在该特征下能够使用Swiper在一些简单的能滑动的区域里，没有slides。在Apps里十分有用。 15、嵌套Swipers 能够将Swipers嵌套入各种不同的Swiper 的slide里，例如垂直的或水平的。 16、任意的HTML 标签 可以将任一的HTML 内容放到slide里，不止仅限于图像。 17、硬件加速 swiper 使用硬件加速技术（如果该移动设备支持的话）能够得到良好流畅的动画效果以及优美的外观，尤其是在IOS设备里。 18、丰富的API Swiper拥有丰富的API接口。（不过关于中文文档似乎不多，没找着。）能够让开发者生成个人独有的分页器（pagination），上下滑块的按钮以及4个回调函数：onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch。 19、灵活的配置 Swiper在初始化的时候能够接受多个参数以便让其尽可能的灵活。能够配置动画的速度（speed），模式（mode水平抑或垂直的），以及自由模式（free mode）...以及其他.. 20、插件API（Plugins API） Swiper从1.7版本开始就变得强大起来了，因为有更多而简单的插件API允许开发者创造属于自己的Swiper 插件或通过Swiper的核心创制hooks(挂钩)（该官网处提供了几款优秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar） 21、良好的兼容性 Swiper通用性的测试环境：移动端的Safari（iOS5下），Android 2.1+，windows Phone 8,以及最新版本的谷歌浏览器（Chrome），Safari，Firefox，IE10 以及欧朋浏览器（Opera） 22、老版本IE的兼容 Swiper 2.x 开始，通过DOM动画，而非css transitions 兼容IE7 以上（需要包含jQuery），因为IE7不支持css3 transitions....简单来说，支持IE7 以上版本。 参考技术A

添加样式覆盖

.swiper-pagination-bullet
height: 20px;
width: 20px;