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

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

创新互联主要从事成都做网站、成都网站制作、成都外贸网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务伊金霍洛,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

开始操作

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

第一块圆,中间透明。

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

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

阳极结构代码如下:

阳极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%;

}

阳极效果图如下:

阴极结构代码如下:

阴极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实现太极阴阳鱼动画”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前名称:如何使用纯css实现太极阴阳鱼动画
网站URL:http://pwwzsj.com/article/psdihg.html