Web-Frontend
CSS-Tutorial
Code-Sharing mit CSS3, um den Animationseffekt eines Kreises zu realisieren, der sich von der Mitte in die Umgebung ausbreitet
Code-Sharing mit CSS3, um den Animationseffekt eines Kreises zu realisieren, der sich von der Mitte in die Umgebung ausbreitet
Nehmen wir zunächst ein einfaches Beispiel, zum Beispiel:
@
key
frames hovertreemove
{
from {
top
:30px;}
to {top:130px;}
}Sie können Animationen über die @keyframes-Regel erstellen.
Animationen werden erstellt, indem nach und nach ein Satz von CSS-Stilen in einen anderen geändert wird.
Sie können diesen Satz CSS-Stile während der Animation mehrmals ändern.
Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen.
0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation.
Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.
Das Folgende ist der Code für die Auf- und Abbewegung:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3使用animation和@keyframes制作动画_何问起</title>
<meta charset="utf-8" />
<style>@keyframes hovertreemove{from {top:30px;}to {top:130px;}}
#hovertreekf{
width:80px;height:80px;
border:1px solid red;
position:absolute;
background:url(http://hovertree.com/themes/hvtimages/smile.png) no-repeat center;
animation:hovertreemove /*动画样式名称*/
1s /*动画时间*/
linear /*线性运动*/
infinite /*无限播放*/
alternate/*往返动画*/;}
a{color:blue;text-decoration:none;} </style></head><body><a href="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">说明</a>
<p id="hovertreekf"></p></body></html>Das Folgende ist der Code für die kreisförmige Diffusionsbewegung:
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>纯css3圆形从中心向四周扩散动画效果_何问起</title>
<style>
@keyframes warn {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}
25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}
50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3;
}
75% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0;
}
}
@keyframes warn1 {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}
25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}
50% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
}
75% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.0;
}
}
.container {
position: relative;
width: 40px;
height: 40px;
/*border: 1px solid #000; hovertree.com */
}
/* 保持大小不变的小圆圈 何问起 */
.dot {
position: absolute;
width: 92px;
height: 92px;
left: 120px;
top: 120px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 2px solid red;
border-radius: 50%;
z-index: 2;
}
/* 产生动画（向外扩散变大）的圆圈 */
.pulse {
position: absolute;
width: 320px;
height: 320px;
left: 2px;
top: 2px;
border: 6px solid red;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px red;
}
.pulse1 {
position: absolute;
width: 320px;
height: 320px;
left: 2px;
top: 2px;
border: 6px solid red;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 2s ease-out;
-moz-animation: warn1 2s ease-out;
animation: warn1 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px red;
}a{color:blue;text-decoration:none;}
</style></head><body><a href="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">说明</a>
<p class="container">
<p class="dot"></p>
<p class="pulse"></p>
<p class="pulse1"></p>
</p></body></html>Das obige ist der detaillierte Inhalt vonCode-Sharing mit CSS3, um den Animationseffekt eines Kreises zu realisieren, der sich von der Mitte in die Umgebung ausbreitet. 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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
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
1379
52
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
So erstellen Sie runde Bilder und Texte in ppt
Mar 26, 2024 am 10:23 AM
Zeichnen Sie zunächst einen Kreis in PPT, fügen Sie dann ein Textfeld ein und geben Sie den Textinhalt ein. Legen Sie abschließend die Füllung und den Umriss des Textfelds auf „Keine“ fest, um die Erstellung kreisförmiger Bilder und Texte abzuschließen.
So erstellen Sie ein rundes Bild in ppt
Mar 25, 2024 pm 03:54 PM
So erstellen Sie ein kreisförmiges Bild in ppt: 1. Verwenden Sie die Zuschneidefunktion. 2. Verwenden Sie das Formwerkzeug. 3. Verwenden Sie zum Anpassen die Tastenkombinationen und Kontrollpunkte.
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
Wie groß ist die Fläche des Kreissektors?
Aug 30, 2023 am 08:33 AM
Ein Kreissektor, auch Kreissektor/Kreissektor genannt, ist ein Teil eines Kreises, der durch einen Bogen zwischen zwei Radien begrenzt wird. Dieser Bereich wird durch zwei Radien und einen Bogen begrenzt. Um die eingeschriebene Fläche zu finden, müssen wir den Winkel zwischen den beiden Radien ermitteln. Die Gesamtfläche entspricht einem Winkel von 360 Grad. Um die Fläche eines Winkels zu ermitteln, multiplizieren wir die Fläche mit θ/360. Dies ergibt die Fläche des beschrifteten Teils. Dabei ist θ der Winkel (in Grad) zwischen den beiden Radien. Die Fläche des Kreissektors = π*r*r*(θ/360). Beispielsweise beträgt die Fläche eines Kreissektors mit einem Radius von 5 und einem Winkel von 60 Grad 13,083. Fläche=(3,14*5*5)*(60/360)=13,03BeispielcodeDemo#inkl
So implementieren Sie Spitzenränder in CSS3
Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".
Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind!
Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.
