CSS3

直接上代码
-- 渐变
.test {
backgroun-image: -webkit-linear-gradient(0deg, red 100px, blue 200px; yellow 300px);
width: 400px;
height: 400px;
}

<div class = "test" ></div>

-webkit-这是浏览器前缀

-- 扭曲

div{
width: 35px;
height: 70px;
background-color: #e6d8bb;
position: relative;
left: 589px;
top:50px;
-webkit-transform: skewy(30deg);
box-shadow: 0 0 1px 1px #999;
}

-- 过渡

.wei:hover{
left: 240px;
-webkit-transition: background-color:red .3s linear;
}

-- 动画

.moon{
width:20px;
height: 40px;
background: #ffe93e;
border-radius:0 20px 20px 0;
box-shadow: 2px 2px 20px 10px #ffffa8;
-webkit-transform:rotate(45deg);
position: absolute;
right: 0;
top: 50%;
-webkit-animation: moonn 10s linear 0 infinite;
}
@-webkit-keyframes sunn{
0%{left: 0; top: 50%; background: #ffbebe;}
5%{left: 10%; top: 40%;}
10%{left: 20%; top: 30%;}
15%{left: 30%; top: 20%;}
20%{left: 40%; top: 10%;}
25%{left: 50%; top: 0;background: #f00;}
30%{left: 60%; top: 10%;}
35%{left: 70%; top: 20%;}
40%{left: 80%; top: 30%;}
45%{left: 90%; top: 40%;}
50%{left: 100%; top: 50%;background: #ffbebe;}
55%{left: 90%; top: 60%;}
60%{left: 80%; top: 70%;}
65%{left: 70%; top: 80%;}
70%{left: 60%; top: 90%;}
75%{left: 50%; top: 100%;}
80%{left: 40%; top: 90%;}
85%{left: 30%; top: 80%;}
90%{left: 20%; top: 70%;}
95%{left: 10%; top: 60%;}
100%{left: 0; top: 50%;}

}

转载于:https://my.oschina.net/u/1985334/blog/300134