|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于css中動畫屬性的實現方法(附代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。一、css動畫(animation)屬性可以逐漸地從一個值變化到另一個值,比如尺寸大小、數量、百分比、位置和顏色。 二、實現方法: 1.定義動畫(slideOut為自定義的動畫名稱) @-webkit-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@-moz-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@-o-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@-ms-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}2、調用動畫 -webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards; -moz-animation: slideOut 0.5s ease-in-out 0.3s backwards; -o-animation: slideOut 0.5s ease-in-out 0.3s backwards; -ms-animation: slideOut 0.5s ease-in-out 0.3s backwards; animation: slideOut 0.5s ease-in-out 0.3s backwards; 三、動畫用到的屬性有background/border/border/box-shadow/clip/color/column/filter/flex/font/letter-spacing/line-height/margin/opacity/outline/perspective/text/vertical-align/visibility/word-spacing/z-index等等,基本上所以元素了。 相關推薦: CSS動畫之Tranistion_html/css_WEB-ITnose 以上就是css中動畫屬性的實現方法(附代碼)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!