css摇曳的_HTML5+CSS3实现树被风吹动摇晃
1
新建html文档。
2
书写hmtl代码。
3
书写css代码。
.trunk, .trunk div { background: #136086; width: 100px; height: 10px; position: absolute; left: 50%; top: 70%; margin-left: -10px; -webkit-animation-name: rot; animation-name: rot; -webkit-animation-duration: 2.02s; animation-duration: 2.02s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-transform-origin: 5px 5px; -ms-transform-origin: 5px 5px; transform-origin: 5px 5px; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
.trunk.trunk, .trunk div.trunk { bottom: 0; left: 50%; -webkit-animation-name: rot-root; animation-name: rot-root; -webkit-animation-duration: 2.5s; animation-duration: 2.5s; }
.trunk > div, .trunk div > div { /*opacity:0.9;*/
top: 0; left: 100px; -webkit-animation-duration: calc(inherit / 2); animation-duration: calc(inherit / 2);/* don't works */
}
.trunk > div:nth-child(2), .trunk div > div:nth-child(2) { /*animation-duration:15s;*/
-webkit-animation-name: rot-inv; animation-name: rot-inv; -webkit-animation-duration: 1.7s; animation-duration: 1.7s; }
4
书写css百分比代码。
@-webkit-keyframes rot { from {
-webkit-transform: rotate(15deg) scale(0.72);
transform: rotate(15deg) scale(0.72);
}
to { -webkit-transform: rotate(45deg) scale(0.72); transform: rotate(45deg) scale(0.72); }
}
@keyframes rot { from {
-webkit-transform: rotate(15deg) scale(0.72);
transform: rotate(15deg) scale(0.72);
}
to { -webkit-transform: rotate(45deg) scale(0.72); transform: rotate(45deg) scale(0.72); }
}
@-webkit-keyframes rot-inv { from {
-webkit-transform: rotate(-45deg) scale(0.72);
transform: rotate(-45deg) scale(0.72);
}
to { -webkit-transform: rotate(-15deg) scale(0.72); transform: rotate(-15deg) scale(0.72); }
}
@keyframes rot-inv { from {
-webkit-transform: rotate(-45deg) scale(0.72);
transform: rotate(-45deg) scale(0.72);
}
to { -webkit-transform: rotate(-15deg) scale(0.72); transform: rotate(-15deg) scale(0.72); }
}
@-webkit-keyframes rot-root { from {
-webkit-transform: rotate(-95deg);
transform: rotate(-95deg);
}
to { -webkit-transform: rotate(-85deg); transform: rotate(-85deg); }
}
@keyframes rot-root { from {
-webkit-transform: rotate(-95deg);
transform: rotate(-95deg);
}
to { -webkit-transform: rotate(-85deg); transform: rotate(-85deg); }
}
5
代码整体结构。
6
查看效果。
END
css摇曳的_HTML5+CSS3实现树被风吹动摇晃相关推荐
- css 波纹扩散_html5 +css3 点击后水波纹扩散效果 兼容移动端
html5+ js +css3 点击后水波纹扩散效果 兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
- [css] 举例说明在css3中怎么实现背景裁剪?
[css] 举例说明在css3中怎么实现背景裁剪? background-clip: border-box(默认,背景延伸至边框外沿,但是在边框的下层) padding-box(背景延伸至paddin ...
- CSS:媒体查询 CSS3 Media Queries
定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
- 【前端开发基础】CSS基础知识以及CSS3
文章目录 一.CSS层叠样式 (一) 目标 1.CSS简介 1.1 HTML的局限性 1.2 CSS网页的美容师 1.3 CSS语法规范 1.4 CSS代码风格 (1)样式格式书写 (2)样式大小写风 ...
- CSS入门八、CSS3动画
零.文章目录 文章地址 个人博客-CSDN地址:https://blog.csdn.net/liyou123456789 个人博客-GiteePages:https://bluecusliyou.gi ...
- CSS3 垂直树状图——运用 :before 和 :after
CSS3 垂直树状图--运用 :before 和 :after 直接上图(原网址),还有步骤想详解视频.自己CSS3练习demo. [demo] [HTML] <div class=" ...
- CSS入门七、CSS3新特性
零.文章目录 CSS入门七.CSS3新特性 1.CSS3 的现状 新增的CSS3特性有兼容性问题,ie9+才支持 移动端支持优于 PC 端 不断改进中 应用相对广泛 2.CSS3 新增选择器 CSS3 ...
- Unity3D 地形的添加 和树、风、雾的基本知识
如何创建地形: 在Hierarchy视图中右键点击3D Object->选择Terrain Terrain组件介绍 1.绘制山的高度,无高度限制 2.绘制山的高度,但是限制山的高度 3.平滑山的 ...
- html+css+javascript实现520告白爱情树(含音乐)程序员表白必备
❉ html+css+javascript实现浪漫爱情树 (含音乐)程序员表白必备 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 引用了CSS3的动画效果 ...
最新文章
- appium+python自动化测试教程_Python+Appium实现自动化测试
- js简单手动(自动)切换
- 推荐系统的构建:从经典到深度学习方法
- python测试框架nose研究_详解Python nose单元测试框架的安装与使用
- linux的system () 函数详解
- Spring 系列之(1)Spring-framework 调试环境搭建
- virtualenv之python虚拟环境
- python迷你停车场管理系统_python实现停车管理系统
- oracle共享内存段手工清理
- Redis分布式锁为什么要设置超时时间
- 《2020年度中国数据竞赛年鉴》发布!
- 12.4 正项数项级数收敛的充要条件及比较判别法
- python如何用一行代码生成[1,4,9,16,25,36,49,64,81,100]
- 如何使用计算机上合并计算方法,excel如何使用合并计算
- 2018-2019第一学期Java助教心得
- springboot(十六) 2.0变化
- 删除商品时,如何不影响订单里该商品相关的信息显示
- vim自定义设置-配置文件
- 移动端长按文本选择复制
- 偷听李开复“内心的声音”
热门文章
- [边分治+线段树合并]「CTSC2018」暴力写挂
- EcmaScript对象克隆之谜
- 一篇讲Java指令重排和内存可见性的好文
- 矩阵快速幂 POJ 3070 Fibonacci
- C++之STL理论基础
- MySQL水平分区代理Spock Proxy(一)
- 好程序员前端分享使用JS开发简单的音乐播放器
- 前端又要失失失失失失失失失业了!
- NVIDIA助力SiemensPLMSoftware“工业4.0创新实验室”,携手推进中国制造创新之路
- python爬虫从入门到放弃(六)之 BeautifulSoup库的使用