scase 缩放 skew扭曲 origin:0 0;起点 rotate旋转
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0; margin:0;}
div{
position: relative;
33%;
height: 400px;
float: left;
overflow: hidden;
transition:all 3s ease;
}
div:hover img{
opacity: 0.5;
}
img{
opacity: 1;
transition:all 3s ease;
}
.num1 h2{
position: absolute;
left: 30px;
top: 50%;
color: white;
font-size: 20px;
transition:all 3s ease;
transform:translateY(15px);
}
.num1 p{
position: absolute;
left: 30px;
bottom: -20px;
color: white;
transition:all 3s ease;
transform:translateY(0px);
}
.num1:hover img{
transform:translateX(-100px);
}
.num1:hover h2{
transform:translateY(0);
}
.num1:hover p{
transform:translateY(-150px);
}
.num2 h2{
position: absolute;
left: 30px;
top: 100px;
color: white;
font-size: 30px;
transition:all 3s ease;
}
.num2 p{
position: absolute;
left: 30px;
height: 25px;
padding: 0 15px 0;
line-height: 25px;
background: white;
transition:all 3s ease;
transform:translateX(-300px);
}
.num2 .list1{
top:140px;
}
.num2 .list2{
top: 170px;
transition-delay:0.5s;
}
.num2 .list3{
top: 200px;
transition-delay:1s;
}
.num2:hover p{
transform:translateX(0);
}
.num3 h2{
position: absolute;
left: 30px;
top: 100px;
color: white;
font-size: 30px;
transition:all 3s ease;
transform:translateY(0);
opacity: 0;
}
.num3 p{
position: absolute;
bottom: -40px;
text-indent: 2em;
background: white;
transition:all 3s ease;
transform:translateY(0);
}
.num3:hover h2{
transform:translateY(-15px);
opacity: 1;
}
.num3:hover p{
transform:translateY(-40px);
}
.num4 h2{
position: absolute;
left: 30px;
top: 60px;
color: white;
transition:all 3s ease;
transform:translateY(0);
}
.num4 .info1{
position: absolute;
right: 50px;
bottom: 80px;
z-index: 99;
transition:all 3s ease;
transform:translateY(100px);
}
.num4 .info2{
position: absolute;
right: 100px;
bottom: 80px;
z-index: 99;
transition:all 3s ease;
transform:translateY(100px);
}
.num4 div{
position: absolute;
top: 400px;
200%;
height: 600px;
background: white;
transition:all 3s ease;
transform-origin:0 0;
}
.num4:hover h2{
transform:translateY(-15px);
}
.num4:hover .info1{
transform:translateY(0);
}
.num4:hover .info2{
transform:translateY(0);
}
.num4:hover div{
transform:rotate(-20deg);
}
.num5 img{
transition:all 3s ease;
transform:translateX(0);
}
.num5 h2{
position: absolute;
left: 30px;
top: 100px;
color: white;
font-size: 30px;
transition:all 3s ease;
transform:translateX(0);
}
.num5 p{
position: absolute;
top: 200px;
left: 80px;
opacity: 0;
color: white;
transition:all 3s ease;
transition:translateY(0);
}
.num5 div{
position: absolute;
left: 15%;
top: 15%;
70%;
height: 70%;
border: 3px solid black;
transform:translateY(-400px) rotate(-360deg);//旋转
transform-origin:0 0;//起始位置
}
.num5:hover img{
transform:translateX(-30px);
}
.num5:hover h2{
transform:translateX(50px);
}
.num5:hover p{
opacity: 1;
transform:translateY(-50px);
}
.num5:hover div{
transform:translateY(0px) rotate(0deg);
}
.num6 h2{
position: absolute;
left: 30px;
top: 100px;
color: white;
transition:all 3s ease;
transform:skewX(90deg);
}
.num6 p{
position: absolute;
left: 30px;
text-indent: 2em;
color: white;
transition:all 3s ease;
transform:skewX(90deg);//扭曲歪斜
}
.num6 .con1{
top: 160px;
}
.num6 .con2{
top: 180px;
}
.num6:hover h2{
transform:skewX(0);
}
.num6:hover p{
transform:skewX(0);
}
.num7 img{
transition:all 3s ease;
transform:scale(1.2);
}
.num7 h2{
position: absolute;
left: 30px;
top: 100px;
color: white;
font-size: 30px;
transition:all 3s ease;
transform:scale(1.2);//缩放
}
.num7 p{
position: absolute;
left: 80px;
top: 140px;
color: white;
transition:all 3s ease;
transform:scale(1.2);
}
.num7 div{
position:absolute;
left:0;
top:0;
100%;
height:100%;
border:2px solid white;
opacity:0;
}
.num7:hover img{
transform:scale(1);
}
.num7:hover h2{
transform:scale(1);
}
.num7:hover p{
transform:scale(1);
}
.num7:hover div{
transform:scale(0.8);
opacity: 1;
}
.num8 img{
transform:scale(1.2);
}
.num8 p{
position: absolute;
left: 80px;
top: 120px;
text-indent: 2em;
color: white;
font-size: 30px;
transition:all 3s ease;
transform:translateY(50px);
}
.num8 .line1{
position:absolute;
left:15%;
top:10%;
70%;
height:80%;
border-left:2px solid white;
border-right:2px solid white;
transition:all 3s ease;
transform:scaleY(0);
}
.num8 .line2{
position:absolute;
left:10%;
top:15%;
80%;
height:70%;
border-top:2px solid white;
border-bottom:2px solid white;
transition:all 3s ease;
transform:scaleX(0);
}
.num8:hover img{
transform:scale(1);
}
.num8:hover p{
transform:translateY(0px);
opacity: 1;
}
.num8:hover .line1{
transform:scaleY(1);
}
.num8:hover .line2{
transform:scaleX(1);
}
</style>
</head>
<body>
<div class="num1">
<img src="img/pic1.jpg" alt="">
<h2>平移动画</h2>
<p>最简单的css3过渡动画</p>
</div>
<div class="num2">
<img src="img/pic2.jpg" alt="">
<h2>平移动画2-多条文字</h2>
<p class="list1">多条图片简介文字</p>
<p class="list2">注意飞入动画</p>
<p class="list3">利用动画延时答道效果</p>
</div>
<div class="num3">
<img src="img/pic3.jpg" alt="">
<h2>平移动画2-多条文字</h2>
<p>translate属性可以制作多种动画，一个简单的位置移动可以制作出多种效果，重要看制作师们能否开动想象力。</p>
</div>
<div class="num4">
<img src="img/pic4.jpg" alt="">
<h2>利用旋转显示额外的信息</h2>
<p class="info1">info1</p>
<p class="info2">info2</p>
<div></div>
</div>
<div class="num5">
<img src="img/pic5.jpg" alt="">
<h2>旋转飞入飞出</h2>
<p>通过旋转和位移，制作飞入飞出效果</p>
<div></div>
</div>
<div class="num6">
<img src="img/pic6.jpg" alt="">
<h2>扭曲飞入飞出</h2>
<p class="con1">通过扭曲和位移，制作出飞入的效果。</p>
<p class="con2">扭曲属到达90度。元素就看不见了。</p>
</div>
<div class="num7">
<img src="img/pic7.jpg" alt="">
<h2>`简单缩放效果</h2>
<p>通过单纯的简单缩放制作动画效果</p>
<div></div>
</div>
<div class="num8">
<img src="img/pic8.jpg" alt="">
<p>绘制线条效果</p>
<div class="line1"></div>
<div class="line2"></div>
</div>
</body>
</html>