How to realize the font reference and transition effect outside the system
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!
