您的位置：首页 > Web前端 > HTML5

【HTML5学习笔记】33：CSS3过渡效果

2017-09-01 23:28 639 查看
利用CSS3提供的过渡效果可以不借助JavaScript实现简单的用户交互功能。

[1]总的transition属性

利用这个属性，结合一些简单的CSS动作(如:hover)来触发平滑过渡功能，也就产生了过渡效果。



复习：前面说的:hover属于伪选择器中的伪类选择器中的动态伪类选择器，动态伪类选择器根据条件的改变选择元素，常用在鼠标点击、悬停等。:hover鼠标悬停，:active按住不放，:focus匹配获得焦点的文本框。

[2]transition-property设置哪些属性要过渡



了解哪些属性可以做过渡?大部分CSS样式都可以。

[3]transition-duration设置过渡时间

如设置为半秒钟：

transition-duration: .5s;


[4]transition-timing-function设置缓动方案



可以用最后一个自己设置贝塞尔曲线。

在这里还可以用steps()设置跳跃式过渡，如跳跃2次：

transition-timing-function: steps(2);


[5]transition-delay设置过渡延迟效果

如延迟一秒：

transition-delay: 1s;


还可以和transition-property的值一一对应：

transition-delay: 1s,0s,1s;


[6]浏览器兼容性前缀问题

到目前为止应当在实战中加上各个浏览器兼容性前缀。

*测试代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS3过渡效果</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="id1">我是HTML</div>
</html>


@charset "utf-8";
body{
margin: 100px;
}

#id1{
width: 200px;
height: 200px;
border: 1 solid green;
/*设置哪些属性要过渡*/
transition-property: background-color,color,margin-left;
/*设置过渡时间*/
transition-duration: 3s;
/*设置缓动方案*/
transition-timing-function: ease-in;
/*设置过渡延迟效果*/
transition-delay: 1s;
}

#id1:hover{
background-color: black;
color: white;
margin-left: 100px;
}


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航