资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

首页 >> 新闻资讯 >> 建站文库

查看其它板块

css动画效果

作者：冲浪者科技 | 2023-03-01 | 热度：335 | 栏目：建站文库 | 收录：

动画1（沿着椭圆转动）

css动画效果_2d

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

代码：


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画1</title>
</head>

<body>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      height: 100vh;
      position: relative;
    }

    /* 位置 */
    .container {
      position: absolute;
      width: 800px;
      height: 180px;
      top: 20%;
      left: 50%;
      transform: translateX(-60%);
      /* border: 1px solid red; */
    }

    /* 动画的容器(椭圆) */
    .box {
      width: 100%;
      height: 100%;
      position: relative;
      /* border: 1px solid blue; */
      box-sizing: border-box;
      border-radius: 50%;
    }

    /*  椭圆线 */
    .border {
      position: absolute;
      width: 800px;
      height: 180px;
      top: 65px;
      left: 60px;
      border: 1px solid #0084ff;
      box-sizing: border-box;
      border-radius: 50%;
    }

    /* 以下是转动的动画 */
    .circle {
      width: 200px;
      height: 130px;
      position: absolute;
      z-index: 999;
    }

    .circle img {
      width: 100%;
      height: 100%;
    }

    .circle1 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -5.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    }

    .circle2 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
    }

    .circle3 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
    }

    .circle4 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -11.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
    }

    .circle5 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
    }

    .circle6 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -15.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
    }

    .circle7 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -17.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
    }

    .circle8 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate;
    }

    .circle9 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -21.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate;
    }

    .circle10 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -23.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate;
    }

    .circle11 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -25.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate;
    }

    @keyframes animX {
      0% {
        left: -4%;
      }

      100% {
        left: 96%;
      }
    }

    @keyframes animY {
      0% {
        top: -4%;
      }

      100% {
        top: 96%;
      }
    }

    @keyframes scale {
      0% {
        transform: scale(0.4);
        opacity: 0.5;
      }

      50% {
        transform: scale(1);
        opacity: 1;
      }

      100% {
        transform: scale(0.4);
        opacity: 0.5;
      }
    }
  </style>

  <div class="container">
    <div class="box">
      <div class="circle circle1">
        <img src="./img/步数.png" alt="">
      </div>
      <div class="circle circle2">
        <img src="./img/胆固醇.png" alt="">
      </div>
      <div class="circle circle3">
        <img src="./img/肺呼吸.png" alt="">
      </div>
      <div class="circle circle4">
        <img src="./img/尿酸.png" alt="">
      </div>
      <div class="circle circle5">
        <img src="./img/睡眠.png" alt="">
      </div>
      <div class="circle circle6">
        <img src="./img/体脂.png" alt="">
      </div>
      <div class="circle circle7">
        <img src="./img/跳绳.png" alt="">
      </div>
      <div class="circle circle8">
        <img src="./img/握力.png" alt="">
      </div>
      <div class="circle circle9">
        <img src="./img/心率.png" alt="">
      </div>
      <div class="circle circle10">
        <img src="./img/血糖.png" alt="">
      </div>
      <div class="circle circle11">
        <img src="./img/血氧.png" alt="">
      </div>

      <!-- 椭圆线 -->
      <div class="border"></div>
    </div>
  </div>
</body>

</html>


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

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

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

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


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

动画2 （旋转木马特效）

css动画效果_4s_02

 代码：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画2</title>
</head>
<body>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      height: 100vh;
      position: relative;
    }
    .container {
      position: absolute;
      width: 1000px;
      height: 500px;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1000px;
    }
    .box {
      width: 150px;
      height: 150px;
      position: relative;
      transform-style: preserve-3d;
      animation: run 11s linear infinite;
    }
    .circle {
      position: absolute;
      top: 0;
      left: 0;
      width: 150px;
      height: 150px;
    }

    /*设置图像大小、边框、圆角、位置*/
    .circle img {
      width: 150px;
      height: 200px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }

    .circle1 {
      transform: translateZ(500px);
    }
    .circle2 {
      transform: rotateY(36deg) translateZ(500px);
    }
    .circle3 {
      transform: rotateY(72deg) translateZ(500px);
    }
    .circle4 {
      transform: rotateY(108deg) translateZ(500px);
    }
    .circle5 {
      transform: rotateY(144deg) translateZ(500px);
    }
    .circle6 {
      transform: rotateY(180deg) translateZ(500px) ;
    }
    .circle7 {
      transform: rotateY(216deg) translateZ(500px);
    }
    .circle8 {
      transform: rotateY(252deg) translateZ(500px);
    }
    .circle9 {
      transform: rotateY(288deg) translateZ(500px);
    }
    .circle10 {
      transform: rotateY(324deg) translateZ(500px);
    }
    @keyframes run {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(360deg);
      }
    }
  </style>
  <div class="container">
    <div class="box">
      <div class="circle circle1">
        <img src="./img/1.jpg" alt="">
      </div>
      <div class="circle circle2">
        <img src="./img/2.jpg" alt="">
      </div>
      <div class="circle circle3">
        <img src="./img/3.jpg" alt="">
      </div>
      <div class="circle circle4">
        <img src="./img/4.jpg" alt="">
      </div>
      <div class="circle circle5">
        <img src="./img/5.jpg" alt="">
      </div>
      <div class="circle circle6">
        <img src="./img/6.jpg" alt="">
      </div>
      <div class="circle circle7">
        <img src="./img/7.jpg" alt="">
      </div>
      <div class="circle circle8">
        <img src="./img/8.jpg" alt="">
      </div>
      <div class="circle circle9">
        <img src="./img/9.jpg" alt="">
      </div>
      <div class="circle circle10">
        <img src="./img/10.jpg" alt="">
      </div>
    </div>
  </div>
</body>
</html>

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

css动画效果_前端_03

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画3</title>
</head>
<body>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container img {
      width: 150px;
      height: 150px;
      margin: 0 20px;
    }
    .container > img:nth-of-type(1) {
      animation: rotate1 5s linear infinite;
    }
    .container > img:nth-of-type(2) {
      animation: rotate2 5s linear infinite;
    }
    .container > img:nth-of-type(3) {
      animation: rotate3 5s linear infinite;
    }
    /* 绕着Y轴转 */
    @keyframes rotate1 {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(360deg);
      }
    }
    /* 绕着X轴转 */
    @keyframes rotate2 {
      0% {
        transform: rotateX(0);
      }

      100% {
        transform: rotateX(360deg);
      }
    }
    /* 绕着Z轴转 */
    @keyframes rotate3 {
      0% {
        transform: rotateZ(0);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }
  </style>
  <div class="container">
    <img src="./img/1.png" alt="">
    <img src="./img/2.jpg" alt="">
    <img src="./img/3.jpg" alt="">
  </div>
</body>
</html>

 动画4（点击收缩隐藏）

css动画效果_html_04 


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .box {
      width: 500px;
      height: 500px;
      border: 1px solid red;
      margin: 100px 0 0 100px;
      position: relative;
      overflow: hidden;
    }
    .move {
      width: 30%;
      height: 70%;
      border: 1px solid blue;
      border-radius: 10px;
      position: absolute;
      right: -150px;
      top: 15%;
    }
    #btn {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
    .show {
      animation: rotate1 0.4s linear;
      /* 动画执行一次 */
      animation-iteration-count: 1;
      /* 停留在最后一帧 */
      animation-fill-mode: both;
    }
    .hide {
      animation: rotate2 0.4s linear;
      /* 动画执行一次 */
      animation-iteration-count: 1;
      /* 停留在最后一帧 */
      animation-fill-mode: both;
    }
    /* 向左移动 */
    @keyframes rotate1 {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-150px);
      }
    }
    /* 向右移动 */
    @keyframes rotate2 {
      0% {
        transform: translateX(-150px);
      }

      100% {
        transform: translateX(0);
      }
    }
  </style>
  <div class="box">
    <div class="move"></div>
    <button id="btn"></button>
  </div>
  <script>
    //  DOM.classList -> 返回一个元素的类属性的实时 DOMTokenList 集合。
    //  DOM.classList.add('class1', 'class2', 'class3')  // 添加一个或多个类名
    //  DOM.classList.remove('class1', 'class2', 'class3')  // 删除一个或多个类名
    //  DOM.classList.toggle('class1', 'class2', 'class3')  // 切换类名（有则移除，没有则添加（切换效果））

    let flag = true  // true -> 点击展示， false -> 点击隐藏
    const $ = name => document.querySelector(name)
    $('#btn').innerHTML = '点击展开'
    $('#btn').onclick = () => {
      if (flag) {
        $('.move').classList.remove('hide');
        $('.move').classList.add('show');
        setTimeout(() => {
          $('#btn').innerHTML = '点击收起'
        }, 400)
      } else {
        $('.move').classList.remove('show');
        $('.move').classList.add('hide');
        setTimeout(() => {
          $('#btn').innerHTML = '点击展开'
        }, 400)
      }
      flag = !flag
    }
  </script>
</body>
</html>


冲浪者科技专注品牌网站建设，高端网站定制， 网站制作， 定制网站开发，网站改版升级，外贸网站建设，政府网站建设， 网站ipv6升级改造，网站SEO优化推广，小程序制作开发，400电话，企业邮箱，SSL证书安装等为一体的互联网整合营销一站式服务商。 咨询服务热线：173-7784-9589（微信同号）

返回列表 了解更多资讯

—— 微信公众号 ——

互联网整合营销一站式服务商

热门标签 查看更多

相关文章推荐

网站建设方案

猜你会喜欢

上一篇：定制网站开发方案流程

下一篇：为啥要做定制网站，定制网站优势有哪些？

多一份参考，总有益处

联系我们，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

全国统一服务热线：17377849589


在线咨询 提交需求

关于冲浪者科技

+

我们是江西知名网站建设公司，提供高品牌网站建设，电商网站设计开发，集团网站制作，响应式网页设计，微信小程序等服务。我们的目标是将冲浪者科技打造成网站品牌策划、网站品牌形象设计、网络营销传播行业的国际型企业！为客户创造有价值的营销体验，让互联网提升企业的竞争力！

我们的优势

10年建站服务经验

服务18家500强企业

服务89家上市企业

服务行业龙头超过70家

总部位于深圳

多项网站设计传播大奖

南昌品牌网站建设专家

完备的项目流程管理体系

B2C电商网站建设供应商

网页设计与网站开发技术并重


我们的不同

+

作为一家集“创意+整合+营销”的互联网整合营销机构，我们在业内具有深远的设计影响力和良好的客户口碑。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的品牌势能！

友情链接 交换友链，加VX（clzkj1020）
南昌网站建设公司 赣州网站建设公司 萍乡网站建设公司 鹰潭网站建设公司 抚州网站建设公司 吉安网站建设公司 景德镇网站建设公司 九江网站建设公司 上饶网站建设公司 宜春网站建设公司 新余网站建设公司 武汉网站建设公司 长沙网站建设公司 深圳网站建设公司 苏州网站建设公司 常州网站建设公司 安徽网站建设公司 山东网站建设公司 河南网站建设公司 福建网站建设公司 辽宁网站建设公司 河北网站建设公司 广州网站建设公司 东莞网站建设公司

Copyright © 2013- 南昌市冲浪者科技有限公司 All Rights Reserved.

全国统一服务热线：17377849589   赣ICP备2020011247号-2   

公司地址：南昌市青山湖区梦时代27层 深圳总部：罗湖区黄贝街道新兴社区罗芳路122号南方大厦B栋507A

专业团队为您提供南昌网站建设，南昌网站制作，南昌网站设计，南昌品牌网站建设等服务,南昌网络公司，南昌做网站就找冲浪者科技！  网站地图   XML地图   tags

网站首页 在线咨询 业务热线 17377849589 提交需求 微信咨询