如何實(shí)現(xiàn)系統(tǒng)之外的字體引用及過(guò)渡效果

發(fā)布時(shí)間：2021-09-29 15:25:44 來(lái)源：億速云閱讀：96 作者：iii 欄目：移動(dòng)開(kāi)發(fā)

這篇文章主要講解了“如何實(shí)現(xiàn)系統(tǒng)之外的字體引用及過(guò)渡效果”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何實(shí)現(xiàn)系統(tǒng)之外的字體引用及過(guò)渡效果”吧！

代碼如下:

<span ><span >1、外部字體引用：用font-face來(lái)引入字體</span></span>

有的時(shí)候，會(huì)用到一些系統(tǒng)里沒(méi)有的字體，我們可能需要從外部引用我們下載的字體，方法是：

代碼如下:

<!DOCTYPE html>
<html>
<head>
<title>字體引用</title>
<meta charset="utf-8">
<style type="text/css">
<span > </span>/*用@font-face來(lái)引入字體*/
@font-face{
font-family: heeh;
/*yi下三種形式都是可以的*/
/*src:url("Sansation_Light.ttf");*/
/*src:url('簡(jiǎn)娃娃篆.ttf');*/
src:url(方正胖娃簡(jiǎn)體.ttf);
}
.tb{
font-size: 80px;
color: #f40;
font-weight: 300;
<span > </span><span > </span>/*在這里聲明引用字體的名稱(chēng)*/
font-family: heeh;
}
</style>
</head>
<body>
<h2 class="tb">淘寶</h2>
</body>
</html>

2、過(guò)渡效果:屬性為transition

在鼠標(biāo)移動(dòng)到某一塊的時(shí)候，在達(dá)到效果之前的一個(gè)過(guò)渡效果。如

代碼如下:

<!DOCTYPE html>
<html>
<head>
<title>transiton(過(guò)渡)</title>
<meta charset="utf-8">
<style type="text/css">
.div_tran{
width: 130px;
height: 100px;
/*rgba中的a是透明度（范圍0~1）*/
background: rgba(165,237,15,0.5);
/*background: rgb(165,237,15);*/
/*css的透明屬性opacity（范圍0~1）*/
opacity: .3;
color: #000;
<span > </span>/*注釋的這句和下面一句都可以*/
/*-webkit-transition:width 2s,height 3s,background,opacity 2.5s; */
-webkit-transition:all 3s;
}
.div_tran:hover{
width: 200px;
height: 200px;
background: rgb(28,227,209);
opacity: 1;
color: red;
}
/* span{
opacity: 1;
position: relative;
top: -100px;
}*/
</style>
</head>
<body>
<div class="div_tran">
transiton(過(guò)渡)
</div>

</body>
</html>

感謝各位的閱讀，以上就是“如何實(shí)現(xiàn)系統(tǒng)之外的字體引用及過(guò)渡效果”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何實(shí)現(xiàn)系統(tǒng)之外的字體引用及過(guò)渡效果這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

如何實(shí)現(xiàn)系統(tǒng)之外的字體引用及過(guò)渡效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽