溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“如何實現系統之外的字體引用及過渡效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何實現系統之外的字體引用及過渡效果”吧！
代碼如下:
<span ><span >1、外部字體引用：用font-face來引入字體</span></span>
有的時候，會用到一些系統里沒有的字體，我們可能需要從外部引用我們下載的字體，方法是：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>字體引用</title>
<meta charset="utf-8">
<style type="text/css">
<span > </span>/*用@font-face來引入字體*/
@font-face{
font-family: heeh;
/*yi下三種形式都是可以的*/
/*src:url("Sansation_Light.ttf");*/
/*src:url('簡娃娃篆.ttf');*/
src:url(方正胖娃簡體.ttf);
}
.tb{
font-size: 80px;
color: #f40;
font-weight: 300;
<span > </span><span > </span>/*在這里聲明引用字體的名稱*/
font-family: heeh;
}
</style>
</head>
<body>
<h2 class="tb">淘寶</h2>
</body>
</html>
2、過渡效果:屬性為transition
在鼠標移動到某一塊的時候，在達到效果之前的一個過渡效果。如
代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>transiton(過渡)</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(過渡)
</div>
<!-- <span>transiton(過渡)</span> -->
</body>
</html>
感謝各位的閱讀，以上就是“如何實現系統之外的字體引用及過渡效果”的內容了，經過本文的學習后，相信大家對如何實現系統之外的字體引用及過渡效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
