devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css动画演示_css 动画演示

作者：凡人多烦事01 | 2024-03-18 23:48:43

赞

踩

css 动画演示

动画1（沿着椭圆转动）

 其实是个2D转动，只不过咱们设置椭圆，然后加上scale缩放（近大远小），看上去就是3D效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>动画1</title>
  9. </head>
  10.  
  11. <body>
  12.   <style>
  13.     * {
  14.       margin: 0;
  15.       padding: 0;
  16.       box-sizing: border-box;
  17.     }
  18.  
  19.     body {
  20.       width: 100vw;
  21.       height: 100vh;
  22.       position: relative;
  23.     }
  24.  
  25.     /* 位置 */
  26.     .container {
  27.       position: absolute;
  28.       width: 800px;
  29.       height: 180px;
  30.       top: 20%;
  31.       left: 50%;
  32.       transform: translateX(-60%);
  33.       /* border: 1px solid red; */
  34.     }
  35.  
  36.     /* 动画的容器(椭圆) */
  37.     .box {
  38.       width: 100%;
  39.       height: 100%;
  40.       position: relative;
  41.       /* border: 1px solid blue; */
  42.       box-sizing: border-box;
  43.       border-radius: 50%;
  44.     }
  45.  
  46.     /*  椭圆线 */
  47.     .border {
  48.       position: absolute;
  49.       width: 800px;
  50.       height: 180px;
  51.       top: 65px;
  52.       left: 60px;
  53.       border: 1px solid #0084ff;
  54.       box-sizing: border-box;
  55.       border-radius: 50%;
  56.     }
  57.  
  58.     /* 以下是转动的动画 */
  59.     .circle {
  60.       width: 200px;
  61.       height: 130px;
  62.       position: absolute;
  63.       z-index: 999;
  64.     }
  65.  
  66.     .circle img {
  67.       width: 100%;
  68.       height: 100%;
  69.     }
  70.  
  71.     .circle1 {
  72.       animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -5.5s infinite alternate,
  73.         animY 11s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
  74.         scale 22s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  75.     }
  76.  
  77.     .circle2 {
  78.       animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
  79.         animY 11s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
  80.         scale 22s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
  81.     }
  82.  
  83.     .circle3 {
  84.       animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
  85.         animY 11s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
  86.         scale 22s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
  87.     }
  88.  
  89.     .circle4 {
  90.       animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -11.5s infinite alternate,
  91.         animY 11s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
  92.         scale 22s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
  93.     }
  94.  
  95.     .circle5 {
  96.       animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
  97.         animY 11s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
  98.         scale 22s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
  99.     }
  100.  
  101.     .circle6 {
  102.       animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -15.5s infinite alternate,
  103.         animY 11s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
  104.         scale 22s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
  105.     }
  106.  
  107.     .circle7 {
  108.       animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -17.5s infinite alternate,
  109.         animY 11s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
  110.         scale 22s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
  111.     }
  112.  
  113.     .circle8 {
  114.       animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
  115.         animY 11s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
  116.         scale 22s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate;
  117.     }
  118.  
  119.     .circle9 {
  120.       animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -21.5s infinite alternate,
  121.         animY 11s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
  122.         scale 22s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate;
  123.     }
  124.  
  125.     .circle10 {
  126.       animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -23.5s infinite alternate,
  127.         animY 11s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate,
  128.         scale 22s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate;
  129.     }
  130.  
  131.     .circle11 {
  132.       animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -25.5s infinite alternate,
  133.         animY 11s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate,
  134.         scale 22s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate;
  135.     }
  136.  
  137.     @keyframes animX {
  138.       0% {
  139.         left: -4%;
  140.       }
  141.  
  142.       100% {
  143.         left: 96%;
  144.       }
  145.     }
  146.  
  147.     @keyframes animY {
  148.       0% {
  149.         top: -4%;
  150.       }
  151.  
  152.       100% {
  153.         top: 96%;
  154.       }
  155.     }
  156.  
  157.     @keyframes scale {
  158.       0% {
  159.         transform: scale(0.4);
  160.         opacity: 0.5;
  161.       }
  162.  
  163.       50% {
  164.         transform: scale(1);
  165.         opacity: 1;
  166.       }
  167.  
  168.       100% {
  169.         transform: scale(0.4);
  170.         opacity: 0.5;
  171.       }
  172.     }
  173.   </style>
  174.  
  175.   <div class="container">
  176.     <div class="box">
  177.       <div class="circle circle1">
  178.         <img src="./img/步数.png" alt="">
  179.       </div>
  180.       <div class="circle circle2">
  181.         <img src="./img/胆固醇.png" alt="">
  182.       </div>
  183.       <div class="circle circle3">
  184.         <img src="./img/肺呼吸.png" alt="">
  185.       </div>
  186.       <div class="circle circle4">
  187.         <img src="./img/尿酸.png" alt="">
  188.       </div>
  189.       <div class="circle circle5">
  190.         <img src="./img/睡眠.png" alt="">
  191.       </div>
  192.       <div class="circle circle6">
  193.         <img src="./img/体脂.png" alt="">
  194.       </div>
  195.       <div class="circle circle7">
  196.         <img src="./img/跳绳.png" alt="">
  197.       </div>
  198.       <div class="circle circle8">
  199.         <img src="./img/握力.png" alt="">
  200.       </div>
  201.       <div class="circle circle9">
  202.         <img src="./img/心率.png" alt="">
  203.       </div>
  204.       <div class="circle circle10">
  205.         <img src="./img/血糖.png" alt="">
  206.       </div>
  207.       <div class="circle circle11">
  208.         <img src="./img/血氧.png" alt="">
  209.       </div>
  210.  
  211.       <!-- 椭圆线 -->
  212.       <div class="border"></div>
  213.     </div>
  214.   </div>
  215. </body>
  216.  
  217. </html>

1. scale去设置的总时间(也就是转一圈用的时间)， 这里设置 22秒

2. X轴和Y轴用的时间是一样的，都为总时间的一半，也就是11秒

3. 相差的时间是 总时间/图片的个数  这里也就是 22/11 = 2秒

4.  X轴和Y轴的延时时间相差 11/2 = 5.5秒


可以把代码拷贝过去，修改一下试试就可以啦 

动画2 （旋转木马特效）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>动画2</title>
  8. </head>
  9. <body>
  10.   <style>
  11.     * {
  12.       margin: 0;
  13.       padding: 0;
  14.       box-sizing: border-box;
  15.     }
  16.  
  17.     body {
  18.       width: 100vw;
  19.       height: 100vh;
  20.       position: relative;
  21.     }
  22.     .container {
  23.       position: absolute;
  24.       width: 1000px;
  25.       height: 500px;
  26.       top: 15%;
  27.       left: 50%;
  28.       transform: translateX(-50%);
  29.       z-index: 999;
  30.       display: flex;
  31.       justify-content: center;
  32.       align-items: center;
  33.       perspective: 1000px;
  34.     }
  35.     .box {
  36.       width: 150px;
  37.       height: 150px;
  38.       position: relative;
  39.       transform-style: preserve-3d;
  40.       animation: run 11s linear infinite;
  41.     }
  42.     .circle {
  43.       position: absolute;
  44.       top: 0;
  45.       left: 0;
  46.       width: 150px;
  47.       height: 150px;
  48.     }
  49.  
  50.     /*设置图像大小、边框、圆角、位置*/
  51.     .circle img {
  52.       width: 150px;
  53.       height: 200px;
  54.       border: 1px solid #ccc;
  55.       border-radius: 5px;
  56.       box-sizing: border-box;
  57.     }
  58.  
  59.     .circle1 {
  60.       transform: translateZ(500px);
  61.     }
  62.     .circle2 {
  63.       transform: rotateY(36deg) translateZ(500px);
  64.     }
  65.     .circle3 {
  66.       transform: rotateY(72deg) translateZ(500px);
  67.     }
  68.     .circle4 {
  69.       transform: rotateY(108deg) translateZ(500px);
  70.     }
  71.     .circle5 {
  72.       transform: rotateY(144deg) translateZ(500px);
  73.     }
  74.     .circle6 {
  75.       transform: rotateY(180deg) translateZ(500px) ;
  76.     }
  77.     .circle7 {
  78.       transform: rotateY(216deg) translateZ(500px);
  79.     }
  80.     .circle8 {
  81.       transform: rotateY(252deg) translateZ(500px);
  82.     }
  83.     .circle9 {
  84.       transform: rotateY(288deg) translateZ(500px);
  85.     }
  86.     .circle10 {
  87.       transform: rotateY(324deg) translateZ(500px);
  88.     }
  89.     @keyframes run {
  90.       0% {
  91.         transform: rotateY(0);
  92.       }
  93.  
  94.       100% {
  95.         transform: rotateY(360deg);
  96.       }
  97.     }
  98.   </style>
  99.   <div class="container">
  100.     <div class="box">
  101.       <div class="circle circle1">
  102.         <img src="./img/1.jpg" alt="">
  103.       </div>
  104.       <div class="circle circle2">
  105.         <img src="./img/2.jpg" alt="">
  106.       </div>
  107.       <div class="circle circle3">
  108.         <img src="./img/3.jpg" alt="">
  109.       </div>
  110.       <div class="circle circle4">
  111.         <img src="./img/4.jpg" alt="">
  112.       </div>
  113.       <div class="circle circle5">
  114.         <img src="./img/5.jpg" alt="">
  115.       </div>
  116.       <div class="circle circle6">
  117.         <img src="./img/6.jpg" alt="">
  118.       </div>
  119.       <div class="circle circle7">
  120.         <img src="./img/7.jpg" alt="">
  121.       </div>
  122.       <div class="circle circle8">
  123.         <img src="./img/8.jpg" alt="">
  124.       </div>
  125.       <div class="circle circle9">
  126.         <img src="./img/9.jpg" alt="">
  127.       </div>
  128.       <div class="circle circle10">
  129.         <img src="./img/10.jpg" alt="">
  130.       </div>
  131.     </div>
  132.   </div>
  133. </body>
  134. </html>

动画3 （沿X、Y、Z轴自转）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>动画3</title>
  8. </head>
  9. <body>
  10.   <style>
  11.     * {
  12.       padding: 0;
  13.       margin: 0;
  14.       box-sizing: border-box;
  15.     }
  16.     body {
  17.       width: 100vw;
  18.       height: 100vh;
  19.       display: flex;
  20.       justify-content: center;
  21.       align-items: center;
  22.     }
  23.  
  24.     .container img {
  25.       width: 150px;
  26.       height: 150px;
  27.       margin: 0 20px;
  28.     }
  29.     .container > img:nth-of-type(1) {
  30.       animation: rotate1 5s linear infinite;
  31.     }
  32.     .container > img:nth-of-type(2) {
  33.       animation: rotate2 5s linear infinite;
  34.     }
  35.     .container > img:nth-of-type(3) {
  36.       animation: rotate3 5s linear infinite;
  37.     }
  38.     /* 绕着Y轴转 */
  39.     @keyframes rotate1 {
  40.       0% {
  41.         transform: rotateY(0);
  42.       }
  43.  
  44.       100% {
  45.         transform: rotateY(360deg);
  46.       }
  47.     }
  48.     /* 绕着X轴转 */
  49.     @keyframes rotate2 {
  50.       0% {
  51.         transform: rotateX(0);
  52.       }
  53.  
  54.       100% {
  55.         transform: rotateX(360deg);
  56.       }
  57.     }
  58.     /* 绕着Z轴转 */
  59.     @keyframes rotate3 {
  60.       0% {
  61.         transform: rotateZ(0);
  62.       }
  63.  
  64.       100% {
  65.         transform: rotateZ(360deg);
  66.       }
  67.     }
  68.   </style>
  69.   <div class="container">
  70.     <img src="./img/1.png" alt="">
  71.     <img src="./img/2.jpg" alt="">
  72.     <img src="./img/3.jpg" alt="">
  73.   </div>
  74. </body>
  75. </html>

动画4（点击收缩隐藏）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12.   <style>
  13.     * {
  14.       padding: 0;
  15.       margin: 0;
  16.       box-sizing: border-box;
  17.     }
  18.     .box {
  19.       width: 500px;
  20.       height: 500px;
  21.       border: 1px solid red;
  22.       margin: 100px 0 0 100px;
  23.       position: relative;
  24.       overflow: hidden;
  25.     }
  26.     .move {
  27.       width: 30%;
  28.       height: 70%;
  29.       border: 1px solid blue;
  30.       border-radius: 10px;
  31.       position: absolute;
  32.       right: -150px;
  33.       top: 15%;
  34.     }
  35.     #btn {
  36.       position: absolute;
  37.       top: 50%;
  38.       right: 0;
  39.       transform: translateY(-50%);
  40.     }
  41.     .show {
  42.       animation: rotate1 0.4s linear;
  43.       /* 动画执行一次 */
  44.       animation-iteration-count: 1;
  45.       /* 停留在最后一帧 */
  46.       animation-fill-mode: both;
  47.     }
  48.     .hide {
  49.       animation: rotate2 0.4s linear;
  50.       /* 动画执行一次 */
  51.       animation-iteration-count: 1;
  52.       /* 停留在最后一帧 */
  53.       animation-fill-mode: both;
  54.     }
  55.     /* 向左移动 */
  56.     @keyframes rotate1 {
  57.       0% {
  58.         transform: translateX(0);
  59.       }
  60.  
  61.       100% {
  62.         transform: translateX(-150px);
  63.       }
  64.     }
  65.     /* 向右移动 */
  66.     @keyframes rotate2 {
  67.       0% {
  68.         transform: translateX(-150px);
  69.       }
  70.  
  71.       100% {
  72.         transform: translateX(0);
  73.       }
  74.     }
  75.   </style>
  76.   <div class="box">
  77.     <div class="move"></div>
  78.     <button id="btn"></button>
  79.   </div>
  80.   <script>
  81.     //  DOM.classList -> 返回一个元素的类属性的实时 DOMTokenList 集合。
  82.     //  DOM.classList.add('class1', 'class2', 'class3')  // 添加一个或多个类名
  83.     //  DOM.classList.remove('class1', 'class2', 'class3')  // 删除一个或多个类名
  84.     //  DOM.classList.toggle('class1', 'class2', 'class3')  // 切换类名（有则移除，没有则添加（切换效果））
  85.  
  86.     let flag = true  // true -> 点击展示， false -> 点击隐藏
  87.     const $ = name => document.querySelector(name)
  88.     $('#btn').innerHTML = '点击展开'
  89.     $('#btn').onclick = () => {
  90.       if (flag) {
  91.         $('.move').classList.remove('hide');
  92.         $('.move').classList.add('show');
  93.         setTimeout(() => {
  94.           $('#btn').innerHTML = '点击收起'
  95.         }, 400)
  96.       } else {
  97.         $('.move').classList.remove('show');
  98.         $('.move').classList.add('hide');
  99.         setTimeout(() => {
  100.           $('#btn').innerHTML = '点击展开'
  101.         }, 400)
  102.       }
  103.       flag = !flag
  104.     }
  105.   </script>
  106. </body>
  107. </html>

感谢大家支持学习

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/266218?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号