transitions / animation 动画
漆雕硕
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
background: #ccc; 首先自己本身要有默认的
transition:background 1s linear; 多个可以用,号分开 可以用transform
}
div:hover{
background: red 后面再写改变之后的样子
}
</style>
</head>
<body>
<!-- tansition : property duration timing-function-->
<div>实例文字</div>
</body>
</html>二：animation
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
background: red;
transform:rotate(0deg);
width: 300px;
}
@-webkit-keyframes mycolor {
0%{
background: red;
transform:rotate(0deg);
}
40%{
background: blue;
transform:rotate(40deg);
}
80%{
background: pink;
transform:rotate(-40deg);
}
100%{
background: red;
transform:rotate(0deg);
}
}
/*-webkit-animation-name -webkit-animation-duration -webkit-animation-timing-function*/
div:hover{
-webkit-animation: mycolor 3s linear
}
</style>
</head>
<body>
<div>实力文字</div>
</body>
</html>
类似资料：