第一个我要介绍的是transition-property 属性，它是用来指定过渡效果的css3的属性名称，过渡效果是用户鼠标移动在元素上时发生的！
基本格式为{
none（没有属性会得到效果。）
all（全部属性都会得到效果！）
property(定义应用过度的名称，多个名称之间用逗号隔开！)
}
下图使用了transition的四个效果，但是总体来说是没有问题的，不明白的小伙伴可以去看下书，这里我就不展开讲了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>渐变transition练习</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: skyblue;
border: 10px solid #59AA05;
margin: 20px auto;
transition: all 5s ease-in 1s;
}
div:hover{
border-radius: 50%;
background-color:forestgreen;
border-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
还有一个效果是变形：transform；
利用div盒子，将图形的变换表达处理，也然我们更加了解了，transform的一些属性，深刻了解其中的道理。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>2D变形transform练习</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 2px #FF0000 solid;
background-color: #2EACE5;
margin: 50px;
float: left;
font-size: 16px;
transition: all 5s ease-out;
}
.translate:hover {
transform: translate(20px,15px);
/*相对于原有位置，水平向右偏移20px，垂直向下偏移15px*/
}
.scale:hover {
transform: scale(-2);
transform: scale(1.5);
/*先翻转元素，然后再放大为原来的1.5倍*/
}
.skew:hover {
transform: skewX(30deg) skewY(30deg);
/*沿X轴倾斜30°，沿Y轴倾斜30°*/
}
.rotate:hover {
transform: rotate(30deg);
/*旋转30度*/
}
.origin1:hover {
transform-origin: 20% 20%;
transform: rotate(30deg);
/*设置中心点的位置：X轴和Y轴位置都为20%*/
/*旋转30度*/
}
</style>
</head>
<body>
<div class="box translate">移动</div>
<div class="box scale">缩放</div>
<div class="box skew">倾斜</div>
<div class="box rotate">旋转</div>
<div class="box origin1">中心点改变1</div>
</body>
</html>
最后由于图形是需要鼠标移动才能达到效果，这样也不能好的展示效果，如果感兴趣的小伙伴，可以复制代码去机器上跑一下，这样也就没有那么难懂了。
谢谢大家的观看，希望有错误的地方有大佬能帮我指出，谢谢大家。
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
