Schriftreferenzen und Übergangseffekte außerhalb des Systems

Schriftreferenzen und Übergangseffekte außerhalb des Systems

Code kopieren
Der Code lautet wie folgt:

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:14px;">1. Externe Schriftartreferenz: Verwenden Sie font-face, um Schriftarten einzuführen</span></span>


Manchmal müssen wir Schriftarten verwenden, die nicht im System vorhanden sind. Möglicherweise müssen wir auf die Schriftarten verweisen, die wir von außen heruntergeladen haben. Die Methode ist:

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
<title>Schriftartenreferenz</title>
<meta charset="utf-8">
<style type="text/css">
<span style="white-space:pre"> </span>/*Verwenden Sie @font-face, um Schriftarten einzuführen*/
@Schriftart{
Schriftfamilie: heeh;
/*Die folgenden drei Formen sind alle möglich*/
/*src:url("Sansation_Light.ttf");*/
/*src:url('URL-Adresse des Servers.ttf');*/
src:url(Fangzheng Fat Baby vereinfacht.ttf);
}
.tb{
Schriftgröße: 80px;
Farbe: #f40;
Schriftstärke: 300;
<span style="white-space:pre"> </span><span style="white-space:pre"> </span>/*Geben Sie hier den Namen der referenzierten Schriftart an*/
Schriftfamilie: heeh;
}
</Stil>
</Kopf>
<Text>
<h1 Klasse="tb">Taobao</h1>
</body>
</html>


2. Übergangseffekt: Attribut ist Übergang

Wenn die Maus in einen bestimmten Bereich bewegt wird, tritt ein Übergangseffekt auf, bevor der Effekt erzielt wird. wie

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
<title>Übergang</title>
<meta charset="utf-8">
<style type="text/css">
.div_tran{
Breite: 130px;
Höhe: 100px;
/*a in rgba ist Transparenz (Bereich 0~1)*/
Hintergrund: rgba(165,237,15,0,5);
/*Hintergrund: rgb(165,237,15);*/
/*CSS-Transparenzeigenschaft Opazität (Bereich 0~1)*/
Deckkraft: .3;
Farbe: #000;
<span style="white-space:pre"> </span>/*Dieser Kommentar und der folgende Satz sind beide akzeptabel*/
/*-webkit-transition:Breite 2s,Höhe 3s,Hintergrund,Deckkraft 2,5s; */
-webkit-transition:alle 3s;
}
.div_tran:hover{
Breite: 200px;
Höhe: 200px;
Hintergrund: rgb(28,227,209);
Deckkraft: 1;
Farbe: rot;
}
/* Spanne{
Deckkraft: 1;
Position: relativ;
oben: -100px;
}*/
</Stil>
</Kopf>
<Text>
<div Klasse="div_tran">
Übergang
</div>
<!-- <span>Übergang</span> -->
</body>
</html>

<<:  Detaillierte Erklärung des Marquee-Attributs in HTML

>>:  Detaillierte Erklärung des JavaScript-Proxy-Objekts

Artikel empfehlen

So steigern Sie Ihre Web-Performance um das Dreifache, indem Sie einen Parameter in Nginx aktivieren

1. Einige aufgetretene Probleme Ich erinnere mich...

Zusammenfassung der Unterschiede zwischen MySQL-Primärschlüssel und eindeutigem Schlüssel

Was ist ein Primärschlüssel? Ein Primärschlüssel ...

So lösen Sie das Problem zu vieler geöffneter Dateien in Linux

Die Ursache liegt darin, dass der Prozess zu eine...

Win10 verwendet die Tsinghua-Quelle, um die PyTorch-GPU-Version schnell zu installieren (empfohlen)

Überprüfen Sie, ob Ihr CUDA installiert ist Geben...

Vue implementiert den Schnittstellen-Gleiteffekt

In diesem Artikelbeispiel wird der spezifische Co...

Analyse des HTTP-Schnittstellentestprozesses basierend auf Postman

Ich habe zufällig ein tolles Tutorial zum Thema k...

Implementierung der Vue-Nuxt-Anmeldeauthentifizierung

Inhaltsverzeichnis einführen Link Start Gehen Sie...

So verwenden Sie Docker+DockerCompose zum Kapseln von Webanwendungen

Inhaltsverzeichnis Technologie-Stack Backend-Buil...

Neonlichteffekte mit reinem CSS3 umgesetzt

Dies ist der zu erzielende Effekt: Sie können seh...

Div überschreitet den versteckten Text und versteckt den CSS-Code jenseits des Div-Teils

Vor dem Verstecken: Nach dem Verstecken: CSS: Code...

Ein nützliches mobiles Scrolling-Plugin BetterScroll

Inhaltsverzeichnis Machen Sie das Scrollen flüssi...

Über MySQL müssen Sie die Datentypen und Operationstabellen kennen

Datentypen und Operationen Datentabelle 1.1 MySQL...

innodb_flush_method-Wertmethode (Beispielerklärung)

Mehrere typische Werte von innodb_flush_method fs...

Analyse von drei Parametern des MySQL-Replikationsproblems

Inhaltsverzeichnis 01 sql_slave_skip_counter-Para...

Problem mit dem Timeout der Zookeeper-Anforderung in Dubbo: Konfiguration der Verbindung von Mybatis+Spring mit MySQL8.0.15

Ich werde in diesen zwei Tagen Java wiederholen, ...