一、摩天輪構建思路
1、自身繞圓旋轉(修改旋轉軸心)
@keyframes spin
}.box .ball
}.box .ball
.box .inner{
animation:inherit;/*繼承上級的屬性*/
animation-name:spin-reverse;
二、實踐
demo1:
ball
demo2:
ball-3
click me
demo3:
ball-3
click me
quan1:
用到的css3新特性:
pointer-events : auto(啟用事件,預設值)|none(禁用事件)
三、總結
demo1:自身繞圓旋轉,內容不轉
demo2:在demo1的基礎上,新增二個圓圈繞著大圓轉
demo3:在demo2的基礎上做了優化
css 使用css3畫乙個扇形
四個半圓疊加,過半調整 z index container div fan 1,fan 3 fan 2,fan 4 fan 1,fan 2 fan 3,fan 4 fan 4 fan 2 fan 3 keyframes zindex 50 50.000001 to keyframes rotate ...
使用CSS3實現乙個3D相簿
css3系列我已經寫過兩篇文章,感興趣的同學可以先看一下 第一篇主要列出了一些常用或經典的css3技巧和方法 第二篇是乙個用css3實現的立方體例項,詳細講解了3d旋轉和transform等屬性。本文再來利用css3屬性來編寫乙個例項,話不多說,先直接看看效果。因為前面已經講解過一些屬性的用法,此篇...
使用純CSS3實現乙個日食動畫
日食現象是月亮擋在了地球和太陽之間,也就是月亮遮擋住了太陽。所以要構造日食,我們須要2個物件 乙個代表月亮,乙個代表太陽。我們把整個日食過程分解為3個階段 1.緩慢移入 2.短暫停留 3.緩慢移出。在此期間。會產生3個彼此關聯的動畫。首先是月亮的位置移動,我們通過改變月亮的x座標 left或righ...