|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本章給大家介紹css3-動畫(animation)效果的實現(xiàn),讓大家了解一個簡單的css3動畫是如何實現(xiàn)的。有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。css3-動畫(animation): 具有以下屬性: 1、animation-name 自定義動畫名稱 代碼實例(以平移--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)效果的實現(xiàn)的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!