首页 > 代码库 > CSS3 过渡 transition基础demo
CSS3 过渡 transition基础demo
过度代码
<!DOCTYPE html><html lang="en"><head> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <meta charset="UTF-8"> <meta name="Author" content="haley"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>CSS3 过渡 transition</title> <style> div.ra { width:100px; height:100px; background:#00AEEF; transition:all 2s; -moz-transition:all 2s; /* Firefox 4 */ -webkit-transition: all 2s; /* Safari and Chrome */ -o-transition: all 2s;/* Opera */ } div.ra:hover { height: 200px; -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); width:300px; background:#0000ff; color:#fff; } table{ border-collapse: collapse;border-spacing: 0; } table td,table th{ border: 1px solid #333; text-align: center; vertical-align:middle; height: 30px; line-height: 30px;; } </style></head><body><div class="ra">div里面的内容</div><div> <ul> <li>transition的属性可以是尺寸、颜色、动画</li> <li>时间曲线transition-timing-function： <table> <thead> <tr><th>值</th><th>描述</th></tr> </thead> <tbody> <tr><td>linear</td><td>规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。</td></tr> <tr><td>ease</td><td>规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。</td></tr> <tr><td>ease-in</td><td>规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。</td></tr> <tr><td>ease-out</td><td>规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。</td></tr> <tr><td>ease-in-out</td><td>规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。</td></tr> <tr><td>cubic-bezier(n,n,n,n)</td><td>在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td></tr> </tbody> </table> </li> <li><a href=http://www.mamicode.com/"http://www.runoob.com/cssref/css3-pr-transition-timing-function.html">更多资料</a></li> </ul></div></body></html>
CSS3 过渡 transition基础demo
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。