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>

css動畫
2024-10-18
CSS動畫
css3實現動畫有幾種方式？
2021-09-09
CSSS3動畫
CSS速刷 - CSS動畫
2024-10-21
CSS動畫
CSS動畫篇之404動畫
2022-05-05
CSS動畫
CSS animation 動畫
2019-12-11
CSS動畫
css清除浮動float的七種常用方法總結
2019-02-10
CSS
第9章 CSS3中的變形與動畫（下）
2018-12-07
CSSS3動畫
CSS中的“大白”——CSS 動畫
2019-02-28
CSS動畫
CSS 動畫專題
2024-07-23
CSS動畫
CSS變形動畫
2020-07-21
CSS動畫
時鐘——CSS 動畫
2019-02-27
CSS動畫
js 和 css動畫
2018-08-11
JSCSS動畫
CSS動畫總結
2018-04-11
CSS動畫
CSS3動畫之逐幀動畫
2019-04-02
CSSS3動畫
深入淺出 CSS 動畫
2022-01-13
CSS動畫
CSS3 動畫解析
2019-03-03
CSSS3動畫
紅綠燈?——CSS 動畫
2019-03-01
CSS動畫
CSS3 animation 動畫
2019-02-04
CSSS3動畫
10種CSS3實現的loading動畫，挑一個走吧？
2020-11-30
CSSS3動畫
【動畫消消樂】HTML+CSS 吃豆豆動畫 073
2021-08-02
動畫HTMLCSS
WPF兩種緩動動畫
2020-10-07
動畫
Vue - 使用 transition 過渡動畫、Animate.css 庫動畫
2024-06-20
Vue動畫CSS
CSS3動畫基礎
2020-06-08
CSSS3動畫
有趣的CSS彈跳動畫
2019-05-06
CSS動畫
淺談CSS3動畫
2020-12-14
CSSS3動畫
奇思妙想 CSS 文字動畫
2021-03-08
CSS動畫
css3 動畫（一） transition
2018-07-08
CSSS3動畫
【CSS】圖片動畫特效（相框）
2018-05-06
CSS動畫特效
css3高階動畫
2018-07-19
CSSS3動畫
CSS動畫：animation、transition、transform、translate
2018-06-22
CSS動畫ORM
css中動畫與過度
2018-09-27
CSS動畫
純css製作loading動畫
2018-04-02
CSS動畫
常用CSS樣式2：浮動
2018-11-14
CSS
css的三種常用寫法是什麼
2021-09-11
CSS
CSS 怎樣寫一個動畫（從基礎動畫到3d動畫)
2019-03-12
CSS動畫3D
【動畫消消樂】HTML+CSS 自定義載入動畫 065
2021-07-25
動畫HTMLCSS
【動畫消消樂】HTML+CSS 自定義載入動畫 061
2021-07-20
動畫HTMLCSS
【動畫消消樂】HTML+CSS 自定義載入動畫 062
2021-07-21
動畫HTMLCSS

9種常用CSS動畫

複製可用

相關文章