搜尋
首頁後端開發php教程PHP全站開發工程師-擴充之CSS動畫和animate.css和wow.js

PHP全站開發工程師-擴充之CSS動畫和animate.css和wow.js

不言
不言
Apr 09, 2018 pm 05:19 PM
cssjavascript工程師

這篇文章跟大家分享的內容是PHP全站開發工程師-擴充之CSS動畫和animate.css和wow.js ，有需要的朋友可以參考一下


CSS3 動畫


CSS3，我們可以創造動畫，它可以取代許多網頁動畫圖像，Flash動畫，和JAVAScripts。

1.       CSS3 @keyframes 規則

@keyframes規則內指定CSS樣式和動畫將會逐步從目前的樣式改為新的樣式。

2.       CSS3的動畫屬性


#描述所有動畫屬性的簡寫屬性，除了規定規定動畫完成一個週期所花費的秒或毫秒。預設是#規定動畫的速度曲線。預設是 0。 1。 #規定動畫是否在下一週期逆向地播放。預設是

CSS

@keyframes

#規定動畫。

3

 animation

animation-play-state 屬性。

3

 animation-name

@keyframes 動畫的名稱。

3

 animation-duration

0。

3

 #animation-timing- function

"ease"。

3#animation-delay

規定動畫何時開始。預設是

3

animation-iteration- count

#規定動畫播放的次數。預設是

Infinite：無限迴圈

3

animation-direction
### "normal"######。 ##################3############################animation-play- state#####################規定動畫是否正在運作或暫停。預設是###### "running"######。 ##################3###################


3.       animation-timing-function 屬性

##1值

描述

linear #動畫從頭到尾的速度是相同的。

ease預設。動畫以低速開始，然後加快，在結束前變慢。

ease-in


#動畫以低速開始。


ease-out


#動畫以低速結束。


ease-in-out


動畫低速開始和結束。 ,n,函數中自己的值。可能的值是從 0 的數值。 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p {
				width: 100px;
				height: 50px;
				background: red;
				color: white;
				font-weight: bold;
				position: relative;
				animation: mymove 5s;
				-webkit-animation: mymove 5s;
			}
			
			#p1 {animation-timing-function: linear; }
			
			#p2 {animation-timing-function: ease; }
			
			#p3 {animation-timing-function: ease-in; }
			
			#p4 {animation-timing-function: ease-out; }
			
			#p5 {animation-timing-function: ease-in-out; }
			
			#p1 {-webkit-animation-timing-function: linear; }
			
			#p2 {-webkit-animation-timing-function: ease; }
			
			#p3 {-webkit-animation-timing-function: ease-in; }
			
			#p4 {-webkit-animation-timing-function: ease-out; }
			
			#p5 {-webkit-animation-timing-function: ease-in-out; }
			
			@keyframes mymove {
				from {left: 0px; }
				to {left: 300px; }
			}
			
			@-webkit-keyframes mymove{
				from {left: 0px; }
				to {left: 300px; }
			}
		</style>
	</head>

	<body>

		<p id="p1">linear</p>
		<p id="p2">ease</p>
		<p id="p3">ease-in</p>
		<p id="p4">ease-out</p>
		<p id="p5">ease-in-out</p>

	</body>

</html>
reverse

cubic-bezier(n,

n
n

)

在 cubic-bezier

到 1

# 實例：demo01

下面的效果和上面實例一樣實例：demo02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title></title> 
		<style> 
			p
			{
				width:100px;
				height:50px;
				background:red;
				color:white;
				font-weight:bold;
				position:relative;
				animation:mymove 5s infinite;
				-webkit-animation:mymove 5s infinite;
			}
			
			#p1 {animation-timing-function:cubic-bezier(0,0,0.25,1);}
			#p2 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
			#p3 {animation-timing-function:cubic-bezier(0.42,0,1,1);}
			#p4 {animation-timing-function:cubic-bezier(0,0,0.58,1);}
			#p5 {animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
			
			#p1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);}
			#p2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
			#p3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);}
			#p4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);}
			#p5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
			
			@keyframes mymove
			{
				from {left:0px;}
				to {left:300px;}
			}
			
			@-webkit-keyframes mymove /* Safari and Chrome */
			{
				from {left:0px;}
				to {left:300px;}
			}
		</style>
	</head>
	<body>
	
		<p id="p1">linear</p>
		<p id="p2">ease</p>
		<p id="p3">ease-in</p>
		<p id="p4">ease-out</p>
		<p id="p5">ease-in-out</p>
	
	</body>
</html>
4.       animation-direction 屬性#值

#描述#normal預設值.動畫按正常播放。

################動畫反向播放。 #########################alternate###################動畫在奇數次（## ####1######、######3######、#######5...######）正向播放，在偶數次（######2######、######4######、######6...######）反向播放。 ########################alternate-reverse##################動畫在奇數次（ ######1######、######3######、#######5...######）反向播放，在偶數次（######2######、######4#######、######6...#####）正向播放。 ##################


5.       animation-play-state 属性


值

描述

paused

指定暂停动画

running

指定正在运行的动画


实例：demo03

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation-name: myfirst;
				animation-duration: 5s;
				animation-timing-function: linear;
				animation-delay: 2s;
				animation-iteration-count: infinite;
				animation-direction: alternate;
				animation-play-state: running;
				-webkit-animation-name: myfirst;
				-webkit-animation-duration: 5s;
				-webkit-animation-timing-function: linear;
				-webkit-animation-delay: 2s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-direction: alternate;
				-webkit-animation-play-state: running;
			}
			
			@keyframes myfirst {
				0% {
					background: red;
					left: 0px;
					top: 0px;
				}
				25% {
					background: yellow;
					left: 200px;
					top: 0px;
				}
				50% {
					background: blue;
					left: 200px;
					top: 200px;
				}
				75% {
					background: green;
					left: 0px;
					top: 200px;
				}
				100% {
					background: red;
					left: 0px;
					top: 0px;
				}
			}
			
			@-webkit-keyframes myfirst{
				0% {
					background: red;
					left: 0px;
					top: 0px;
				}
				25% {
					background: yellow;
					left: 200px;
					top: 0px;
				}
				50% {
					background: blue;
					left: 200px;
					top: 200px;
				}
				75% {
					background: green;
					left: 0px;
					top: 200px;
				}
				100% {
					background: red;
					left: 0px;
					top: 0px;
				}
			}
		</style>
	</head>

	<body>

		<p></p>

	</body>

</html>

6.       属性简写

与上面的动画相同，但是使用了简写的动画 animation 属性：


实例：demo04

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title></title>
		<style> 
			p{
				width:100px;
				height:100px;
				background:red;
				position:relative;
				animation:myfirst 5s linear 2s infinite alternate;
				-moz-animation:myfirst 5s linear 2s infinite alternate;
				-webkit-animation:myfirst 5s linear 2s infinite alternate;
				-o-animation:myfirst 5s linear 2s infinite alternate;
			}
			
			@keyframes myfirst {
				0%   {background:red; left:0px; top:0px;}
				25%  {background:yellow; left:200px; top:0px;}
				50%  {background:blue; left:200px; top:200px;}
				75%  {background:green; left:0px; top:200px;}
				100% {background:red; left:0px; top:0px;}
			}
			
			@-moz-keyframes myfirst {
				0%   {background:red; left:0px; top:0px;}
				25%  {background:yellow; left:200px; top:0px;}
				50%  {background:blue; left:200px; top:200px;}
				75%  {background:green; left:0px; top:200px;}
				100% {background:red; left:0px; top:0px;}
			}
			
			@-webkit-keyframes myfirst {
				0%   {background:red; left:0px; top:0px;}
				25%  {background:yellow; left:200px; top:0px;}
				50%  {background:blue; left:200px; top:200px;}
				75%  {background:green; left:0px; top:200px;}
				100% {background:red; left:0px; top:0px;}
			}
			
			@-o-keyframes myfirst {
				0%   {background:red; left:0px; top:0px;}
				25%  {background:yellow; left:200px; top:0px;}
				50%  {background:blue; left:200px; top:200px;}
				75%  {background:green; left:0px; top:200px;}
				100% {background:red; left:0px; top:0px;}
			}
		</style>
	</head>
	<body>
	
		<p></p>
	
	</body>
</html>
7.       Animate.css插件

Animate.css是某位大牛写好的动画效果集合，需要的时候可以直接下载导入到项目中，在需要的元素上添加相关的类即可使用相对应的动画效果。

 

Animate.css:源码版下载

Animate.min.css压缩版下载

 

如：

bounce


  • Animated：表示使用Animate.css的动画

  • Infinite：表示动画效果无限循环

  • Bounce：是动画效果

动画效果有很多，下面的案例就展示了各种动画效果


实例：demo05

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<style type="text/css">
			#content{
				padding-top: 20%;
			}
			#test {
				width: 50%;
				line-height: 100px;
				margin: auto;
				background-color: rgba(10, 10, 10, 0.2);
				text-align: center;
			}
			select{
				display: block;
				height: 45px;
				margin: auto;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById(&#39;select&#39;).onchange = function(){
					val = this.options[this.selectedIndex].value;
					document.getElementById(&#39;test&#39;).setAttribute(&#39;class&#39;,&#39;animated infinite &#39;+val);
				}
			}
		</script>
	</head>

	<body>
		<p id="content">
			<p id="test">bounce</p>
		</p>
		<select id="select">
			<optgroup label="Attention Seekers">
				<option value="bounce">bounce</option>
				<option value="flash">flash</option>
				<option value="pulse">pulse</option>
				<option value="rubberBand">rubberBand</option>
				<option value="shake">shake</option>
				<option value="swing">swing</option>
				<option value="tada">tada</option>
				<option value="wobble">wobble</option>
				<option value="jello">jello</option>
			</optgroup>

			<optgroup label="Bouncing Entrances">
				<option value="bounceIn">bounceIn</option>
				<option value="bounceInDown">bounceInDown</option>
				<option value="bounceInLeft">bounceInLeft</option>
				<option value="bounceInRight">bounceInRight</option>
				<option value="bounceInUp">bounceInUp</option>
			</optgroup>

			<optgroup label="Bouncing Exits">
				<option value="bounceOut">bounceOut</option>
				<option value="bounceOutDown">bounceOutDown</option>
				<option value="bounceOutLeft">bounceOutLeft</option>
				<option value="bounceOutRight">bounceOutRight</option>
				<option value="bounceOutUp">bounceOutUp</option>
			</optgroup>

			<optgroup label="Fading Entrances">
				<option value="fadeIn">fadeIn</option>
				<option value="fadeInDown">fadeInDown</option>
				<option value="fadeInDownBig">fadeInDownBig</option>
				<option value="fadeInLeft">fadeInLeft</option>
				<option value="fadeInLeftBig">fadeInLeftBig</option>
				<option value="fadeInRight">fadeInRight</option>
				<option value="fadeInRightBig">fadeInRightBig</option>
				<option value="fadeInUp">fadeInUp</option>
				<option value="fadeInUpBig">fadeInUpBig</option>
			</optgroup>

			<optgroup label="Fading Exits">
				<option value="fadeOut">fadeOut</option>
				<option value="fadeOutDown">fadeOutDown</option>
				<option value="fadeOutDownBig">fadeOutDownBig</option>
				<option value="fadeOutLeft">fadeOutLeft</option>
				<option value="fadeOutLeftBig">fadeOutLeftBig</option>
				<option value="fadeOutRight">fadeOutRight</option>
				<option value="fadeOutRightBig">fadeOutRightBig</option>
				<option value="fadeOutUp">fadeOutUp</option>
				<option value="fadeOutUpBig">fadeOutUpBig</option>
			</optgroup>

			<optgroup label="Flippers">
				<option value="flip">flip</option>
				<option value="flipInX">flipInX</option>
				<option value="flipInY">flipInY</option>
				<option value="flipOutX">flipOutX</option>
				<option value="flipOutY">flipOutY</option>
			</optgroup>

			<optgroup label="Lightspeed">
				<option value="lightSpeedIn">lightSpeedIn</option>
				<option value="lightSpeedOut">lightSpeedOut</option>
			</optgroup>

			<optgroup label="Rotating Entrances">
				<option value="rotateIn">rotateIn</option>
				<option value="rotateInDownLeft">rotateInDownLeft</option>
				<option value="rotateInDownRight">rotateInDownRight</option>
				<option value="rotateInUpLeft">rotateInUpLeft</option>
				<option value="rotateInUpRight">rotateInUpRight</option>
			</optgroup>

			<optgroup label="Rotating Exits">
				<option value="rotateOut">rotateOut</option>
				<option value="rotateOutDownLeft">rotateOutDownLeft</option>
				<option value="rotateOutDownRight">rotateOutDownRight</option>
				<option value="rotateOutUpLeft">rotateOutUpLeft</option>
				<option value="rotateOutUpRight">rotateOutUpRight</option>
			</optgroup>

			<optgroup label="Sliding Entrances">
				<option value="slideInUp">slideInUp</option>
				<option value="slideInDown">slideInDown</option>
				<option value="slideInLeft">slideInLeft</option>
				<option value="slideInRight">slideInRight</option>
			</optgroup>
			
			<optgroup label="Sliding Exits">
				<option value="slideOutUp">slideOutUp</option>
				<option value="slideOutDown">slideOutDown</option>
				<option value="slideOutLeft">slideOutLeft</option>
				<option value="slideOutRight">slideOutRight</option>
			</optgroup>

			<optgroup label="Zoom Entrances">
				<option value="zoomIn">zoomIn</option>
				<option value="zoomInDown">zoomInDown</option>
				<option value="zoomInLeft">zoomInLeft</option>
				<option value="zoomInRight">zoomInRight</option>
				<option value="zoomInUp">zoomInUp</option>
			</optgroup>

			<optgroup label="Zoom Exits">
				<option value="zoomOut">zoomOut</option>
				<option value="zoomOutDown">zoomOutDown</option>
				<option value="zoomOutLeft">zoomOutLeft</option>
				<option value="zoomOutRight">zoomOutRight</option>
				<option value="zoomOutUp">zoomOutUp</option>
			</optgroup>

			<optgroup label="Specials">
				<option value="hinge">hinge</option>
				<option value="jackInTheBox">jackInTheBox</option>
				<option value="rollIn">rollIn</option>
				<option value="rollOut">rollOut</option>
			</optgroup>
		</select>
	</body>

</html>

8.       Wow.js插件

Wow.js是javascript动画插件，经常配合animate.css一起使用。动画效果会在元素第一次出现在页面中时起作用。

 

wow.js:源码版下载

wow.min.js压缩版下载

 

Wow.js的使用方法


  • 引入wow.js

  • 在需要使用的元素上添加class=”wow”

  • 使用js初始化

实例：demo06

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<script src="js/wow.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#content {
				padding-top: 20%;
			}
			
			#test {
				width: 50%;
				line-height: 100px;
				margin: auto;
				background-color: rgba(10, 10, 10, 0.2);
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			var wow = new WOW({
				boxClass: &#39;wow&#39;, // 动画使用的class
				animateClass: &#39;animated infinite&#39;, // 附加的class
				offset: 0, // 当元素进入页面多少位置的时候开始动画，默认0
				mobile: true, // 是否在移动设备上显示动画效果，默认true
				live: true, // 是否异步加载内容，默认true
				callback: function(box) {},
				scrollContainer: null
			});
			wow.init();
		</script>
	</head>

	<body>
		<p id="content">
			<p id="test" class="wow bounce">bounce</p>
		</p>
	</body>

</html>

相关推荐：

vscode(Visual Studio Code)配置PHP开发环境的方法(已测)_编程开发_软件教程








以上是PHP全站開發工程師-擴充之CSS動畫和animate.css和wow.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
高流量網站的PHP性能調整高流量網站的PHP性能調整May 14, 2025 am 12:13 AM

TheSecretTokeEpingAphp-PowerEdwebSiterUnningSmoothlyShyunderHeavyLoadInVolvOLVOLVOLDEVERSALKEYSTRATICES：1）emplactopCodeCachingWithOpcachingWithOpCacheToreCescriptexecution Time，2）使用atabasequercachingCachingCachingWithRedataBasEndataBaseLeSendataBaseLoad，3）

PHP中的依賴注入：初學者的代碼示例PHP中的依賴注入：初學者的代碼示例May 14, 2025 am 12:08 AM

你應該關心DependencyInjection(DI)，因為它能讓你的代碼更清晰、更易維護。 1)DI通過解耦類，使其更模塊化，2)提高了測試的便捷性和代碼的靈活性，3)使用DI容器可以管理複雜的依賴關係，但要注意性能影響和循環依賴問題，4)最佳實踐是依賴於抽象接口，實現鬆散耦合。

PHP性能：是否可以優化應用程序？PHP性能：是否可以優化應用程序？May 14, 2025 am 12:04 AM

是的，優化papplicationispossibleandessential.1）empartcachingingcachingusedapcutorediucedsatabaseload.2）優化的atabaseswithexing，高效Quereteries，and ConconnectionPooling.3）EnhanceCodeWithBuilt-unctions，避免使用，避免使用ingglobalalairaiables，並避免使用

PHP性能優化：最終指南PHP性能優化：最終指南May 14, 2025 am 12:02 AM

theKeyStrategiestosigantificallyBoostPhpaPplicationPerformenCeare：1）UseOpCodeCachingLikeLikeLikeLikeLikeCacheToreDuceExecutiontime，2）優化AtabaseInteractionswithPreparedStateTementStatementStatementAndProperIndexing，3）配置

PHP依賴注入容器：快速啟動PHP依賴注入容器：快速啟動May 13, 2025 am 12:11 AM

aphpdepentioncontiveContainerIsatoolThatManagesClassDeptions，增強codemodocultion，可驗證性和Maintainability.itactsasaceCentralHubForeatingingIndections，因此reducingTightCightTightCoupOulplingIndeSingantInting。

PHP中的依賴注入與服務定位器PHP中的依賴注入與服務定位器May 13, 2025 am 12:10 AM

選擇DependencyInjection(DI)用於大型應用，ServiceLocator適合小型項目或原型。 1)DI通過構造函數注入依賴，提高代碼的測試性和模塊化。 2)ServiceLocator通過中心註冊獲取服務，方便但可能導致代碼耦合度增加。

PHP性能優化策略。PHP性能優化策略。May 13, 2025 am 12:06 AM

phpapplicationscanbeoptimizedForsPeedAndeffificeby：1）啟用cacheInphp.ini，2）使用preparedStatatementSwithPdoforDatabasequesies，3）3）替換loopswitharray_filtaray_filteraray_maparray_mapfordataprocrocessing，4）conformentnginxasaseproxy，5）

PHP電子郵件驗證：確保正確發送電子郵件PHP電子郵件驗證：確保正確發送電子郵件May 13, 2025 am 12:06 AM

phpemailvalidation invoLvesthreesteps：1）格式化進行regulareXpressecthemailFormat; 2）dnsvalidationtoshethedomainhasavalidmxrecord; 3）

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

如何修復KB5055612無法在Windows 10中安裝？
4 週前ByDDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
4 週前By尊渡假赌尊渡假赌尊渡假赌
<🎜>：種植花園 - 完整的突變指南
3 週前ByDDD
北端：融合系統，解釋
4 週前By尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前By尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

SublimeText3 英文版

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）專業的PHP整合開發工具

顯示更多

熱門話題

Java教學
1672
14
CakePHP 教程
1428
52
Laravel 教程
1332
25
PHP教程
1277
29
C# 教程
1257
24
顯示更多