9種常用CSS動畫

三友路發表於2020-10-28

複製可用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>9種css動畫</title>
		<link rel="stylesheet" type="text/css" href="css/demo2.css"/>
		<link rel="icon" sizes="any" mask="" href="./img/baidu.svg">
		<style>
			@charset "utf-8";
			*{padding: 0;margin: 0;}
			figure{
				width: 33.3%;
				height: 365px;
				float: left;
				overflow: hidden;
				position: relative;
			}
			img{
				height:100%;
				transition: all 1s;
			}
			figure:hover img{
				-webkit-transform: translateX(-10px);
				-moz-transform: translateX(-10px);
				-ms-transform: translateX(-10px);
				-o-transform: translateX(-10px);
				transform: translateX(-10px);
				opacity: 0.5;
			}
			ul,li{
				list-style: none;
			}
			h2,p,li,div{
				position: absolute;
				transition: all 0.5s;
				color: #000;
			}
			/* 動畫1 */
			.effect1 h2{
				
				left:10%;
				bottom:30%;
				
			}
			.effect1 p{
				
				left:10%;
				top:100%;
				color: #000;
			}
			.effect1:hover h2{
				-webkit-transform: translateY(-15px);
				-moz-transform: translateY(-15px);
				-ms-transform: translateY(-15px);
				-o-transform: translateY(-15px);
				transform: translateY(-15px);
			}
			.effect1:hover p{
				/*-webkit-transform: translateY(-30px);
				-moz-transform: translateY(-30px);
				-ms-transform: translateY(-30px);
				-o-transform: translateY(-30px);
				transform: translateY(-30px);*/
				top:80%;
			}
			/* 動畫2 */
			.effect2 h2{
				top:20%;
				left:15%;
			}
			.effect2 ul li{
				background-color: #fff;
				color: #000;
			}
			.effect2 ul li:nth-child(1){
				top:45%;
				left:15%;
				-webkit-transform: translateX(-200px);
				-moz-transform: translateX(-200px);
				-ms-transform: translateX(-200px);
				-o-transform: translateX(-200px);
				transform: translateX(-200px);;
			}
			.effect2 ul li:nth-child(2){
				top:55%;
				left:15%;
				-webkit-transition-delay: 0.2s;
				-moz-transition-delay: 0.2s;
				-ms-transition-delay: 0.2s;
				-o-transition-delay: 0.2s;
				transition-delay: 0.2s;
				-webkit-transform: translateX(-200px);
				-moz-transform: translateX(-200px);
				-ms-transform: translateX(-200px);
				-o-transform: translateX(-200px);
				transform: translateX(-200px);;
			}
			.effect2 ul li:nth-child(3){
				top:65%;
				left:15%;
				-webkit-transition-delay: 0.4s;
				-moz-transition-delay: 0.4s;
				-ms-transition-delay: 0.4s;
				-o-transition-delay: 0.4s;
				transition-delay: 0.4s;
				-webkit-transform: translateX(-300px);
				-moz-transform: translateX(-300px);
				-ms-transform: translateX(-300px);
				-o-transform: translateX(-300px);
				transform: translateX(-300px);;
			}
			.effect2:hover ul li{
				-webkit-transform: translateX(0);
				-moz-transform: translateX(0);
				-ms-transform: translateX(0);
				-o-transform: translateX(0);
				transform: translateX(0);
			}
			/* 動畫3 */
			.effect3 h2{
				top:20%;
				left:15%;
			}
			.effect3 p{
				width: 100%;
				bottom: 0;
				color: #000;
				background-color: #fff;
				line-height: 24px;
				text-indent: 32px;
				-webkit-transform: translateY(50px);
				-moz-transform: translateY(50px);
				-ms-transform: translateY(50px);
				-o-transform: translateY(50px);
				transform: translateY(50px);;
			}

			.effect3:hover p{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
			}
			/* 動畫4 */
			.effect4 div{
				width: 150%;
				height:50%;
				top:100%;
				background-color: #fff;
				-webkit-transform-origin: 0% 0%;
				-moz-transform-origin: 0% 0%;
				-ms-transform-origin: 0% 0%;
				-o-transform-origin: 0% 0%;
				transform-origin: 0% 0%;
				/*-webkit-transform: rotate(-15deg);
				-moz-transform: rotate(-15deg);
				-ms-transform: rotate(-15deg);
				-o-transform: rotate(-15deg);
				transform: rotate(-15deg);*/
			}
			.effect4:hover div{
				-webkit-transform: rotate(-15deg);
				-moz-transform: rotate(-15deg);
				-ms-transform: rotate(-15deg);
				-o-transform: rotate(-15deg);
				transform: rotate(-15deg);
			}
			.effect4 ul li{
				bottom: 25px;
				color: #000;
				font-size: 18px;
				-webkit-transform: translateY(50px);
				-moz-transform: translateY(50px);
				-ms-transform: translateY(50px);
				-o-transform: translateY(50px);
				transform: translateY(50px);
			}
			.effect4 ul li:nth-child(2){
				right:30px;
				-webkit-transition-delay: 0.1s;
				-moz-transition-delay: 0.1s;
				-ms-transition-delay: 0.1s;
				-o-transition-delay: 0.1s;
				transition-delay: 0.1s;
			}
			.effect4 ul li:nth-child(1){
				right:90px;
			}
			.effect4:hover ul li{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
			}
			/* 動畫5 */
			.effect5 h2{
				left:20%;
				top:20%;
				-webkit-transform: translateX(-50px);
				-moz-transform: translateX(-50px);
				-ms-transform: translateX(-50px);
				-o-transform: translateX(-50px);
				transform: translateX(-50px);
			}
			.effect5:hover h2{
				-webkit-transform: translateX(0);
				-moz-transform: translateX(0);
				-ms-transform: translateX(0);
				-o-transform: translateX(0);
				transform: translateX(0);
			}
			.effect5 p{
				left:25%;
				top:30%;
				-webkit-transform: translateY(50px);
				-moz-transform: translateY(50px);
				-ms-transform: translateY(50px);
				-o-transform: translateY(50px);
				transform: translateY(50px);
			}
			.effect5:hover p{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
			}
			.effect5 div{
				width: 70%;
				height:70%;
				left:15%;
				top:15%;
				border:2px solid #f66;
				-webkit-transform:  translateY(-350px) rotate(0);
				-moz-transform:  translateY(-350px) rotate(0);
				-ms-transform: translateY(-350px) rotate(0);
				-o-transform:  translateY(-350px) rotate(0);
				transform:  translateY(-350px) rotate(0);
			}
			.effect5:hover div{
				-webkit-transform:translateY(0) rotate(360deg) ;
				-moz-transform:translateY(0) rotate(360deg) ;
				-ms-transform:translateY(0) rotate(360deg) ;
				-o-transform:translateY(0) rotate(360deg) ;
				transform:translateY(0) rotate(360deg) ;
			}
			/* 動畫6 */
			.effect6 h2{
				top:20%;
				left:10%;
				-webkit-transform: skew(90deg);
				-moz-transform: skew(90deg);
				-ms-transform: skew(90deg);
				-o-transform: skew(90deg);
				transform: skew(90deg);
			}
			.effect6 p{
				left:10%;top:30%;
				-webkit-transform: skew(90deg);
				-moz-transform: skew(90deg);
				-ms-transform: skew(90deg);
				-o-transform: skew(90deg);
				transform: skew(90deg);
			}
			.effect6:hover h2,.effect6:hover p{
				-webkit-transform: skew(0);
				-moz-transform: skew(0);
				-ms-transform: skew(0);
				-o-transform: skew(0);
				transform: skew(0);
			}
			/* 動畫7 */
			.effect7 img{
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7 div{
				width: 70%;
				height:70%;
				border: 2px solid #000;
				left:15%;
				top:15%;
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7 h2{
				left:20%;top:20%;
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7 p{
				left:20%;top:40%;
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7:hover *{
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				-o-transform: scale(1);
				transform: scale(1);
			}
			/* 動畫8 */
			.effect8 h2{
				left: 20%;
				top:20%;
				-webkit-transform: translateX(-50px);
				-moz-transform: translateX(-50px);
				-ms-transform: translateX(-50px);
				-o-transform: translateX(-50px);
				transform: translateX(-50px);
			}
			.effect8:hover h2{
				-webkit-transform: translateX(0);
				-moz-transform: translateX(0);
				-ms-transform: translateX(0);
				-o-transform: translateX(0);
				transform: translateX(0);
			}

			.effect8 p{
				left:25%;
				top:30%;
				-webkit-transform: translateY(30px);
				-moz-transform: translateY(30px);
				-ms-transform: translateY(30px);
				-o-transform: translateY(30px);
				transform: translateY(30px);
				opacity: 0;
			}
			.effect8:hover p{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
				opacity: 1;
			}
			.effect8 #borderW{
				/*width: 80%;
				height:70%;
				left: 10%;
				top:15%;
				border: 1px solid #fff;
				border-left:0;
				border-right: 0;
				-webkit-transform: scale(0,1);
				-moz-transform: scale(0,1);
				-ms-transform: scale(0,1);
				-o-transform: scale(0,1);
				transform: scale(0,1);*/
				width: 0;
				left:50%;
				height:70%;
				top:15%;
				border: 1px solid #000;
				border-left:0;
				border-right: 0;
			}
			.effect8:hover #borderW{
				/*-webkit-transform: scale(1,1);
				-moz-transform: scale(1,1);
				-ms-transform: scale(1,1);
				-o-transform: scale(1,1);
				transform: scale(1,1);*/
				left:10%;
				width: 80%;
				
			}
			.effect8 #borderH{
				width: 70%;
				height:80%;
				left:15%;
				top:10%;
				border:1px solid #000;
				border-top:0;
				border-bottom:0;
				-webkit-transform: scale(1,0);
				-moz-transform: scale(1,0);
				-ms-transform: scale(1,0);
				-o-transform: scale(1,0);
				transform: scale(1,0);
			}
			.effect8:hover #borderH{
				-webkit-transform: scale(1,1);
				-moz-transform: scale(1,1);
				-ms-transform: scale(1,1);
				-o-transform: scale(1,1);
				transform: scale(1,1);
			}

		</style>
	</head>
	<body>
		<!-- 動畫1 -->
		<figure class="effect1">
			<img src="img/pic1.jpg"/>
			<h2>平移動畫</h2>
			<p>最簡單的平移動畫</p>
		</figure>
		<!-- 動畫2 -->
		<figure class="effect2">
			<img src="img/pic2.jpg"/>
			<h2>平移動畫</h2>
			<ul >
				<li>多條圖片簡介文字</li>
				<li>逐一飛入動畫</li>
				<li> 利用動畫延時達到效果</li>
			</ul>
		</figure>
		<!-- 動畫3 -->
		<figure class="effect3">
			<img src="img/pic3.jpg"/>
			<h2>底部滑出動畫</h2>
			<p>
				translate屬性可以製作多種動畫,一個簡單的位置移動可以製作出多種效果,重要看製作師們能否開動想象力。
			</p>
		</figure>
		<!-- 動畫4 -->
		<figure class="effect4">
			<img src="img/pic4.jpg"/>
			<div></div>
			<ul>
				<li>info1</li>
				<li>info2</li>
			</ul>
		</figure>
		<!-- 動畫5 -->
		<figure class="effect5">
			<img src="img/pic5.jpg"/>
			<h2>旋轉飛入</h2>
			<p>通過旋轉和位移</p>
			<div></div>
		</figure>
		<!-- 動畫6 -->
		<figure class="effect6">
			<img src="img/pic6.jpg"/>
			<h2>扭曲飛入飛</h2>
			<p>去通過扭曲和位移,製作出飛入的效果。扭曲屬到達90度。元素就看不見了</p>
		</figure>
		<!-- 動畫7 -->
		<figure class="effect7">
			<img src="img/pic7.jpg"/>
			<div></div>
			<h2>縮放</h2>
			<p>縮放縮放縮放縮放縮放</p>
		</figure>
		<!-- 動畫8 -->
		<figure class="effect8">
			<img src="img/pic8.jpg"/>
			<h2>繪製線條效果</h2>
			<p>通過縮放屬性繪製邊框線條</p>
			<div id="borderW"></div>
			<div id="borderH"></div>
		</figure>
		<!-- 動畫9 -->
		<figure class="effect9">
			<img src="img/pic9.jpg"/>
		</figure>
		
	</body>
</html>

相關文章