外部字体引用、过渡效果

来源：互联网发布：jsp java数组类型转换编辑：程序博客网时间：2024/05/22 04:36

<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>

0 0