Font references and transition effects outside the system

Copy code

The code is as follows:

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:14px;">1. External font reference: use font-face to introduce fonts</span></span>

Sometimes, we need to use some fonts that are not in the system. We may need to reference the fonts we downloaded from the outside. The method is:

Copy code

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>Font Reference</title>
<meta charset="utf-8">
<style type="text/css">
<span style="white-space:pre"> </span>/*Use @font-face to introduce fonts*/
@font-face{
font-family: heeh;
/*The following three forms are all possible*/
/*src:url("Sansation_Light.ttf");*/
/*src:url('简娃娃篆.ttf');*/
src:url(Fangzheng Fat Baby Simplified.ttf);
}
.tb{
font-size: 80px;
color: #f40;
font-weight: 300;
<span style="white-space:pre"> </span><span style="white-space:pre"> </span>/*Declare the name of the referenced font here*/
font-family: heeh;
}
</style>
</head>
<body>
<h1 class="tb">Taobao</h1>
</body>
</html>

2. Transition effect: attribute is transition

When the mouse moves to a certain area, a transition effect occurs before the effect is achieved. like

Copy code

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>transiton</title>
<meta charset="utf-8">
<style type="text/css">
.div_tran{
width: 130px;
height: 100px;
/*a in rgba is transparency (range 0~1)*/
background: rgba(165,237,15,0.5);
/*background: rgb(165,237,15);*/
/*css transparency property opacity (range 0~1)*/
opacity: .3;
color: #000;
<span style="white-space:pre"> </span>/*This comment and the following sentence are both acceptable*/
/*-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>

</body>
</html>

<<: Detailed explanation of the marquee attribute in HTML

>>: Detailed explanation of JavaScript Proxy object

Docker runs operations with specified memory

Font references and transition effects outside the system

Docker runs operations with specified memory

JavaScript array reduce() method syntax and example analysis

How to solve the problem that mysql cannot be closed

Detailed explanation of the use of Vue card-style click-to-switch image component

WeChat applet realizes the effect of swiping left to delete list items

Implementing a simple student information management system based on VUE

JavaScript implements circular progress bar effect

Solution to the initialization error when installing mysql5.7 from rpm package in centos6.5

Canvas draws scratch card effect

How to solve the high concurrency problem in MySQL database

Recommend

The combination and difference between ENTRYPOINT and CMD in dockerfile

Fixed table width table-layout: fixed

Detailed graphic tutorial on how to enable remote secure access with Docker

WeChat Mini Program Lottery Number Generator

Detailed example of using typescript to encapsulate axios in Vue3

Some notes on installing fastdfs image in docker

Use of hasOwnProperty method of js attribute object

React implements the principle analysis of the three stages of loading, loading, completion, loading failure

Example code for implementing ellipse trajectory rotation using CSS3

Solution to the ineffective margin of div nested in HTML

wget downloads the entire website (whole subdirectory) or a specific directory

JavaScript Basics Variables

Detailed explanation of Nginx's control over access volume

How to implement Ajax concurrent request control based on JS

Content-type description, that is, the type of HTTP request header