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>

</body>
</html>

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

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

Beispielcode von layim zum Integrieren des Rechtsklickmenüs in JavaScript

Schriftreferenzen und Übergangseffekte außerhalb des Systems

Beispielcode von layim zum Integrieren des Rechtsklickmenüs in JavaScript

Analyse der Methoden zur visuellen Strukturierung und Gestaltung von Kinder-Websites

Lösung für Ubuntu, das keine Verbindung zum Internet herstellen kann

Verwenden Sie das NJS-Modul, um JS-Skripte in die Nginx-Konfiguration einzuführen

Zusammenfassung der Wissenspunkte des Datenbankindex

So verbessern Sie die MySQL Limit-Abfrageleistung

Vue implementiert die Countdown-Komponente für zweite Kills

Detaillierte Analyse der MySQL-Abfrageabfangung

React implementiert ein allgemeines Beispiel für eine Skelett-Bildschirmkomponente

Eine kurze Diskussion über drei Methoden der asynchronen Replikation in MySQL 8.0

Artikel empfehlen

Beispielcode zur Implementierung der Schnittstellensignatur mit Vue+Springboot

CSS-Code zum Erstellen von 10 modernen Layouts

Zwei Möglichkeiten zur Implementierung von Square Div mit CSS

Remote-Entwicklung mit VSCode und SSH

Detaillierte Erklärung zum MySQL-Index

Der Unterschied zwischen dem Namen und der ID des Ziels eines Tags, das auf das Iframe verweist

Nodejs implementiert Intranet-Penetrationsdienst

JavaScript zählt, wie oft ein Zeichen vorkommt

Studieren Sie die Verwendung von Zeichen anstelle von Bildern, um abgerundete oder scharfe Ecken zu erzielen

MySQL-Abfrage redundanter Indizes und ungenutzter Indexoperationen

Nginx-Signalsteuerung

Das Prinzip und die Implementierung des JS-Drag-Effekts

Detaillierte Erläuterung der Installation, Bereitstellung und Verwendung von Nginx unter Linux

JavaScript-Objekte (Details)

Tutorial zur Installation von MySQL8 auf Centos7