要点:
1.结构伪类选择器,注意nth-child后面接括号,里面写数字,从0开始。
特殊开头是first-child和last-child
2.过渡属性有四个值,后面的效果时间曲线和延时设为默认
3.旋转注意,正值为顺时针,负值为逆时针,单位是度(deg,千万不能与战队edg混,哈哈)
4.后加载的图层权重更大,在上面(所以我们看到的,是最后加载的)
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 170px;
height: 250px;
border: 1px solid red;
margin: 350px auto;
position: relative;
}
div img{
width: 100%;
height: 100%;
/*图片长宽比例不一致*/
position: absolute;
top: 0;
left: 0;
transition: all 1.4s;
/*为所有的动画对象执行,执行时间为1.6s*/
transform-origin: top right;
/*默认以图片的中心点为旋转点,改成右上角点*/
}
div:hover img:first-child{
transform: rotate(45deg);
/*一共8一幅图片共360deg,平均45deg*/
}
div:hover img:nth-child(2){
transform: rotate(90deg);
}
div:hover img:nth-child(3){
transform: rotate(135deg);
}
div:hover img:nth-child(4){
transform: rotate(180deg);
}
div:hover img:nth-child(5){
transform: rotate(225deg);
}
div:hover img:nth-child(6){
transform: rotate(270deg);
}
div:hover img:nth-child(7){
transform: rotate(315deg);
}
div:hover img:last-child{
transform: rotate(360deg);
/*第一幅位置没有变换,但是加上动画,就会旋转一圈,好看*/
}
</style>
</head>
<body>
<div>
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/11.jpg">
<img src="img/12.jpg">
<img src="img/13.jpg">
<img src="img/14.jpg">
<img src="img/16.jpg">
<img src="img/18.jpg">
</div>
</body>
</html>
效果:(gif图,多加载一会)