用 CSS3 做一个流星雨动画
昨天 UI 提交过来一个登录页的设计稿，要求背景有一个流星雨动画，做完之后觉得挺有趣，分享一下~ 一、流星动画 首先创建一个 div 作为画布 为了防止浏览器分辨率太大而影响视觉效果，给画布加了 max-width 和 margin:auto ...
相关推荐
html、css、javascript 实现红包雨
先看看效果吧！ HTML代码： CSS代码： JavaScript代码： *:ஐ٩(๑´ᵕ`)۶ஐ:* 学习使我进步 欢迎留言讨论哦！ ...
8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说，之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法，然而随着CSS3标准的不断成熟，我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效。本文主要是分享了8个纯CSS3制作的动画应用，提供源代码下载。 1、纯CSS3实现发光开关切换按钮 ...
css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点： 1、设置图片为圆形居中，使图片一直不停旋转。 2、文字标题（潘玮柏--反转地球）一直从左到右不停循环移动。 3、点击图标，音乐暂停，图片停止旋转；点击图片，音乐播放，图片开始旋转。 1、动设置图片为圆形居中，使图片一直不停旋转 ...
7款纯CSS3实现的炫酷动画应用
1、纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画，初始化的时候人物的各个部位是利用CSS3动画效果拼接而成，接下来就是人物听音乐的场景，一边听音乐一边摇着脑袋，十分陶醉的样子，周围还会出现跳动的音符动画。 在线演示 源码下载 2、CSS3 ...
贝塞尔曲线与CSS3动画、SVG和canvas的应用
简介 贝塞尔曲线是可以做出很多复杂的效果来的，比如弹跳球的复杂动画效果，首先加速下降，停止，然后弹起时逐渐减速的效果。 使用贝塞尔曲线常用的两个网址如下： 缓动函数：http://www.xuanfengge.com/easeing/easeing/ cubic-bezier：http ...
CSS3动画事件
CSS3 的动画效果强大，在移动端使用广泛，动画执行开始和结束都可以使用JS来监听其事件。 animationstart animationend 以下是一个示例 <!DOCTYPE html> <html> <head> ...
CSS3动画箭头
<style type="text/css"> .arrow { display: block; width: 20px; height: 20px; position: absolute; bottom: 25px; left ...