css3动画与过渡效果结合出现的树叶飘落效果

* {padding: 0;margin: 0;}ul, ol {list-style: none;}a {text-decoration: none;color: #000;}section {height: 600px;border-bottom: 1px solid #000;position: relative;}.big {/*利用定位调整树叶位置*/position: absolute;width: 240px;height: 152px;background: url(images/page.png);left: 400px;bottom: 150px;}.small {position: absolute;width: 89px;height: 63px;background: url(images/page.png) 0 -152px;left: 250px;top: 50px;/*调用动画*/-webkit-animation: leaf 10s linear 0s infinite;}/*定义动画*/@-webkit-keyframes leaf {0% {/*在天上准备掉落*/opacity: 0;/*移动 旋转  每一个状态样式属性必须一一对应*//*一个元素可以有多个变形 用空格隔开*/transform: rotate(0deg) translate(0,0);}30% {/*掉落在空中*/opacity: 1;transform: rotate(5deg) translate(200px,180px);}60% {/*掉落在地下*/opacity: 0;transform: rotate(10deg) translate(400px,360px);}100% {/*利用60-100对应的时间模拟等待*/opacity: 0;transform: rotate(10deg) translate(400px,360px);}}</style>
</head>
<body><section><div class="big"></div><div class="small"></div></section>

css3动画与过渡效果结合出现的树叶飘落效果相关推荐

一起领略css3动画的强大
CSS3的确出了不少高大上的功能,3D效果/动画/多列等等;今天写篇文章记录怎么一下怎么用CSS3写一个动画;不过还是要提醒大家:IE9及以下版本不支持CSS3动画(需要可以考虑用js,不过估计效果不 ...
CSS3动画（2D，3D，自定义动画）
文章目录 css3过渡动画 1 css3动画之2D 1.1 transition过渡动画基础 1.1.1 实现缓入缓出或快入快出效果 1.1.2 实现一秒内变换宽度 1.1.3 实现一秒后变换宽度 1 ...
ie css动画,ie不支持css3动画吗
IE9及以下版本不支持css3动画:CSS3动画对低版本的浏览器的支持效果并不是很好,特别是IE9及以下版本,更是无法支持:而css3动画就是指使元素从一种样式逐渐变化为另一种样式的效果. 本教程操作 ...
css3 变换、过渡效果、动画
1 CSS3 选择器 1.1 基本选择器 1.2 层级空格 > + .item+li ~ .item~p 1.3 属性选择器 [attr] [attr=value] [attr^=value] ...
纯css3树叶飘落动画js特效
下载地址使用css3代码画的树叶,并且有树叶飘落的动画效果. dd:
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
一个栗子上手CSS3动画
最近杂七杂八的事情很多,很多知识都没来得及总结,是时候总结总结,开启新的篇章- 本篇文章不一一列举CSS3动画的属性,若需要了解API,可前往 MDN 在开始栗子前,我们先补补基础知识. css3动画 ...
CSS3动画(典型模板)
CSS3动画原理: 就是通过鼠标的单击.获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. 步骤: 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 第一,在默认样式 ...
CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局文字发光 & 图 ...

css3动画与过渡效果结合出现的树叶飘落效果

css3动画与过渡效果结合出现的树叶飘落效果相关推荐

最新文章

热门文章