用css給小程式畫個簡單寫輪眼

2021-10-04 17:54:21 字數 1318 閱讀 1560

之前看到過乙個h5的迷幻動畫,正好今天有時間,把這個也簡單畫了一下。

重複建立幾個view,每個view為之前90%大小,並居中

為預期轉動的view設定css動畫

實際就上面兩點,很簡單。

看一下實際的**:

wxml:

class

="container"

>

class

="square"

>

class

="square black"

>

class

="square"

>

class

="square black"

>

class

="square"

>

class

="square black"

>

class

="square"

>

class

="square black"

>

class

="square"

>

class

="square black"

>

class

="square"

>

class

="square black"

>

view

>

view

>

view

>

view

>

view

>

view

>

view

>

view

>

view

>

view

>

view

>

view

>

view

>

wxss:

.container

.square

.black

@keyframes rotate

50%100%

}

稍作一下改動,比如說改動一下view大小,變成橢圓,就可以變成下面的效果:

簡單的用CAShapeLayer畫個圈

首先看一下效果圖 這裡只需要兩個圖層。乙個cashapelayer和乙個cagradientlayer物件。通過貝塞爾曲線畫乙個圓,並設定為shapelayer的path。strokecolor表示填充顏色,fillcolor表示邊界的顏色。linewidth表示線寬。這裡主要要設定起始點,這裡區間...

前端雜談 利用CSS給女朋友畫個口鍋

本專案 來自 css3藝術 網頁設計案例實戰 效果圖 該蒸鍋大體上分為鍋身和鍋蓋兩個部分,通過觀察可以得知 1.其鍋身上有把手 2.鍋蓋上有提鈕 3.鍋身和鍋蓋上都有白色的光影 利用偽元素相關知識,可以將dom結構設計如下 所示,鍋身和鍋蓋分別是兩個元素,然後與鍋身相關的把手 光影,以及與鍋蓋相關的...

乙個簡單小程式

實現這麼乙個程式 從磁碟上讀取檔案,對檔案內容解析,解析出兩個加數,生成乙個可以執行加法運算的動態庫,呼叫該動態庫進行加法計算,再將計算結果寫入共享記憶體,然後建立子程序,子程序進行程式替換,替換的程式要完成的任務就是將共享記憶體中的內容重新寫回磁碟上的該檔案,記得使用共享記憶體時要借助訊號量保證互...