夫妇交换性三中文字幕,成人性做爰aaa片免费看,国产69精品久久久久9999不卡

首頁

web前端

css教程

css3-動畫（animation）效果的實現

青燈夜游

Sep 12, 2018 pm 06:05 PM

animation css3

本章給大家介紹css3-動畫（animation）效果的實現，讓大家了解一個簡單的css3動畫是如何實現的。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

css3-動畫（animation）：

具有以下屬性：

1、animation-name 自定義動畫名稱
2、animation-duration 動畫指定需要多少秒或毫秒完成，默認值是0;
3、animation-timing-function 動畫的時間曲線，linear 勻速， ease 先慢后快，結束前變慢。
4、animation-delay 動畫在啟動前的延遲間隔，默認是0
5、animation-iteration-count 動畫的播放次數，默認是1
6、animation-direction 是否輪流反向播放動畫
7、animation-play-state 動畫是否正在運行或已暫停。值：paused 指定暫停動畫； running 指定正在運行的動畫，默認。

代碼實例（以平移--translate為例說明動畫的整個過程）：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.warp {
				height: 100px;
				width: 100px;
				border: 1px solid #eee;
				background-color: #21B4BB;
				animation-name: moves;
				animation-direction: alternate;
				animation-delay: 0.2s;
				animation-duration: 5s;
				animation-play-state: paused;
				animation-iteration-count: 3;
				/*以上可以簡寫成：*/
				animation: moves 5s linear 0.2s 3;
			}
			
			@keyframes moves {
				/*動畫名稱自定義*/
				10% {
					background-color: #21B4BB;
					/*時間點可以任意，10%表示當時間進行到10%是元素要達到的狀態(tài)*/
					transform: translate(100px, 0);
					-ms-transform: translate(100px, 0);
					/*IE 9*/
					-moz-transform: translate(100px, 0);
					/* Firefox */
					-webkit-transform: translate(100px, 0);
					/* Safari 和 Chrome */
					-o-transform: translate(100px, 0);
					/* Opera */
				}
				30% {
					background-color: #008000;
					/*時間點可以任意*/
					transform: translate(100px, 100px);
					-ms-transform: translate(100px, 100px);
					/*IE 9*/
					-moz-transform: translate(100px, 100px);
					/* Firefox */
					-webkit-transform: translate(100px, 100px);
					/* Safari 和 Chrome */
					-o-transform: translate(100px, 100px);
					/* Opera */
				}
				60% {
					background-color: #444444;
					/*時間點可以任意*/
					transform: translate(0, 100px);
					-ms-transform: translate(0, 100px);
					/*IE 9*/
					-moz-transform: translate(0, 100px);
					/* Firefox */
					-webkit-transform: translate(0, 100px);
					/* Safari 和 Chrome */
					-o-transform: translate(0, 100px);
					/* Opera */
				}
				100% {
					background-color: #70DBDB;
					/*時間點可以任意*/
					transform: translate(0, 0);
					-ms-transform: translate(0, 0);
					/*IE 9*/
					-moz-transform: translate(0, 0);
					/* Firefox */
					-webkit-transform: translate(0, 0);
					/* Safari 和 Chrome */
					-o-transform: translate(0, 0);
					/* Opera */
				}
			}
		</style>
	</head>

	<body>
		<div class="warp">

		</div>
	</body>

</html>

效果圖：

css3-動畫（animation）效果的實現

以上是css3-動畫（animation）效果的實現的詳細內容。更多信息請關注PHP中文網其他相關文章！

本站聲明

本文內容由網友自發(fā)貢獻，版權歸原作者所有，本站不承擔相應法律責任。如您發(fā)現有涉嫌抄襲侵權的內容，請聯(lián)系admin@php.cn

熱AI工具

Undress AI Tool

免費脫衣服圖片

Undresser.AI Undress

人工智能驅動的應用程序，用于創(chuàng)建逼真的裸體照片

AI Clothes Remover

用于從照片中去除衣服的在線人工智能工具。

Clothoff.io

AI脫衣機

Video Face Swap

使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！

熱工具

記事本++7.3.1

好用且免費的代碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6

視覺化網頁開發(fā)工具

SublimeText3 Mac版

神級代碼編輯軟件(SublimeText3)

熱門話題

Laravel 教程

1601

PHP教程

1502

276

Related knowledge

純CSS3怎么實現波浪效果？（代碼示例） Jun 28, 2022 pm 01:39 PM

純CSS3怎么實現波浪效果？本篇文章就來給大家介紹一下使用 SVG 和 CSS 動畫制作波浪效果的方法，希望對大家有所幫助！

如何加速Windows 11中的動畫效果：2種方法解析 Apr 24, 2023 pm 04:55 PM

當微軟推出Windows11時，它帶來了許多變化。其中一項更改是增加了用戶界面動畫的數量。一些用戶想要改變事物的出現方式，他們必須想辦法去做。擁有動畫讓用戶感覺更好、更友好。動畫使用視覺效果使計算機看起來更具吸引力和響應能力。其中一些包括幾秒鐘或幾分鐘后的滑動菜單。計算機上有許多動畫會影響PC性能、減慢速度并影響您的工作。在這種情況下，您必須關閉動畫。本文將介紹用戶可以提高其在PC上的動畫速度的幾種方法。您可以使用注冊表編輯器或您運行的自定義文件來應用更改。如何提高Windows11動畫的

巧用CSS實現各種奇形怪狀按鈕（附代碼） Jul 19, 2022 am 11:28 AM

本篇文章帶大家看看怎么使用 CSS 輕松實現高頻出現的各類奇形怪狀按鈕，希望對大家有所幫助！

如何使用CSS實現元素的旋轉背景圖動畫效果 Nov 21, 2023 am 09:05 AM

如何使用CSS實現元素的旋轉背景圖動畫效果背景圖動畫效果可以增加網頁的視覺吸引力和用戶體驗。本文將介紹如何使用CSS實現元素的旋轉背景圖動畫效果，并提供具體的代碼示例。首先，我們需要準備一張背景圖，可以是任何你喜歡的圖片，例如一張?zhí)柣蛘唠婏L扇的圖片。將該圖片保存并命名為“bg.png”。接下來，創(chuàng)建一個HTML文件，并在文件中添加一個div元素，將其設置為