纯css实现太极阴阳鱼动画

最新推荐文章于 2023-03-11 16:55:33 发布
最新推荐文章于 2023-03-11 16:55:33 发布
阅读量490 收藏
点赞数
分类专栏： web 文章标签： css css3 前端 大前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42686892/article/details/112528096
版权

纯css实现太极阴阳鱼动画

 

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

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

纯css实现太极阴阳鱼动画

 

效果：

纯css实现太极阴阳鱼动画

 

思路明确，开始操作

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

第一块圆，中间透明。

纯css实现太极阴阳鱼动画

 

第二块与之相连，为了不遮

最低0.47元/天 解锁文章
酔清风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css3绘制常见的30种形状（心形,五角星,六边形,钻石,对话框,阴阳鱼图等）
boy火巨的博客
03-12 3229
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等 新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子 长方形 #Rectangle{ width: 200px; height: 50px; ...
CSS--动画（太极案例）
苛性钠的博客
10-19 165
过渡动画 transition: all n1s n2s steps(n3); 参数1 : 参与过渡动画的属性 all 表示所有的属性都参与过渡动画 参数2 : 过渡动画的持续时间 参数3 : 动画延迟的时间 参数4 : 动画的运动曲线 默认是缓动 linear 匀速(线性变化) steps() 分步 ！通过和伪类选择器的配合简单使用动画 动画剧本 @keyframes 动画名{ 动画过程 } 1.form{动画开始状态}…to{动画结束状态} 2.百分比动画 ！百分比代表动画时长的百分
用HTML和CSS3做个鱼,CSS3实现阴阳鱼
weixin_42136837的博客
06-18 538
直接上代码：阴阳鱼body { background: #F0DFAD; }.yin-yang { position: fixed; top: 50%; left: 50%; margin: -5rem 0 0 -5rem; height: 10rem; width: 10rem; border-radius: 50%; background: -webkit-linear-gradient(to...
CSS动画：太极
qq_44645934的博客
04-16 175
CSS动画：太极 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>太极</title> <link rel="stylesheet" type="text/css" href="css/TaiChi.css"/> &...
纯css太极动画(源码)
x_xiNan9416的博客
09-26 305
<html> <head> <title>过渡</title> <meta charset="utf-8"/> <style type="text/css"> body{ margin:0; background-color:#ddd; } .taiji{ display:flex; align-items:center; height:400px; wi
纯CSS3实现阴阳太极动画
11-24
综上所述，实现纯CSS3的阴阳太极动画，需要巧妙地运用关键帧动画、`transform`、`radial-gradient`以及其他的CSS3特性。这样的动画不仅可以提升网站的视觉吸引力，也展示了CSS3的强大功能和无限可能。通过不断实践和...
纯CSS3实现汽车行驶动画.rar_纯CSS3实现汽车行驶动画
09-23
【纯CSS3实现汽车行驶动画】是一个利用CSS3的强大功能来创建动态效果的实例，它展示了CSS3在图形渲染和动画制作方面的卓越能力。在这个项目中，开发者并未借助JavaScript或其他编程语言，完全依赖CSS3来绘制汽车模型...
纯CSS3实现汽车行驶动画特效代码
03-20
【纯CSS3实现汽车行驶动画特效代码】是一个利用CSS3的强大功能来创建动态效果的实例。在现代网页设计中，CSS3已经成为了不可或缺的一部分，它提供了丰富的样式控制和动画效果，使得无需JavaScript或其他编程语言就能...
纯CSS实现语音动画.docx
05-11
这个案例中，我们讨论的是如何使用纯CSS技术来实现一个语音动画，这种动画通常表现为波浪形，模拟声音的波动，给人一种视觉上的声音流动感。以下是对这个语音波浪动画的详细解析： 首先，HTML部分非常简单，只有一...
利用CSS构造太极动画图网页
weixin_45723705的博客
03-24 334
利用CSS构造太极动画图网页 废话少说，直接上代码，然后再详细介绍构造过程。 代码 <!DOCTYPE html> <html> <head> <title>太极动画</title> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } body { background-color: #ccc; } .taiji { w
简陋中带点动画的太极图.html
03-08
通过html5与css配合，做了一个简单的太极图，再做个动画旋转。给太极图做个背景，再做一个背景放大缩小的动画效果。最后实现一个旋转和放大缩小的太极图，都是html5和css最基础的应用实践。-逆战班
太极阴阳鱼
11-07
如何画出太极图案，给出简单代码，希望大家能有帮助。
画太极图的C++代码实现
05-09
绘制太极图的原理简单来说就是画两个半圆一黑一白 拼成一个正圆 再在大圆的左侧和右侧画两个恰好相切的黑圆和白圆作为突出端 最后分别在这两个突出端里面画两个一黑一白的小洞 MFC里利用void CDrawView::OnDraw CDC pDC 这个函数进行绘图 和课堂上绘制正弦曲线相比 如果用一笔一笔循环的方式画圆将会很复杂 因此我就参考网上的 用Pie函数和Ellipse函数画弧和圆 画图用了CBrush画刷和CPen画笔 ">绘制太极图的原理简单来说就是画两个半圆一黑一白 拼成一个正圆 再在大圆的左侧和右侧画两个恰好相切的黑圆和白圆作为突出端 最后分别在这两个突出端里面画两个一黑一白的小洞 MFC里利用void CDrawView::OnDraw CDC pDC 这 [更多]
circle代码
10-31
编写一个圆类Circle 该类拥有： ①一个成员变量 Radius（私有 浮点型）； 存放圆的半径； ②两个构造方法 Circle 将半径设为0 Circle double r 创建Circle对象时将半径初始化为r ③ 三个成员方法 double getArea 获取圆的面积 double getPerimeter 获取圆的周长 void show 将圆的半径 周长 面积输出到屏幕">编写一个圆类Circle 该类拥有： ①一个成员变量 Radius（私有 浮点型）； 存放圆的半径； ②两个构造方法 Circle 将半径设为0 Circle double r 创建Circle对象时将半径初始化为r ③ [更多]
纯CSS 阴阳鱼
acw39194的博客
05-15 225
//动画生效后，其效果不可该变，只有换其动画名鼠标移入前顺时针旋转 鼠标移入后动画效果改变（逆时针旋转）： HTML代码 <!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link ...
CSS3实现阴阳鱼
Travelling1006的专栏
09-29 170
直接上代码： <!doctype html> <html> <head> <meta charset="utf-8" /> <title>阴阳鱼</title> <style> body { background: #F0DFAD; } ...
CSS动画实战：创建一个太极Loading图
王乐平 技术博客
08-01 4880
这里主要是使用CSS的animation和伪类来构建，分析设定关键帧的执行顺序和时间断。效果动画分析首先通过效果对动画执行进行一下分析： 边框的四条边进行按顺序动画加载 。 矩形边框变为圆行边框。 太极图内部图案渐渐出现。 太极图旋转。 整个动画逆序执行。 针对上面的1效果是需要思考一下的，其他都比较容易实现。5效果只需设置属性animation-direction: alternate即可，整体动
CSS强大的功能--太极图的实现
最新发布
yangguang3004的博客
03-11 703
text-shadow阴影，font-face属性，border-radius属性，border-image属性， box-shadow属性以及更炫的支持动画，放大，旋转，以及媒体查询等等功能。对于CSS的认识如果你还只停留在网页的一些元素的美化，版面样式的调整那你就是大错特错了,现在的CSS3所具备的特性真的是让人惊艳。是不是 很神奇，老实讲小编在一开始也是兴奋的一晚上都睡不着，css的强大之处真是妙不可言，当然，如果还想再加点效果的话，我们可以再加上以下代码，让它可以真正的滚动起来。
用canvas画阴阳鱼
渔父歌的博客
11-18 1237
canvas画动态图像
纯CSS实现赛车Loader动画效果
为了实现动态效果，CSS动画或者关键帧(`@keyframes`)将会被应用到车轮元素上，通过改变`transform`中的`rotate`值，让车轮产生旋转的视觉效果。 总结来说，这个纯CSS赛车Loader动画是通过精心设计的CSS选择器和属性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

酔清风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值