您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编给大家分享一下如何使用纯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实现太极阴阳鱼动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。