CSS 動畫 實現點的動態縮放閃爍

2021-08-26 05:15:19 字數 1109 閱讀 4372

animation:a1, a2 , a3 ;

a1為通過@keyframes 規則建立的動畫名稱,可自己定義

a2 為動畫時常 ,例如:1s   2s   可自行規定

a3 為css自帶的動畫效果,有如下幾個:

linear

以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1))。(勻速)

ease

規定慢速開始,然後變快,然後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))

ease-in

規定以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1))(相對於勻速,開始的時候慢,之後快)。

ease-out

規定以慢速結束的過渡效果(等於 cubic-bezier(0,0,0.58,1))(相對於勻速,開始時快,結束時候間慢,)。

ease-in-out

規定以慢速開始和結束的過渡效果(等於 cubic-bezier(0.42,0,0.58,1))(相對於勻速,(開始和結束都慢)兩頭慢)。

cubic-bezier(n,n,n,n)

在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。

了解這些以後,開始模仿乙個點的閃爍動畫:

在css檔案裡定義 .dynamic_plot  類:

-webkit-animation     -moz-animation     來相容瀏覽器

.dynamic_plot
可以看到,在aniamtion 裡,呼叫了warn方法,就要在@keyframes  裡定義warn方法:

@keyframes warn

在warn方法裡

0% 是動畫的開始,100% 是動畫的完成,建議使用百分比,會更加詳細:

動態效果:

@keyframes warn 

75%

50%

25%

0% }

這裡新增了五次,可根據需求更改,效果為由大到小縮成乙個點,點的大小在之前.dynamic_plot類裡定義, 通過修改warn裡各個百分比的效果,改變閃爍效果。

乙個簡單的CSS圓形縮放動畫

網易新聞的分享按鈕hover效果 新聞頁面 看了一下這兩個頁面的原始碼,主要是用了transform scale 和transition,自己的最終的實現效果如下 實現思路大體是模仿網易新聞的,布局如下 class third party third party weixin 複製 外層的a標籤用於...

css3的動畫實現

關鍵幀 keyframes 動畫名稱 20 40 60 80 100 animation name 定義乙個或者多個動畫的名稱 eg demo animation duration 動畫執行的時間 取值 0時,動畫不執行 time 正數 單位為s或者ms animation delay 動畫執行的延...

基於css的簡單動畫實現

先簡單說說transform,對元素進行移動 translate 旋轉 rotate 翻轉 skew 縮放 scale translate是transform的乙個屬性而已。再者就是transition,指定了某乙個屬性 如width left transform等 在兩個值之間如何過渡,需要手動觸...