温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何使用纯css实现太极阴阳鱼动画

发布时间:2022-03-01 09:36:59 来源:亿速云 阅读:142 作者:小新 栏目:web开发

小编给大家分享一下如何使用纯css实现太极阴阳鱼动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  开始操作

  一个极分成四个块,圆头,肚子,尾,还有分离的小圆。

  第一块圆,中间透明。

  第二块与之相连,为了不遮挡第一块中间的圆所以要改一下

  给右上角加圆角属性改为半圆,加上径向渐变,原点改为靠左居中再调一下透明的百分比。

  阳极结构代码如下:

  <!-- 阳极 -->

  <main>

  <section></section>

  <section></section>

  <section></section>

  <section></section>

  </main>

  阳极css代码如下:

  main{

  width:500px;

  height:500px;

  position:absolute;

  top:100px;

  left:500px;

  transform:rotateX(-20deg);

  }

  main section:nth-of-type(1){

  width:250px;

  height:250px;

  position:absolute;

  bottom:0;

  right:0;

  border-bottom-right-radius:500px;

  background:radial-gradient(circle at 0% 50%,transparent 44.6%,#284070 0%);

  }

  main section:nth-of-type(2){

  width:250px;

  height:250px;

  position:absolute;

  top:0;

  right:0;

  border-top-right-radius:500px;

  background:radial-gradient(circle at 0% 50%,transparent 44.6%,#284070 0%);

  }

  main section:nth-of-type(3){

  width:250px;

  height:250px;

  position:absolute;

  top:0;

  left:125px;

  border-radius:50%;

  background:radial-gradient(circle at center,transparent 62.5px,#284070 0%);

  }

  main section:nth-of-type(4){

  width:125px;

  height:125px;

  background:#284070;

  position:absolute;

  bottom:62.5px;

  left:187.5px;

  border-radius:50%;

  }

  阳极效果图如下:

  阴极结构代码如下:

  <!-- 阴极 -->

  <article>

  <aside></aside>

  <aside></aside>

  <aside></aside>

  <aside></aside>

  </article>

  阴极css代码如下:

  article{

  width:500px;

  height:500px;

  position:absolute;

  top:100px;

  left:500px;

  transform:rotateX(-20deg);

  }

  article aside:nth-of-type(1){

  width:250px;

  height:250px;

  position:absolute;

  bottom:0;

  left:0;

  border-bottom-left-radius:500px;

  background:radial-gradient(circle at 100% 50%,transparent 44.6%,#889090 0%);

  }

  article aside:nth-of-type(2){

  width:250px;

  height:250px;

  position:absolute;

  top:0;

  left:0;

  border-top-left-radius:500px;

  background:radial-gradient(circle at 100% 50%,transparent 44.6%,#889090 0%);

  }

  article aside:nth-of-type(3){

  width:250px;

  height:250px;

  position:absolute;

  bottom:0;

  left:125px;

  border-radius:50%;

  background:radial-gradient(circle at center,transparent 62.5px,#889090 0%);

  }

  article aside:nth-of-type(4){

  width:125px;

  height:125px;

  background:#889090;

  position:absolute;

  top:62.5px;

  left:187.5px;

  border-radius:50%;

  }

  阴极效果图如下:

  阳极加阴极效果图:

  将2d平面转换为3d代码如下:

  body{  transform-style:preserve-3d;  background:#000;  perspective:1800px; }

  将2d平面转换为3d效果如下:

  创建动画关键帧及添加animation属性代码:

  阳极动画关键帧:

  @keyframes mv1{

  0%{

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

  }

  50%{

  transform:rotateX(45deg) rotateY(30deg) rotateZ(-180deg);

  }

  100%{

  transform:rotateX(45deg) rotateY(30deg) rotateZ(-360deg);

  }

  }

  给阳极添加animation属性代码:

  main{

  transform:rotateX(45deg) rotateY(30deg);

  animation:mv1 2.5s linear infinite;

  }

  阴极动画关键帧:

  @keyframes mv2{

  0%{

  transform:rotateX(45deg) rotateY(-30deg) rotateZ(0deg);

  }

  50%{

  transform:rotateX(45deg) rotateY(-30deg) rotateZ(-180deg);

  }

  100%{

  transform:rotateX(45deg) rotateY(-30deg) rotateZ(-360deg);

  }

  }

  给阴极添加animation属性代码:

  article{

  transform:rotateX(45deg) rotateY(-30deg);

  animation:mv2 2.5s linear infinite;

  }

以上是“如何使用纯css实现太极阴阳鱼动画”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI