十三年專注于網(wǎng)站建設(shè)與互聯(lián)網(wǎng)應(yīng)用開發(fā)，
全國服務(wù)熱線：
? ? ? ?一、animation介紹
? ? ? ?animation 屬性是一個簡寫屬性，用于設(shè)置六個動畫屬性：
? ? ? ?值描述?
? ? ? ?animation-name規(guī)定需要綁定到選擇器的keyframe名稱animation-duration規(guī)定完成動畫所花費的時間，以秒或毫秒計animation-timing-function規(guī)定動畫的速度曲線animation-delay 規(guī)定在動畫開始之前的延遲animation-iteration-count規(guī)定動畫應(yīng)該播放的次數(shù)animation-direction規(guī)定是否應(yīng)該輪流反向播放動畫。
? ? ? ?二、translate介紹
? ? ? ?translate3d(x,y,z)定義3D縮放轉(zhuǎn)換。rotate3d(x,y,z,angle)定義3D旋轉(zhuǎn)。
? ? ? ?translate3d(1,1,0)
? ? ? ?你可以理解為（左右，上下，大小）變化。
? ? ? ?rotate3d(1,1,0,45deg)
? ? ? ?三、實現(xiàn)方法
? ? ? ?1、兩朵云除了大小和初始位置不通，其他都相同。
? ? ? ?code
? ? ? ?.cloud {
? ? ? ?position: absolute;
? ? ? ?z-index: 3;
? ? ? ?width:99px;height:64px; top: 0;?
? ? ? ?right: 0;
? ? ? ?bottom: 0;
? ? ? ?animation: cloud 5s linear infinite;
? ? ? ?}
?
? ? ? ?@keyframes cloud {
? ? ? ?from {
? ? ? ?transform: translate3d(-125rpx, 0, 0);
? ? ? ?}
?
? ? ? ?to {
? ? ? ?transform: translate3d(180rpx, 0, 0);
? ? ? ?}
? ? ? ?}
? ? ? ?其中rpx是微信特有的屬性，不受屏幕大小的影響，類似于安卓中的dp單位。keyframes是勻速移動，從css里可以看到只改變了左右方向。
贛公網(wǎng)安備 36010202000052號
售前咨詢