利用CSS3實現節日感恩文字動畫特效



17 67 23



特效描述:利用CSS3實現 節日感恩 文字動畫特效,利用CSS3實現節日感恩文字動畫特效

代碼結構

1. HTML代碼

?<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
	@keyframes loading {
		0%, 100% {
			-moz-transform: scale(1) rotateZ(0deg);
			-ms-transform: scale(1) rotateZ(0deg);
			-webkit-transform: scale(1) rotateZ(0deg);
			transform: scale(1) rotateZ(0deg);
			opacity: 1;
		}
		26% {
			-moz-transform: scale(1.1) rotateZ(12deg);
			-ms-transform: scale(1.1) rotateZ(12deg);
			-webkit-transform: scale(1.1) rotateZ(12deg);
			transform: scale(1.1) rotateZ(12deg);
			opacity: .2;
		}
		76% {
			-moz-transform: scale(0.8) rotateZ(-8deg);
			-ms-transform: scale(0.8) rotateZ(-8deg);
			-webkit-transform: scale(0.8) rotateZ(-8deg);
			transform: scale(0.8) rotateZ(-8deg);
			opacity: .6;
		}
	}
	.loader {
		overflow: hidden;
		font-size: 40px;
	}
	.loader span {
		-moz-animation: loading 1s linear infinite -0.8s;
		-webkit-animation: loading 1s linear infinite -0.8s;
		animation: loading 1s linear infinite -0.8s;
		float: left;
	}
	.loader .span2 {
		-moz-animation: loading 1s linear infinite -0.2s;
		-webkit-animation: loading 1s linear infinite -0.2s;
		animation: loading 1s linear infinite -0.2s;
	}
	.loader .span3 {
		-moz-animation: loading 1s linear infinite -0.5s;
		-webkit-animation: loading 1s linear infinite -0.5s;
		animation: loading 1s linear infinite -0.5s;
	}
	.loader .span4 {
		-moz-animation: loading 1s linear infinite -1.1s;
		-webkit-animation: loading 1s linear infinite -1.1s;
		animation: loading 1s linear infinite -1.1s;
	}
	.loader .span5 {
		-moz-animation: loading 1s linear infinite -0.36s;
		-webkit-animation: loading 1s linear infinite -0.36s;
		animation: loading 1s linear infinite -0.36s;
	}
	.loader .span6 {
		-moz-animation: loading 1s linear infinite -0.65s;
		-webkit-animation: loading 1s linear infinite -0.65s;
		animation: loading 1s linear infinite -0.65s;
	}
	.loader .span7 {
		-moz-animation: loading 1s linear infinite -0.93s;
		-webkit-animation: loading 1s linear infinite -0.93s;
		animation: loading 1s linear infinite -0.93s;
	}
	.font1 {
		font-family: 'Helvetica',Arial,sans-serif;
	}
	.font2 {
		font-family: Impact;
	}
	.font3 {
		font-family: "Times ";
	}
	.font4 {
		font-family: "Comic Sans Ms",sans-serif;
		font-weight: bold;
	}
</style>
</head>
<body style="background-image: url('img/802.jpg'); background-repeat:no-repeat;">
<div style="margin: 80px 0 80px 200px">
	<div class="loader font1">
		<span>" </span>
		<span class="span2">I</span>
		<span class="span3">love</span>
		<span class="span4">you</span>
		<span class="span5">,</span>
		<span class="span6">just</span>
		<span class="span7">like</span>
	</div>
	<div class="loader font2">
		<span>the</span>
		<span class="span2">first</span>
		<span class="span3">.</span>
		<span class="span4">" </span>
		<span class="span5">My</span>
		<span class="span6">mother</span>
		<span class="span7">who</span>
	</div>
	<div class="loader font3">
		<span>has</span>
		<span class="span2">been</span>
		<span class="span3">caring</span>
		<span class="span4">for</span>
		<span class="span5">my</span>
		<span class="span6">growth</span>
		<span class="span7">has</span>
	</div>
	<div class="loader font4">
		<span>been</span>
		<span class="span2">hard</span>
		<span class="span3">.</span>
	</div>
</div>
<div style="margin: 120px 0 120px 500px">
	<div class="font3" style="font-size: 25px;">
		<span>“我愛你,一如最初。”一直呵護我成長的媽媽,辛苦了。</span>
	</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表