今天看到一个有意思的效果，闲来无事做一个：
把 2d 静态的太极图改成了 3d，阴极和阳极分到了两个平面里实现旋转效果，这个好实现，重点是实现它的透明效果，平面太极图显示出两极是用另加的块元素挡住底面的颜色，但如果上图的两极用遮挡来实现效果的话并不能实现透明，将遮挡的块设为透明又会显示出底面原本的样子，所以这个思路不对。那就只能将底面本身变为透明，但怎么实现既透明又能出现这种样子呢？渐变，而且为了能出现圆的样子选择了径向渐变。
效果：
路明确，开始操作
一个极分成四个块，圆头，肚子，尾，还有分离的小圆。
第一块圆，中间透明。
第二块与之相连，为了不遮挡第一块中间的圆所以要改一下
给右上角加圆角属性改为半圆，加上径向渐变，原点改为靠左居中再调一下透明的百分比。
阳极结构代码如下：
<!-- 阳极 --> <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;}
复制代码
最终效果图如下：
完成！
总结：
整体没有难度，难在想到它的透明并且怎样去实现。因为不能用常规的遮挡，只能让自身实现透明效果。顺着这个思路想到径向渐变然后去实现效果。有了思路剩下的就是常规的敲了。
评论