Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to achieve font reference and transition effect outside the system". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. let's study and learn "how to achieve font reference and transition effect outside the system".

The code is as follows:

1. External font reference: use font-face to introduce fonts

Sometimes, we will use fonts that are not available in the system, and we may need to refer to the fonts we downloaded externally by:

The code is as follows:

Font reference

/ * use @ font-face to introduce fonts * /

@ font-face {

Font-family: heeh

/ * all three forms of yi are OK * /

/ * src:url ("Sansation_Light.ttf"); * /

/ * src:url ('Jian Wawa Zhuan .ttf'); * /

Src:url (Fang Zheng Pangwa simplified .ttf)

}

.tb {

Font-size: 80px

Color: # f40

Font-weight: 300

/ * declare the name of the referenced font here * /

Font-family: heeh

}

Taobao

2. Transition effect: attribute is transition

A transition effect before the effect is achieved when the mouse is moved to a certain area. Such as

The code is as follows:

Transiton (transition)

.div _ tran {

Width: 130px

Height: 100px

/ * An in rgba is transparency (range 0: 1) * /

Background: rgba (165, 237, 15, 0.5)

/ * background: rgb (165, 277, 15); * /

/ * transparency attribute opacity of css (range 031) * /

Opacity:. 3

Color: # 000

/ * both the annotated sentence and the following sentence are fine * /

/ *-webkit-transition:width 2sMagneHeigh 3sBackgroundrecoveryopacity 2.5s; * /

-webkit-transition:all 3s

}

.div _ tran:hover {

Width: 200px

Height: 200px

Background: rgb (28227209)

Opacity: 1

Color: red

}

/ * span {

Opacity: 1

Position: relative

Top:-100px

} * /

Transiton (transition)

Thank you for your reading, the above is the content of "how to achieve font references and transition effects outside the system". After the study of this article, I believe you have a deeper understanding of how to achieve font references and transition effects outside the system, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.