纯css实现太极阴阳鱼动画

不念不忘少年蓝@ 2023-10-06 16:02 9阅读 0赞

![45161b8d94ab0ca0482d2e0d1c5a6aee.gif][]

今天看到一个有意思的效果，闲来无事做一个：

把2d静态的太极图改成了3d，阴极和阳极分到了两个平面里实现旋转效果，这个好实现，重点是实现它的透明效果，平面太极图显示出两极是用另加的块元素挡住底面的颜色，但如果上图的两极用遮挡来实现效果的话并不能实现透明，将遮挡的块设为透明又会显示出底面原本的样子，所以这个思路不对。那就只能将底面本身变为透明，但怎么实现既透明又能出现这种样子呢？渐变，而且为了能出现圆的样子选择了径向渐变。

![8228617f6a32089737c231becf693abc.png][]

效果：

![fd0d8527ccad656a75c63fcf143c21c5.png][]

**路明确，开始操作**

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

第一块圆，中间透明。

![9be057b9ec35df46965b111808dd9dc2.png][]

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

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

**阳极结构代码如下：**

<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%;
    
    }

阳极效果图如下：

![c31db721ad820fc6ecff60973ad6042f.png][]

**阴极结构代码如下：**

<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%;
    
    }

阴极效果图如下：

![17c11efa02fef3a7f38d29dd27b76ed6.png][]

阳极加阴极效果图：

![6e36fdaf344d447a71bf8c7aca0521dd.png][]

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

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

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

![f8cf935f853fef1cbb99da56cfff9109.png][]

**创建动画关键帧及添加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;
    }

**最终效果图如下：**

![e631007cde7bc1f572033fceb1ae2417.png][]

完成！

**总结：**

整体没有难度，难在想到它的透明并且怎样去实现。因为不能用常规的遮挡，只能让自身实现透明效果。顺着这个思路想到径向渐变然后去实现效果。有了思路剩下的就是常规的敲了。

[45161b8d94ab0ca0482d2e0d1c5a6aee.gif]: https://img-blog.csdnimg.cn/img_convert/45161b8d94ab0ca0482d2e0d1c5a6aee.gif
[8228617f6a32089737c231becf693abc.png]: https://img-blog.csdnimg.cn/img_convert/8228617f6a32089737c231becf693abc.png
[fd0d8527ccad656a75c63fcf143c21c5.png]: https://img-blog.csdnimg.cn/img_convert/fd0d8527ccad656a75c63fcf143c21c5.png
[9be057b9ec35df46965b111808dd9dc2.png]: https://img-blog.csdnimg.cn/img_convert/9be057b9ec35df46965b111808dd9dc2.png
[c31db721ad820fc6ecff60973ad6042f.png]: https://img-blog.csdnimg.cn/img_convert/c31db721ad820fc6ecff60973ad6042f.png
[17c11efa02fef3a7f38d29dd27b76ed6.png]: https://img-blog.csdnimg.cn/img_convert/17c11efa02fef3a7f38d29dd27b76ed6.png
[6e36fdaf344d447a71bf8c7aca0521dd.png]: https://img-blog.csdnimg.cn/img_convert/6e36fdaf344d447a71bf8c7aca0521dd.png
[f8cf935f853fef1cbb99da56cfff9109.png]: https://img-blog.csdnimg.cn/img_convert/f8cf935f853fef1cbb99da56cfff9109.png
[e631007cde7bc1f572033fceb1ae2417.png]: https://img-blog.csdnimg.cn/img_convert/e631007cde7bc1f572033fceb1ae2417.png