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

小编给大家分享一下如何使用纯css实现太极阴阳鱼动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
　　开始操作
　　一个极分成四个块，圆头，肚子，尾，还有分离的小圆。
　　第一块圆，中间透明。
　　第二块与之相连，为了不遮挡第一块中间的圆所以要改一下
　　给右上角加圆角属性改为半圆，加上径向渐变，原点改为靠左居中再调一下透明的百分比。
　　阳极结构代码如下：
　　
　　

　　
　　阳极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(circ免费云主机、域名le 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实现太极阴阳鱼动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: 如何用纯JavaScript撸一个MVC程序

如何用纯JavaScript撸一个MVC程序，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。我想用 model-view-controller 架构模式在纯 JavaScript 中写一个简单的程序…