在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
复制代码 代码如下:<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:14px;">1、外部字体引用:用font-face来引入字体</span></span> 有的时候,会用到一些系统里没有的字体,我们可能需要从外部引用我们下载的字体,方法是: 复制代码 代码如下:<!DOCTYPE html> <html> <head> <title>字体引用</title> <meta charset="utf-8"> <style type="text/css"> <span style="white-space:pre"> </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 style="white-space:pre"> </span><span style="white-space:pre"> </span>/*在这里声明引用字体的名称*/ font-family: heeh; } </style> </head> <body> <h1 class="tb">淘宝</h1> </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 style="white-space:pre"> </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> |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论