30.transition
来源:互联网 发布:eclipse java项目结构 编辑:程序博客网 时间:2024/06/07 18:27
transition
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 100px; height: 100px; background-color: #ccc; float:left; margin-right:10px; } .box1:hover{ background-color: red; transition: background-color 3s ; } .box2:hover{ background-color: red; transition: background-color 3s ease-in; } .box3:hover{ background-color: yellow; transition: background-color 3s ease-out; } .box4:hover{ background-color: green; transition: background-color 3s linear; } .box5:hover{ background-color: blue; transition: background-color 3s ease-in-out; } </style></head><body> <!-- 平滑过渡 transition- property 改变某个属性 duration 转换过程的持续时间 单位 s/ms -timing-function 变换的速度 ease 逐渐变慢 linear 匀速 ease-in 加速(由慢变快) ease-out 减速(由快变慢) ease-in-out 先加速然后减速再加速 -delay 延迟时间 单位 s/ms --> <div class='box1'></div> <div class='box2'></div> <div class='box3'></div> <div class='box4'></div> <div class='box5'></div></body></html>
阅读全文
0 0
- 30.transition
- transition
- transition
- transition
- transition
- transition
- Transition Docbook
- Transition Function
- Transition effects
- CSS3 Transition
- CSS3 Transition
- Transition Effects
- CSS3 Transition
- android.transition
- CSS3 Transition
- CSS3 Transition
- JBPM-Transition
- 转换Transition
- Activiti 查询流程实例状态
- laravel框架- Trait 'App\Http\Models\SoftDeletes' not found
- 28.兼容模式
- 使用PHP制作一个万年历
- 29.布局
- 30.transition
- 31.transition
- 栈的应用 后缀表达式求值 后缀表达式与中缀表达式的转换
- HTML5表单
- springboot日志体系---log4j2
- srping boot之日志配置logback和log4j2
- C++ inline内联
- 32.transition
- 博客永久迁移至 http://sniffer.site/