一些css3的小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*！！！！ CSS3兼容 IE9及以上 */
div{width: 150px;
height: 150px;
background-color: #0a9dc7;
float: left;
margin: 25px;
}
.box-1{ /*圆角 可分别定义4个角*/
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.box-2{ /*盒阴影*/
box-shadow: 10px 10px 5px #888888;
}
.box-3{/*背景设置 可按照padding、margin、center设置 也可设置多张背景图片最顶端的为第一张*/
width: 80px;
height: 80px;
border: 10px dotted black;
padding:20px;
background: #ccc;
background-clip: content-box;
}
.box-4{ /*线性渐变*/
/*background: linear-gradient(red,blue,red); 可以多种颜色*/
/*background: linear-gradient(to bottom right,red,blue); !*规定结束地方*!*/
background: linear-gradient(90deg,red,blue);/*角度渐变 deg是单位*/
}
.box-5{/*透明线性渐变*/
background:linear-gradient(90deg,rgba(255,0,0,1),rgba(200,0,0,0));
}
.box-6{/*重复渐变*/
background: repeating-linear-gradient(90deg,red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */
}
.box-7{/*径向渐变*/
background: radial-gradient(ellipse,red, green, blue);/*circle 表示圆形，ellipse 表示椭圆形(默认)*/
}
.box-8{/*最近边的径向渐变*/
background: radial-gradient(closest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
}
.box-9{/*重复的径向渐变*/
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
.box-10{/*文字背影*/
text-shadow:5px 5px 5px red;
}
.box-11{/*box阴影*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@font-face{ /* 引用字体的使用*/
font-family:自定义字体的名字;
src: url(字体文件的路径);
}
/*CSS3 transform 2D转换 移动，比例化，反过来，旋转，和拉伸元素。*/
.box-12{ /*translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
transform: translate(0px,-15px);
}
.box-13{ /*rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。 */
transform: rotate(15deg);
}
.box-14{ /*scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数： */
transform: scale(0.5,0.2);
}
.box-15{ /*skew()方法，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 */
transform:skew(30deg,20deg);
}
.box-16{ /*matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。 */
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
.box-17{ /*rotateX()方法，围绕其在一个给定度数X轴旋转的元素。*/
transform:rotateX(50deg)
}
.box-18{ /*rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。*/
transform:rotateY(160deg)
}
.box-19{ /*过渡动画*/
transition:transform 2s;
}
.box-19:hover{
transform:rotateY(160deg);
}
.box-20{/* 动画*/
animation: myframes 4s;
position:relative; /*要东就要加定位属性*/
}
@keyframes myframes { /*创建动画 并且绑定到class上*/
0% {background: red; left:0px; top:0px;}
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;}
}
.box-21{/* 一直动的动画*/
animation-name:myframes; /*规定 @keyframes 动画的名称。*/
animation-duration:3s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
animation-timing-function:linear; /*规定动画的速度曲线。先快后慢还是什么*/
animation-delay:1s; /*规定动画何时开始。默认是 0。*/
animation-iteration-count:infinite; /*规定动画被播放的次数。默认是 1。infinite是无限次*/
animation-direction:alternate; /*规定动画是否在下一周期逆向地播放。默认是 "normal" 可以反向动画正向动画或者正反交互*/
animation-play-state: running; /*规定动画是否正在运行或暂停。默认是 "running" 在js中运用*/
animation: myframes 5s linear 1s infinite alternate; /* 缩写 动画名称-周期时间-动画曲线-何时开始-播放次数-动画方向 */
position:relative; /*要东就要加定位属性*/
}
@keyframes myframes { /*创建动画 并且绑定到class上*/
0% {background: red; left:0px; top:0px;}
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;}
}
.box-22{
column-count:3;
}
.box-23{
padding:100px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box-1">圆角</div>
<div class="box-2">盒阴影</div>
<div class="box-3">背景图片位置</div>
<div class="box-4">线性渐变</div>
<div class="box-5">透明线性渐变</div>
<div class="box-6">重复渐变</div>
<div class="box-7">径向渐变</div>
<div class="box-8">最近边的径向渐变</div>
<div class="box-9">重复的径向渐变</div>
<h1 class="box-10">文字背影</h1>
<div class="box-11">box阴影</div>
<div class="box-12">2D 移动(XY轴)translate</div>
<div class="box-13">2D 旋转 rotate</div>
<div class="box-14">2D 变大变小 scale</div>
<div class="box-15">2D 倾斜 skew</div>
<div class="box-16">2D 总和</div>
<div class="box-17">3D X轴</div>
<div class="box-18">3D Y轴</div>
<div class="box-19">过渡动画transtion</div>
<div class="box-20">动画</div>
<div class="box-21">一直动的动画</div>
<div class="box-22">多列多列多列多列多列多列多列多列多列多列多列多列多列多列多列多列多列多列多列多列多列多列</div>
<div class="box-23">去掉盒子的padding</div>
</body>
</html>
