H5頁面利用css3動畫以及定時器製作動畫效果

2021-10-03 14:04:52 字數 2239 閱讀 1938

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

/>

src=

"">

script

>

src=

"">

script

>

>

女神節快樂title

>

>

[v-cloak]

*body

#vue

.sreem

.wenzi

.nvshen

.wenzitwo

.wenzitwoa

.wenzitwob

.wenzitwoc

.wenzitwod

.tupian

/* 動畫 */

/* 從top:100%過渡到top:40%,從透明到出現*/

@keyframes nsmymove_ato}

@keyframes nsmymove_bto}

@keyframes wzmymove_ato}

@keyframes wzmymove_bto}

@keyframes wzmymove_cto}

@keyframes tpmoveto}

style

>

head

>

>

v-cloakid=

"vue"

>

class

="sreem"

>

class

="wenzi"

>

class

="nvshen"

>

女神節快樂span

>

div>

class

="wenzitwo"

>

class

="wenzitwoa"

>

2020span

>

class

="wenzitwob"

>

你的美貌span

>

class

="wenzitwoc"

>

繼續營業span

>

class

="wenzitwod"

>

祝願你span

>

div>

class

="tupian"

:src

="bjimg"

alt="

">

div>

div>

body

>

>

newvue(,

methods:

,7000);

//七秒之後執行此操作,將新的動畫寫入div中。

settimeout

(function()

,9000);

settimeout

(function()

,14000);

settimeout

(function()

"// that.bjimg = ""$(

".tupian").

css(

"animation"

,"tpmove 2s ease-in-out 0s 1 alternate forwards")}

,16000);

},// wenzitwoanm() },

created()

, //傳值給後台

// datatype: "json",

// success: function (res) ,

// });

// axios.get('你的介面',

// })

// .then(function (res) )

// .catch(function (error) );}}

)script

>

html

>

h5頁面開發

相信大家在做h5頁面開發的時候,也會遇到一些問題。筆者將h5開發過程中常見的一些問題和解決辦法列舉出來,有需要的朋友可以參考一下。1.安卓瀏覽器看背景,有些裝置會模糊。同等比例的在pc端頁面和移動手機端頁面的解析度差很多,原因和devicepixelratio有關。手機解析度比pc端的解析度小,按照...

H5頁面內使用JSON動畫

這時候設計師甩了乙個鏈結給我,看這裡lottie web 我點進去了解了一下,是airbnb開源的乙個動畫庫,該庫可以完成很多酷炫動畫,使用起來也很簡單,設計師只需要通過ae做成的動畫匯出json檔案,然後前端使用lottie直接載入json檔案生成動畫,既不需要設計師切n多gif,也不需要前端去進...

H5及H5頁面是什麼意思?如何製作H5頁面?

h5是html5的簡稱。html5是html最新的修訂版本,是一種超文字標記語言。h5有兩大特點 首先,強化了 web 網頁的表現效能。其次,追加了本地資料庫等 web 應用的功能。第二步 選擇 高階模式 點 建立應用。第三步 進入製作頁面。九個控制項,通過點選新增到製作介面,控制項的選擇使用按照你...