HTML5 動畫效果 ------ 旋轉的小球、CSS旋轉木馬3D相冊效果

css3實現動畫效果

基本知識點:

Css3常用到的幾個屬性:transform(變形),transition(過渡),animation(動畫)     

  • transform

translate:平移,移動,水平方向、垂直方向(translateX,translateY,translateZ等)

scale:縮放;擴大縮小,水平方向、垂直方向(scaleX,scaleY,ScaleZ等)

rotate:旋轉,單位爲deg(角度,順時針方向爲正),默認沿中心點旋轉(水平方向的1/2和垂直方向的1/2的交點)

transform-origin:默認爲中心,值爲 center center;可以爲top left(沿着左上角旋轉),bottom right(沿着右下角旋轉),等等。也可以設置爲百分數

skew:傾斜轉換;扭曲,斜切,改變原來圖形,單位也是deg(skewX,skewY等)

  • transition

transition:過渡的屬性名 過渡時間  過渡模式(可以有多個屬性,多個值)

過渡模式有 linear(勻速)、ease(緩慢-加快-緩慢)、ease-in(緩慢-加快;慢速開始)、  ease-out(加快-緩慢;慢速結束) 、ease-in-out(緩慢開始和結束)

例如, transition: width 3s,height 3s,background 3s;

等價於 transition: all 3s;

 製作動畫效果思路:先定義一個動畫,然後將他賦給某個值

逐幀動畫:每一幀或者每幾幀發生一次變化

@keyframes用於定義一個動畫

 下面我寫了一個簡單的案例,實現不斷旋轉運動的球體:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css-sphere</title>
	<style>
		*{padding: 0px;margin: 0px;list-style: none;}
		html{background: #000;}
		#view{margin: 200px auto;width: 400px;height: 400px;border-radius: 50%;}
		.item{background: #000;
			  width: 400px;
			  height: 400px;
			  border-radius: 50%;
			  border: 2px solid #fff;
			  position: absolute;
			  opacity: 0.7;
			  /*不透明*/
			  cursor: pointer;
		}
		@keyframes scroll1{
			from{transform: rotateY(0deg);}
			to{transform: rotateY(360deg);}
		}
		@keyframes scroll2{
			from{transform: rotateY(45deg);}
			to{transform: rotateY(405deg);}
		}
		@keyframes scroll3{
			from{transform: rotateY(90deg);}
			to{transform: rotateY(450deg);}
		}
		@keyframes scroll4{
			from{transform: rotateY(135deg);}
			to{transform: rotateY(495deg);}
		}
		@keyframes scroll{
		100%{transform: rotate3d(0,1,0,360deg);}
			/*沿着(0,1,0)這個向量,旋轉360°*/
		}
		#view{
			perspective-origin: 50% 50%;
			transform-style: preserve-3d;
			animation: scroll 10s linear 9s forwards infinite;
		}
		#item1{
			z-index: 1;
			transform-style: preserve-3d;
			animation: scroll1 2s linear 2s forwards infinite;
		}
		#item2{
			z-index: 2;
			transform-style: preserve-3d;
			animation: scroll2 2s linear 4s forwards infinite;
		}
		#item3{
			z-index: 3;
			transform-style: preserve-3d;
			animation: scroll3 2s linear 6s forwards infinite;
		}
		#item4{
			z-index: 4;
			transform-style: preserve-3d;
			animation: scroll4 2s linear 8s forwards infinite;
		}
	</style>
</head>
<body>
	<div id="view">
		<ul id="sphere">
			
			<li class="item" id="item1"></li>
			<li class="item" id="item2"></li>
			<li class="item" id="item3"></li>
			<li class="item" id="item4"></li>
		</ul>
	</div>
</body>
</html>

 效果圖:

第二個案例是我做的一個3D旋轉木馬相冊效果

鼠標觸碰某張圖片,相冊停止運動,具體實現看代碼:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css-album</title>
	<style>
		*{padding: 0px;margin:0px;}
		/*div{position: relative;}*/
		img{width: 430px;
			height: 400px;
			z-index: -1;
			position: absolute;
			bottom: 0px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.5);
			border:2px solid rgba(255,255,255,.5);
			cursor: pointer;
			max-width: 100%;
		}
		#stage{
			perspective-origin: center 30%;
			perspective: 4000px;
			width: 400px;
			height: 400px;
			min-height: 100%;
			position: relative;
			margin-left: 600px;
			margin-top: 200px;
		}
		#container{
			position: absolute;
			width: 400px;
			height: 400px;
			/*top: 50%;
			left: 50%;
			margin-top: -100px;
			margin-left: -100px;*/
			transform-style: preserve-3d;
			animation-duration: 2s;
			transition-duration: 2s;
			animation: scroll 10s linear 2s forwards infinite;
		}
		#container>img:not(:target){z-index: -1;}
		@keyframes scroll{
			0%{transform: rotateY(0deg);}
			100%{transform: rotateY(360deg);}
		}
		#container:hover{
			animation-play-state: paused;
		}
		img:nth-child(0){
			transform: rotateY(0deg) translateZ(500px);
		}
		img:nth-child(1){
			transform: rotateY(60deg) translateZ(500px);
		}
		img:nth-child(2){
			transform: rotateY(120deg) translateZ(500px);
		}
		img:nth-child(3){
			transform: rotateY(180deg) translateZ(500px);
		}
		img:nth-child(4){
			transform: rotateY(240deg) translateZ(500px);
		}
		img:nth-child(5){
			transform: rotateY(300deg) translateZ(500px);
		}
		img:nth-child(6){
			transform: rotateY(360deg) translateZ(500px);
		}
	</style>
</head>
<body>
	<div id="stage">
		<div id="container">
			<img src="images/c01.jpg" alt="" id="i1">
			<img src="images/c02.jpg" alt="" id="i2">
			<img src="images/c03.jpg" alt="" id="i3">
			<img src="images/c04.jpg" alt="" id="i4">
			<img src="images/c05.jpg" alt="" id="i5">
			<img src="images/c06.jpg" alt="" id="i6">
		</div>
		
	</div>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章