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 應用的功能。第二步 選擇 高階模式 點 建立應用。第三步 進入製作頁面。九個控制項,通過點選新增到製作介面,控制項的選擇使用按照你...