渐变

来源：互联网发布：知乎黑莓客户端编辑：程序博客网时间：2024/05/01 00:41

teacher 16:19:32 (多人发送)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background: #aaa;
/*border: 40px solid;*/
border-width:30px;
/*-webkit-border-image: url(HE.png) 100% round round;*/
/*-webkit-border-image: url(HE.png) 65 0 0 0 round;*/
-webkit-border-image-slice: url(1.png) 30;

}

.div2{
width: 200px;
height: 200px;
background: #aaa;
margin-top: 20px;
/*渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(red))
结束的颜色? (to(blue))*/

background: -webkit-gradient(linear, 0% 10%, 0% 100%, from(yellow), to(blue));
}

.gd{
width: 100px;
height: 100px;
background: #faa;
}
.gd:hover{
/*width: 100px;*/
/*height: 50px;*/
-webkit-animation: 1.5s zzq infinite;
/*（forwards：一次，infinite：循环）*/
/*注意必须要使用-webkit-animation，不能用animation*/
}
@-webkit-keyframes zzq {
from { -webkit-transform: none;
/*-webkit-transform:rotate(10deg);*/}
25% { -webkit-transform:rotate(-30deg);}
/*50% { -webkit-transform:rotate(0deg);}*/
75%{ -webkit-transform:rotate(30deg);}
/*100%{ -webkit-transform:rotate(30deg);}*/
</style>
</head>
<body>


<div class="gd"></div>
</body>
</html>

0 0