WEB前端

css过渡效果transition

位置:首页 > WEB前端 > css教程,2018-08-10 12:11
css过渡css过渡为一种状态到另外一种状态的变换transition 过渡transition 为一个简写属性,是一个transition-property

css过渡

css过渡为一种状态到另外一种状态的变换

transition 过渡

transition 为一个简写属性,是一个transition-property (定义过渡的属性的名称)以及 transition-duration (定义过渡属性的所需动画的时间)和 transition-timing-function (描述中间值如何计算的) 以及 transition-delay (描述过渡效果开始作用之前需要等待的时间)

transition-property

transition-property 定义过渡属性的名称

即指定引用过渡属性的名称

例如要对width属性应用过渡动画,则其该属性的值为width。规定的属性动画值有在这 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties 该列表列出来的属性为可动画的属性。

css过渡(图0)


其css如下

div {

width:300px;

height:400px;

background:#698771;

}

div:hover {

background:#ededed;

transition-property:background;

}

html 如下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="./index.css" type="text/css">

<title>form表单</title>

</head>

<body>

<div></div>

<script src="./index.js"></script>

</body>

</html>

由于没有设置过渡的时间,所以效果不大

transition-duration

transition-duration这是一个过渡时间的设置。

设置过渡的时间为3s

TAGS:css过渡

猜你喜欢

NewHot