Beispielcode zur Implementierung von CSS-Text, der in Kraft tritt
Dieser Artikel implementiert den in Kraft tretenden CSS-Text-Beispielcode
1 Das Hauptlayout der Seite
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>左右淡入的企业介绍</title>
<link type="text/css" rel="stylesheet" href="css/animate.css" />
</head>
<body>
<div class="company">
<h2 class="company_name">上海世茂集团企业招聘</h2>
<h5 class="company_introduce">世茂集团，是以房地产开发为主的国际化企业集群，房地产界领袖企业之一。</h5>
</div>
</body>
</html>
上面就不用说了吧~~~~就四句话布局就完成了~~~我实在太懒了，一个多余的美观性布局我都不愿意写QAQ，最直接的代码是为了方便我以后复制。
二、CSS样式（主要是CSS3）
body{
overflow: hidden; /*此处需要设置溢出隐藏，否则文字起始位移超过页面大小就会在页面下方出现横的滚动条*/
}
.company{
width: 400px;
margin: 0 auto;
border: 1px #999999 solid;
}
/*定义一个名字为lefteaseinAnimate动画，实现从页面的左边淡入页面效果*/
@keyframes lefteaseinAnimate{
0%{ transform: translateX(-2000px); opacity: 0;} /*在0%时设置文字在想X轴-2000px位移处（左边），透明度为0，也就是看不见文字*/
100%{ transform: translateX(0px); opacity: 1;} /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
@-webkit-keyframes lefteaseinAnimate{
0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-o-keyframes lefteaseinAnimate{
0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-ms-keyframes lefteaseinAnimate{
0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-moz-keyframes lefteaseinAnimate{
0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
.company_name{
animation: lefteaseinAnimate 1s ease 1; /*调用已定义好的动画lefteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
-webkit-animation: lefteaseinAnimate 1s ease 1;
-ms-animation: lefteaseinAnimate 1s ease 1;
-o-animation: lefteaseinAnimate 1s ease 1;
-moz-animation: lefteaseinAnimate 1s ease 1;
/*规定动画的最后状态为结束状态*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
/*定义一个名字为righteaseinAnimate动画，实现从页面的右边淡入页面效果*/
@keyframes righteaseinAnimate{
0%{ transform: translateX(2000px); opacity: 0;} /*在0%时设置文字在想X轴2000px位移处（右边），透明度为0，也就是看不见文字*/
100%{ transform: translateX(0px); opacity: 1;} /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
@-webkit-keyframes righteaseinAnimate{
0%{ -webkit-transform: translateX(2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-o-keyframes righteaseinAnimate{
0%{ -webkit-transform: translateX(2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-ms-keyframes righteaseinAnimate{
0%{ -webkit-transform: translateX(2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-moz-keyframes righteaseinAnimate{
0%{ -webkit-transform: translateX(2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
.company_introduce{
animation: righteaseinAnimate 1s ease 1; /*调用已定义好的动画righteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
-webkit-animation: righteaseinAnimate 1s ease 1;
-moz-animation: righteaseinAnimate 1s ease 1;
-ms-animation: righteaseinAnimate 1s ease 1;
-o-animation: righteaseinAnimate 1s ease 1;
/*规定动画的最后状态为结束状态*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}Es ist zu beachten, dass Sie einen Überlauf hinzufügen müssen: ; Überlauf ausblenden am Anfang festlegen, andernfalls wird am unteren Rand der Seite eine horizontale Bildlaufleiste angezeigt, wenn die Anfangsverschiebung des Textes die Seitengröße überschreitet
Das obige ist der detaillierte Inhalt vonBeispielcode zur Implementierung von CSS-Text, der in Kraft tritt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1392
52
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
