雷速体育网页版:

您的位置:雷速体育答题测试答案 > div+css > css3動畫屬性的使用

css3動畫屬性的使用

時間:2018-01-31 22:00:45  來源:免費模板網 作者:風雪 閱讀次數 tagscss3動畫

通過 CSS3,我們能夠創建動畫,這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。


CSS3 @keyframes 規則

如需在 CSS3 中創建動畫,您需要學習 @keyframes 規則。

@keyframes 規則用于創建動畫。在 @keyframes 中規定某項 CSS 樣式,就能創建由當前樣式逐漸改為新樣式的動畫效果。

1.png

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。

Chrome 和 Safari 需要前綴 -webkit-。

注釋:Internet Explorer 9,以及更早的版本,不支持 @keyframe 規則或 animation 屬性。

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}


什么是 CSS3 中的動畫?

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

您可以改變任意多的樣式任意多的次數。

請用百分比來規定變化發生的時間,或用關鍵詞 "from" 和 "to",等同于 0% 和 100%。

0% 是動畫的開始,100% 是動畫的完成。

為了得到最佳的瀏覽器支持,您應該始終定義 0% 和 100% 選擇器。

實例

當動畫為 25% 及 50% 時改變背景色,然后當動畫 100% 完成時再次改變:











注釋:當動畫完成時,會變回初始的樣式。

注釋:本例在 Internet Explorer 中無效。

{ganrao} 在家兼职网赚 最新棋牌? 天天捕鱼赢话费hd 上海天天彩4d开奖 哈尔滨麻将机 中超转播表 网赚任务平台 手机麻将游戏排行榜 海王3海王觉醒捕鱼安卓版 qq分分彩平台 捉鸡麻将技巧顺口溜 游戏捕鱼大亨2 怎样通过网络赚钱 516棋牌游戏中心首页 中超转会 互联网哪个平台最赚钱


本文地址://www.384142.live/bjrm/2018/0131/2953.html

猜你喜歡
欄目推薦
模板推薦

Copyright:雷速体育答题测试答案 www.384142.live 免費模板網 All Rights Reserved 雷速体育答题测试答案   遼公網安備 21010602000376號  遼公網安備:42900402000182號

免責聲明:本站部分資源來自互聯網收集,版權歸原創者所有,如果侵犯了你的權益,我們會及時刪除侵權內容,聯系QQ:1615187561 謝謝合作!