css3基本特效

最新推荐文章于 2024-04-13 15:44:30 发布

转载最新推荐文章于 2024-04-13 15:44:30 发布 · 78 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5344842.html

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;
			width: 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;
			width: 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%;
			width: 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;
			width: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%;
			width: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%;
			width: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>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5344842.html