标签:css3

纯CSS3制作音乐舞台特效
动效课堂

纯CSS3制作音乐舞台特效

阅读(632) 评论(0) 张阳君

今天给大家带来的是CSS3制作的音乐舞台特效,整个动画仅需一张静态图片即可实现高逼格的效果。这个动画效果实现起来有一点点难度,同时由于CSS的限制,舞台灯光效果没有起作用,看上去没有想象中酷炫。建议大家制作这种灯光效果的动画,尽量使用canvas,CSS3有点力不从心。

纯CSS3仿网易云孤独星球特效
动效课堂

纯CSS3仿网易云孤独星球特效

阅读(703) 评论(0) 张阳君

今天收听网易云音乐时看到孤独星球的特效,于是就顺手搬到这里了。孤独星球特效本身没有什么难点,但如果要加入音轨控制星球运动频率就有点麻烦了,后面我会专门开一篇文章讲解如何使用js去解析mp3的音轨并制作动画特效,这里呢就稍微简单点了,既然是纯CSS3,星球运动频率就设为固定的好了。

动效课堂

纯CSS3实现旋转风车

阅读(669) 评论(0) 张阳君

今天我们依然来做一个比较简单的CSS3动画示例,五彩风车随风旋转的动画,这个动效也是仅使用CSS3完成的。这个动效使用到了一些常见的CSS3动画技巧,再加上传统CSS的三角形制作手法,就完成了风车随风旋转的效果。

动效课堂

纯CSS3实现导航下拉效果

阅读(598) 评论(0) 张阳君

本文作为前端动效课堂的开篇,我们先从一个比较简单的效果入门。相信大家在制作页面时首先要做的就是导航栏的下拉效果。导航栏是一个网站的索引,是seo的灵魂。在css3出来之前,我们会借助JQuery去实现导航下拉特效,在CSS3问世以后,我们可以简单地通过HTML+CSS3实现导航交互效果。