css3 太极动画,纯css实现太极阴阳鱼动画
原标题:纯css实现太极阴阳鱼动画
今天看到一个有意思的效果,闲来无事做一个:
把2d静态的太极图改成了3d,阴极和阳极分到了两个平面里实现旋转效果,这个好实现,重点是实现它的透明效果,平面太极图显示出两极是用另加的块元素挡住底面的颜色,但如果上图的两极用遮挡来实现效果的话并不能实现透明,将遮挡的块设为透明又会显示出底面原本的样子,所以这个思路不对。那就只能将底面本身变为透明,但怎么实现既透明又能出现这种样子呢?渐变,而且为了能出现圆的样子选择了径向渐变。
效果:
路明确,开始操作
一个极分成四个块,圆头,肚子,尾,还有分离的小圆。
第一块圆,中间透明。
第二块与之相连,为了不遮挡第一块中间的圆所以要改一下
给右上角加圆角属性改为半圆,加上径向渐变,原点改为靠左居中再调一下透明的百分比。
阳极结构代码如下:
阳极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;
}
最终效果图如下:
完成!
总结:
整体没有难度,难在想到它的透明并且怎样去实现。因为不能用常规的遮挡,只能让自身实现透明效果。顺着这个思路想到径向渐变然后去实现效果。有了思路剩下的就是常规的敲了。返回搜狐,查看更多
责任编辑:
css3 太极动画,纯css实现太极阴阳鱼动画相关推荐
- html5声波效果动画,纯css制作声波扩散动画
在制作音乐播放器时需要哪种在播放音乐时音乐的背景图旋转效果并同时要有那种声波扩散的效果,一开始直接是通过js来进行动画配置及控制,发现这样做要写一推js好烦,就想着用css3动画和过度效果来看看能不能 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效 原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
- html 数据交互动画,纯css实现可交互的动画
如题,不借助JavaScript,只利用CSS,如何实现可交互式的动画呢?或许该需求仅此一种解决方案,绝无仅有.不知该方案是否是第一次找到. 什么是可交互动画? 就是可以响应用户的动画,直接上图吧,更 ...
- css实现人走路效果,纯css实现机器人走路动画
纯css实现机器人走路动画 由于发现了css的这个现象 当一个有元素嵌套的时候,父元素有动画,子元素也有动画,那么子元素的运动会相对父元素的运动而运动 所以我忽然想到,实现人的走路动画并不是不可能的了 ...
- 纯CSS实现3D正方体动画效果
目录 前言 正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化 总结 前言 纯CSS实现3D正方体动画效果,此方法是通过transf ...
- php实现动态按钮效果,纯css实现MaterialDesign水滴动画按钮效果的js实现方法
本篇文章给大家带来的内容是关于纯css实现Material Design水滴动画按钮效果的js实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在上一篇,我们已经实现了用纯cs ...
- 纯CSS下划线出现动画
一.效果 二.代码 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
- 5分钟实现漂亮的CSS加载动画,纯CSS实现加载动画
目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 CSS3 box-shadow 属性 2.4 CSS3 box-sizing 属性 2.5 C ...
- html导航怎么加图标,纯 CSS 实现导航图标动画
毫无艺术细胞的我,一直以来都只会切图而不会做图.正如前几天,我给博客导航菜单加上简单的动画,就显得违和感十足.感叹 2017 的现在,做网站普遍已经不用过多的考虑 IE 系列浏览器,一些简单的动画可以 ...
最新文章
- python 生成随机图片
- LeetCode OJ Basic Calculator II
- (论坛答疑点滴)DataGrid的EditCommandColumn如何使用图片作为按钮?
- Windows Server Containers 支持 Windows 开发者使用 Docker
- 2021-08-08
- django目录介绍
- AbleCloud与物联智慧战略合作,联合服务视频类智能硬件
- 根据眼睛焦点分级绘制3D效果的设想
- 区域增长 matlab,图像分割 区域增长
- [转]How to change Atheros AR9285 MAC addr on Win7(Win7下更改Atheros AR9285 MAC地址)
- JAVA学习笔记之J2SDK主要包介绍 (马士兵 教学视频)
- T-MGCN时间多图卷积网络用于交通流预测
- 【图形图像处理】之栅格化介绍
- php缩图代码是什么,php生成缩略图的类代码
- 串口控制计算机重启,电脑开机无限重启解决方法
- 利用canvas的rotate创建一个简易的风车动画
- 一种MATLAB中解复杂方程(高次、指数、无解析解)的方法,可以在实现论文中公式时使用,solve函数。
- 微信小程序开发中调用button组件添加微信客服功能
- getElementsByTagName用法详解
- Android支付接入(7):Google In-app-Billing
热门文章
- 互联网+5G,开创评标管理新模式
- 计算机校本培训措施,如何高效开展教师计算机、网络技术校本培训.doc
- 计算机学院优秀老师颁奖词,大学优秀教师颁奖词
- 【python实例6.5】一篇文章让你弄懂政府工作报告词云~总结笔记
- 三国志战略版狼盟和鸿蒙,黄沙百战穿金甲,不破狼盟誓不还 (鸿蒙战帖—致敬一起的战友)...
- java解析nmea_Java Marine API – 寻找NMEA数据
- Oracle培训感想
- php财务软件销售管理系统的设计与实现
- 生产订单工艺路线修改
- 负载均衡集群技术LVS