纯前端CSS实现动态太极阴阳鱼效果

今天小千来给大家分享一期纯CSS实现太极动态效果的教程，最终的效果如下图所示，完全没用到JavaScript哦，看下去。

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

效果：

思路明确，开始操作

一个极分成四个块，圆头，肚子，尾，还有分离的小圆。第一块圆，中间透明。

第二块与之相连，为了不遮挡第一块中间的圆所以要改一下，给右上角加圆角属性改为半圆，加上径向渐变，原点改为靠左居中再调一下透明的百分比。

阳极结构代码如下：

阳极css代码如下：

阳极效果图如下：

阴极结构代码如下：

阴极css代码如下：

阴极效果图如下：

阳极加阴极效果图：

将2d平面转换为3d代码如下：

将2d平面转换为3d效果如下：

创建动画关键帧及添加animation属性代码：

阳极动画关键帧：

给阳极添加animation属性代码：

阴极动画关键帧：

给阴极添加animation属性代码：

上述操作完成之后就能够看到文章开头的动态效果了，同学们赶紧去试试吧，仅仅是看明白了是不够的哦。很多同学都是脑子说我会了，然后你的手说我才没会~~

本文来自千锋教育，转载请注明出处。

纯前端CSS实现动态太极阴阳鱼效果相关推荐

html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
php动态字体,利用纯CSS实现动态的文字效果实例
相信大家都曾在网站中看到过中效果,一打开页面,无论是文字还是图片,都随着规定时间的而变化,今天我们将介绍如何通过用纯CSS来实现这种效果,下面一起来看看. 大家可能经常会看到酷炫的网站在这类网站中能 ...
纯html+css炫酷地球仪动画效果
纯html+css炫酷地球仪动画效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
纯前端实现 App Store 卡片展开效果
↓推荐关注↓ 今集我们会模仿 App Store 这个卡片展开效果: 本来想只用 HTML 和 CSS 去制作,但最后都要运用到 JavaScript,那我们立即开始吧. HTML 的部分打开 Co ...
css 霓虹灯转动效果,使用SVG + CSS实现动态霓虹灯文字效果
早上无意间进入一个网站,看到他们的LOGO效果略屌,如图: 刚开始以为是gif动画之类的,审查元素发现居然是用SVG + CSS3动画实现的,顿时激起了我的(hao)欲(qi)望(xin),决定要一探 ...
纯HTML+CSS实战之制作相框效果
效果如图所示主要运用了盒子阴影,图片阴影,边框属性三个要点代码如下: <!DOCTYPE html> <html lang="en"> <head ...
用html实现模糊效果,纯html css实现动态高斯模糊效果（第二弹），实现导航条动态模糊内容...
还是先看效果图: 静态效果图.png GIF.gif 页面布局: 顶部高斯模糊导航条页面主体导航条动态高斯模糊实现原理第一步,将页面主体内容clone到navbar中,然后使用css3 -web ...
HTML文字样式显示闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
CSS transition巧妙运用实现动态列表的效果
CSS实现动态列表的效果效果展示要求思路分析猜想猜想出错解决办法代码 HTML代码 CSS代码效果展示要求现要求使用CSS实现如下的页面效果: 列表初始状态仅显示第一个条目内容: ...

纯前端CSS实现动态太极阴阳鱼效果

纯前端CSS实现动态太极阴阳鱼效果相关推荐

最新文章

热门文章