亚洲精品久久久久久第一页-人妻少妇精彩视品一区二区三区-91国产自拍免费视频-免费一级a在线播放视频正片-少妇天天日天天射天天爽-国产大屁股喷水视频在线观看-操美女骚穴抽插性爱视频-亚洲 欧美 中文字幕 丝袜-成人免费无码片在线观看

  1. 首頁 > 生活知識 > >

html簡單彈窗代碼分享 html動畫效果有哪些

生活百科

這次我們展示多個(gè)圖標(biāo)動畫特效！上次有人在問，為什么不寫 font-family，就調(diào)用不了圖標(biāo) 。很簡單，你在 @font-face 中，指定 font-family 名字為 ‘FishC-icon’;
@font-face {
font-family:’FishC-icon’;
src: url(‘font/icons.ttf’), url(‘font/icons.eot’), url(‘font/icons.woff’), url(‘font/icons.svg’);
}
那么在偽元素中就要告訴腳本，勞資就用’FishC-icon’里的圖標(biāo)！
這次因?yàn)橛卸鄠€(gè)動畫對象 ， 所以用延遲參數(shù)形成動畫序列，先寫 5 個(gè) div 吧
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>圖標(biāo)元素2</title>
<style type=”text/css”>
@font-face {
font-family:’FishC-icon’;
src: url(‘font/icons.ttf’), url(‘font/icons.eot’), url(‘font/icons.woff’), url(‘font/icons.svg’);
}
.icon{
display: inline-block;
margin-right: 33px;
}
.android::before{
content: “\e65f”;
font-size: 66px;
font-family: ‘FishC-icon’;
}
.app::before{
content: “\e660”;
font-size: 66px;
font-family: ‘FishC-icon’;
}
.page::before{
content: “\e64d”;
font-size: 66px;
font-family: ‘FishC-icon’;
}
.show::before{
content: “\e647”;
font-size: 66px;
font-family: ‘FishC-icon’;
}
.victor::before{
content: “\e648”;
font-size: 66px;
font-family: ‘FishC-icon’;
}
</style>
</head>
<body>
<div class=”android icon”>Android</div>
<div class=”app icon”>Apple</div>
<div class=”page icon”>Page</div>
<div class=”show icon”>Show</div>
<div class=”victor icon”>Victor</div>
</body>
</html>
效果圖：

html簡單彈窗代碼分享 html動畫效果有哪些

文章插圖
此時(shí)由于沒有隱藏文字 ， 這是上一講的點(diǎn)睛之筆  ， 有興趣自己去找 。但不同之處在于此處的圖標(biāo)都設(shè)置為“inline-block”，使之能夠橫向排列 。現(xiàn)在修改樣式
.icon{
display: inline-block;
cursor: help;
width: 111px;
height: 111px;
font-size: 0px;
line-height: 100px;
border-radius: 50%;/*圓框*/
background:#7FE;
color: #000;
text-align: center;
animation:move 1s
}
效果圖：
html簡單彈窗代碼分享 html動畫效果有哪些

文章插圖
例如，使圖標(biāo)位置向下偏移 -100% 。
然后在向上移動回到初始位置，此過程中讓圖標(biāo)從完全透明化變?yōu)橥耆煌该?。
@keyframes move{
from{
opacity: 0;
transform: translateY(100%);
}
to{
opacity: 1;
transform: translateY(0%);
}
}
效果圖：
html簡單彈窗代碼分享 html動畫效果有哪些

文章插圖
利用 transform 屬性的 translateY 方法來實(shí)現(xiàn)圖標(biāo)的向下偏移 。
然后使用 opacity 屬性設(shè)置圖標(biāo)的透明度，0.0 （完全透明）到 1.0（完全不透明） 。
由于未設(shè)置單個(gè)圖標(biāo)的延遲 ， 所以一下子 5 個(gè)同時(shí)出現(xiàn) 。
既然提到了延遲，那就設(shè)置一下咯～
使用 animation-delay 屬性設(shè)置延遲：
.android{
animation-delay: 0s;
}
.app{
animation-delay: .3s;
}
.page{
animation-delay: .6s;
}
.show{
animation-delay: 1.2s;
}
.victor{
animation-delay: 1.5s;
}
效果圖：
html簡單彈窗代碼分享 html動畫效果有哪些

文章插圖
光這么直棱棱也不好玩 。
然后我們自己設(shè)置貝塞爾（cubic-bezier）速度曲線，達(dá)到不同速率節(jié)奏效果 ～
假設(shè)你穿越成功，會看到：
html簡單彈窗代碼分享 html動畫效果有哪些

文章插圖
拖動粉點(diǎn)（起始點(diǎn)），藍(lán)點(diǎn)（終點(diǎn)）即可以生成坐標(biāo) 。
html簡單彈窗代碼分享 html動畫效果有哪些

文章插圖
生成的結(jié)果為 cubic-bezier(.86,.15,.18,.9) 。
.icon{
animation-fill-mode: both;
animation: move 2s cubic-bezier(.86,.15,.18,.9);
}
效果圖：
html簡單彈窗代碼分享 html動畫效果有哪些

文章插圖
其中 animation-fill-mode 屬性用來屬性規(guī)定動畫在播放之前或之后，其動畫效果是否可見 。。
html簡單彈窗代碼分享 html動畫效果有哪些

文章插圖
【html簡單彈窗代碼分享 html動畫效果有哪些】設(shè)置完成后 ， 防止圖標(biāo)閃現(xiàn) 。


    以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時(shí)就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!

    「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：