欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript+CSS實現唯美蝴蝶動畫

 更新時間：2022年07月13日 09:05:54   作者：??肥學???  
這篇文章主要介紹了JavaScript+CSS實現唯美蝴蝶動畫,文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下

演示

技術棧

關于svg標簽在svg中關于圖形的復用，是通過標簽defs來解決的。 舉個例子：在圖形中紅色圓圈 ● 還有黃色圓圈 ● 都是復用的元素。結構都是一樣的，只是顏色和位置的差別。 

關于figure： <figure標簽規(guī)定獨立的流內容（圖像、圖表、照片、代碼等等）。

<figure元素的內容應該與主內容相關，同時元素的位置相對于主內容是獨立的。如果被刪除，則不應對文檔流產生影響。

關于perspective-origin： perspective-origin 屬性定義 3D 元素所基于的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置。

定義時的perspective -Origin屬性，它是一個元素的子元素，透視圖，而不是元素本身。

perspective-origin: x-axis y-axis;

x-axis    
定義該視圖在 x 軸上的位置。默認值：50%。

可能的值：

  • left
  • center
  • right
  • length
  • %
  • y-axis    

定義該視圖在 y 軸上的位置。默認值：50%。

可能的值：

  • top
  • center
  • bottom
  • length
  • %

源碼

對部分蝴蝶的設定

<section class="scene3d">
  <div class="cube skybox">
    <var class="scale">
    <figure class="face front"></figure>
    <figure class="face back"></figure>
    <figure class="face right"></figure>
    <figure class="face left"></figure>
    <figure class="face top"></figure>
    <figure class="face bottom"></figure>
    </var>
  </div>
  <div class="butterfly_container">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100" class="icon shape-codepen">
        <use class="left" xlink:href="#shape-butterfly-1" rel="external nofollow"  rel="external nofollow" ></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100" class="icon shape-codepen">
        <use class="left" xlink:href="#shape-butterfly-1" rel="external nofollow"  rel="external nofollow" ></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>

飛動的設置

@-webkit-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-moz-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-ms-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-o-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-webkit-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
@-moz-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
@-ms-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
@-o-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

對蝴蝶形體的設置

.butterfly_container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: rotatingY 10s linear infinite;
  -moz-animation: rotatingY 10s linear infinite;
  -ms-animation: rotatingY 10s linear infinite;
  -o-animation: rotatingY 10s linear infinite;
  animation: rotatingY 10s linear infinite;
}
.butterfly_container var {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.butterfly_container var.rotate3d {
  -webkit-transform: rotate3d(1, 0.5, 0, 70deg);
  -moz-transform: rotate3d(1, 0.5, 0, 70deg);
  -ms-transform: rotate3d(1, 0.5, 0, 70deg);
  -o-transform: rotate3d(1, 0.5, 0, 70deg);
  transform: rotate3d(1, 0.5, 0, 70deg);
}
.butterfly_container var.translate3d {
  -webkit-transform: translate3d(-300px, 0px, 0px);
  -moz-transform: translate3d(-300px, 0px, 0px);
  -ms-transform: translate3d(-300px, 0px, 0px);
  -o-transform: translate3d(-300px, 0px, 0px);
  transform: translate3d(-300px, 0px, 0px);
}
.butterfly_container var.translate3d-1 {
  -webkit-animation: fluttering 10s ease-in-out infinite;
  -moz-animation: fluttering 10s ease-in-out infinite;
  -ms-animation: fluttering 10s ease-in-out infinite;
  -o-animation: fluttering 10s ease-in-out infinite;
  animation: fluttering 10s ease-in-out infinite;
}
.butterfly_container.scale_half var.scale {
  -webkit-transform: scale3d(0.5, 0.5, 0.5);
  -moz-transform: scale3d(0.5, 0.5, 0.5);
  -ms-transform: scale3d(0.5, 0.5, 0.5);
  -o-transform: scale3d(0.5, 0.5, 0.5);
  transform: scale3d(0.5, 0.5, 0.5);
}
.butterfly_container.scale_third var.scale {
  -webkit-transform: scale3d(0.333, 0.333, 0.333);
  -moz-transform: scale3d(0.333, 0.333, 0.333);
  -ms-transform: scale3d(0.333, 0.333, 0.333);
  -o-transform: scale3d(0.333, 0.333, 0.333);
  transform: scale3d(0.333, 0.333, 0.333);
}
.butterfly_container.scale_quarter var.scale {
  -webkit-transform: scale3d(0.25, 0.25, 0.25);
  -moz-transform: scale3d(0.25, 0.25, 0.25);
  -ms-transform: scale3d(0.25, 0.25, 0.25);
  -o-transform: scale3d(0.25, 0.25, 0.25);
  transform: scale3d(0.25, 0.25, 0.25);
}
.butterfly_container figure.butterfly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.butterfly_container figure.butterfly .wing {
  position: absolute;
  width: 50px;
  height: 100px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  -moz-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  -ms-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  -o-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
}

到此這篇關于JavaScript實現唯美蝴蝶動畫的文章就介紹到這了,更多相關JS蝴蝶動畫內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論