CSS动画-过渡
2017-03-06 21:34
197 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div>效果展示</div> </body> </html>
div{ width:100px; height:100px; background-color:darkorchid; /*旋转代码*/ -webkit-transition:width 2s,height 2s,-webkit-transform 2s; transition:width 2s,height 2s,transform 2s; /*延迟*/ transition-delay: 2s; } /*鼠标放上去的效果*/ div:hover{ width:200px; height:200px; transform:rotate(360deg); -webkit-transform:rotate(360deg); }
相关文章推荐
- CSS 动画 过渡
- H5之13__CSS过渡、动画和变换
- vue2.0中css过渡动画总结
- css动画之过渡
- 【CSS】过渡、动画和变换
- 浏览器展示CSS伪类的动画和过渡效果应用
- CSS过渡和动画
- Transit – 超平滑的 CSS 过渡和变换动画效果插件
- CSS过渡、动画、变换,综合实例
- CSS伪类的动画和过渡效果应用
- CSS实现鼠标悬浮内容自动撑开的过渡动画
- CSS过渡动画之transition
- HTML和CSS高级指南整理翻译(08) 一 过渡与动画
- 【CSS】过渡、动画和变换
- CSS平滑过渡动画:transition
- css过渡和动画初学
- CSS基础-29CSS动画-过渡
- CSS伪类的动画和过渡效果应用
- CSS-过渡效果和动画效果
- CSS 小结笔记之变形、过渡与动画