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

来源：互联网发布：linux 删除tomcat日志编辑：程序博客网时间：2024/06/05 19:10

利用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;}

这里写图片描述

阅读全文

0 0