香蕉久久网加勒比|中文字幕 日韩在线 制服|日韩Av免费播放|免费av在线一区|97超碰视屏免费|国产一区二区三区四区在线观看欧美|狠狠久久中文字幕|亚洲射区中文字幕|www.后入.com|亚洲新一级片

資訊

精準傳達 ? 有效溝通

從品牌網(wǎng)站建設到網(wǎng)絡營銷策劃，從策略到執(zhí)行的一站式服務

css動畫效果

作者：沖浪者科技 | 2023-03-01 | 熱度：850 | 欄目：建站文庫 | 收錄：

動畫1（沿著橢圓轉(zhuǎn)動）

css動畫效果_2d

 其實是個2D轉(zhuǎn)動，只不過咱們設置橢圓，然后加上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%;
    }

    /* 以下是轉(zhuǎn)動的動畫 */
    .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/步數(shù).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去設置的總時間(也就是轉(zhuǎn)一圈用的時間)， 這里設置 22秒

2. X軸和Y軸用的時間是一樣的，都為總時間的一半，也就是11秒

3. 相差的時間是 總時間/圖片的個數(shù)  這里也就是 22/11 = 2秒

4.  X軸和Y軸的延時時間相差 11/2 = 5.5秒


可以把代碼拷貝過去，修改一下試試就可以啦 

動畫2 （旋轉(zhuǎn)木馬特效）

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軸自轉(zhuǎn)）

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軸轉(zhuǎn) */
    @keyframes rotate1 {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(360deg);
      }
    }
    /* 繞著X軸轉(zhuǎn) */
    @keyframes rotate2 {
      0% {
        transform: rotateX(0);
      }

      100% {
        transform: rotateX(360deg);
      }
    }
    /* 繞著Z軸轉(zhuǎn) */
    @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;
      /* 動畫執(zhí)行一次 */
      animation-iteration-count: 1;
      /* 停留在最后一幀 */
      animation-fill-mode: both;
    }
    .hide {
      animation: rotate2 0.4s linear;
      /* 動畫執(zhí)行一次 */
      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>


沖浪者科技專注品牌網(wǎng)站建設，高端網(wǎng)站定制， 網(wǎng)站制作， 定制網(wǎng)站開發(fā)，網(wǎng)站改版升級，外貿(mào)網(wǎng)站建設，政府網(wǎng)站建設， 網(wǎng)站ipv6升級改造，網(wǎng)站SEO優(yōu)化推廣，小程序制作開發(fā)，400電話，企業(yè)郵箱，SSL證書安裝等為一體的互聯(lián)網(wǎng)整合營銷一站式服務商。 咨詢服務熱線：173-7784-9589（微信同號）

—— 微信公眾號 ——

互聯(lián)網(wǎng)整合營銷一站式服務商

相關文章推薦

多一份參考，總有益處

聯(lián)系我們，免費獲得專屬《策劃方案》及報價

咨詢相關問題或預約面談，可以通過以下方式與我們聯(lián)系

全國統(tǒng)一服務熱線：17377849589


關于沖浪者科技

+

我們是江西知名網(wǎng)站建設公司，提供高品牌網(wǎng)站建設，電商網(wǎng)站設計開發(fā)，集團網(wǎng)站制作，響應式網(wǎng)頁設計，微信小程序等服務。我們的目標是將沖浪者科技打造成網(wǎng)站品牌策劃、網(wǎng)站品牌形象設計、網(wǎng)絡營銷傳播行業(yè)的國際型企業(yè)！為客戶創(chuàng)造有價值的營銷體驗，讓互聯(lián)網(wǎng)提升企業(yè)的競爭力！

我們的優(yōu)勢

10年建站服務經(jīng)驗

服務18家500強企業(yè)

服務89家上市企業(yè)

服務行業(yè)龍頭超過70家

總部位于深圳

多項網(wǎng)站設計傳播大獎

南昌品牌網(wǎng)站建設專家

完備的項目流程管理體系

B2C電商網(wǎng)站建設供應商

網(wǎng)頁設計與網(wǎng)站開發(fā)技術并重


我們的不同

+

作為一家集“創(chuàng)意+整合+營銷”的互聯(lián)網(wǎng)整合營銷機構(gòu)，我們在業(yè)內(nèi)具有深遠的設計影響力和良好的客戶口碑。我們提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設計、創(chuàng)意表現(xiàn)、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站運營反饋建議等一系列服務，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡營銷方法,創(chuàng)造更大的品牌勢能！

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

全國統(tǒng)一服務熱線：17377849589   贛ICP備2020011247號-1   

公司地址：南昌市青山湖區(qū)夢時代27層 深圳總部：羅湖區(qū)黃貝街道新興社區(qū)羅芳路122號南方大廈B棟507A

專業(yè)團隊為您提供南昌網(wǎng)站建設，南昌網(wǎng)站制作，南昌網(wǎng)站設計，南昌品牌網(wǎng)站建設等服務,南昌網(wǎng)絡公司，南昌做網(wǎng)站就找沖浪者科技！  網(wǎng)站地圖   XML地圖   tags