夜空中最亮的星
我在思考人生
1.transition動畫
站在用戶的角度思考問題,與客戶深入溝通,找到海曙網(wǎng)站設(shè)計與海曙網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個性化、用戶體驗(yàn)好的作品,建站類型包括:做網(wǎng)站、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋海曙地區(qū)。
(1)transition-property 設(shè)置過渡的屬性,比如:width height background-color
(2)transition-duration 設(shè)置過渡的時間,比如:1s 500ms
(3)transition-timing-function 設(shè)置過渡的運(yùn)動方式,常用有l(wèi)inear(勻速)| ease(緩沖運(yùn)動)
(4)transition-delay 設(shè)置動畫的延遲
(5)transition:property duration timing-function delay; 同時設(shè)置
transition動畫
.box{
width: 100px;
height: 100px;
background-color: yellow;
transition: all 500ms ease,background-color 2s ease;
}
.box:hover{
width: 500px;
height: 500px;
background-color: red;
}
例子二:圖片說明文字
圖片
.box{
width: 320px;
height: 405px;
margin: 50px auto 0;
position: relative;
overflow: hidden;
}
.text{
width: 320px;
height: 100px;
position: absolute;
top: 405px;
background-color: rgba(124,119,119,0.30);
transition: all 500ms ease;
}
.box:hover .text{
position: absolute;
top: 305px;
}
夜空中最亮的星
我在思考人生
例子三:夏目
joke @keyframes joke{ from{ left: 0px; } to{ left: -2136px; /*圖片寬度*/ } } .box{ width: 534px; height: 300px; margin: 50px auto; overflow: hidden; position: relative; } .box img{ position: absolute; animation: joke 1s steps(4) infinite; }
本文標(biāo)題:CSS3transition動畫
網(wǎng)站URL:http://weahome.cn/article/jjphoc.html