第一个我要介绍的是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>
最后由于图形是需要鼠标移动才能达到效果,这样也不能好的展示效果,如果感兴趣的小伙伴,可以复制代码去机器上跑一下,这样也就没有那么难懂了。
谢谢大家的观看,希望有错误的地方有大佬能帮我指出,谢谢大家。