使用css3構建乙個摩天輪旋轉

2021-08-21 06:24:00 字數 594 閱讀 8840

一、摩天輪構建思路

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...