<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式</title>
<style>
#jianbian1{
height:300px;
background-image: linear-gradient(to bottom , red ,black);
margin-bottom: 10px;
margin-bottom: 10px;
}
#jianbian2{
height:300px;
background-image: linear-gradient(to right , red ,black);
margin-bottom: 10px;
position: sticky;
top:0px
}
#jianbian3{
height:300px;
background-image: linear-gradient(to bottom right, red ,black);
margin-bottom: 10px;
}
#jianbian4{
height:300px;
background-image: linear-gradient(to top right, red ,black);
margin-bottom: 10px;
position: sticky;
top:300px;
}
.guodu{
height:100px;
width: 300px;
background-image: linear-gradient(to top right, red ,black);
transition: 3s linear;
margin-bottom: 10px;
position: sticky;
top: 600px;
}
/* hover ,过渡实现的效果，hover */
.guodu:hover{
width: 500px;
transform: rotate(3deg);
transform: translate(30px);
/* transform: skew(30deg,30deg);当扭曲时，掩盖了上面的效果 */
/* transform: scale(2,2); 放大2倍，过度时，掩盖了上面的效果 */
}
.donghua{
width:150px;
height: 150px;
background-color: red;
animation: myfirst 5s;
position: relative;
}
@keyframes myfirst {
0% {background:red; left:0px; top:0px;transform: skew(30deg,30deg);}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/* Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。 所以要加-webkit- */
@-webkit-keyframes myfirst {
0% {background:red; left:0px; top:0px;transform: skew(30deg,30deg);}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div id="jianbian1">从上到下</div>
<div id="jianbian2">从左到右--粘顶效果</div>
<div id="jianbian3">从左上到右下</div>
<div id="jianbian4">从左下到右上--粘顶效果</div>
<div id="guodu" class="guodu">过度效果--粘顶效果</div>
<div class="donghua">动画</div>
</body>
</html>
1.css单位
2.CSS的继承
3.CSS的样式表
4.CSS的基本选择器
5.CSS的文本修改修饰基本属性
6.CSS的基本样式
7.正常文档流和浮动文档流
8.常用图形绘制
9.过渡样式
10.transform的使用
11.动画的常用属性
例如：