Der lineare CSS3-Gradient realisiert 4 verbundene Ringe (Codebeispiel)-CSS-Tutorial-php.cn

Inhaltsverzeichnis

Ziele dieses Artikels:

Problem:

Ideenanalyse:

总结：

Heim

Web-Frontend

CSS-Tutorial

Der lineare CSS3-Gradient realisiert 4 verbundene Ringe (Codebeispiel)

易达

Jun 05, 2020 am 11:02 AM

css3

Ziele dieses Artikels:

1. Beherrschen Sie die Implementierungsmethode von Linear-Gradient in CSS3

Problem:

Um die folgenden Effekte zu erzielen, ist die Verwendung von reinem DIV+ erforderlich CSS, Sie müssen den Wissenspunkt linear-gradient verwenden und ihn in der Mitte anzeigen

Der lineare CSS3-Gradient realisiert 4 verbundene Ringe (Codebeispiel)

Zusätzliche Hinweise:

1. Die Größe eines farbigen Rings beträgt 400px*400px, die Größe des leeren Rings im Inneren beträgt 260px*260px

2. Der Abstand zwischen dem rechten Ring und dem linken Ring beträgt 120px

3 Unterer Ring und oberer Ring Die Bewegungsentfernung beträgt 20 Pixel

Ideenanalyse:

1 Die äußerste Ebene ist ein Div mit einem grünen Rand, der mit 4 umwickelt ist Ringe

2. Das Div ist in einen oberen und einen unteren Teil unterteilt. Solange der obere Teil implementiert ist, kann der untere Teil tatsächlich kopiert werden geändert werden

3. Jeder Ring ist tatsächlich alle gleich, nur an unterschiedlichen Positionen. Solange also ein Farbverlaufsring implementiert ist, können alle anderen Ringe den ersten Ring kopieren

Jetzt Lassen Sie uns die spezifische Operation ausführen

1. Erstellen Sie index.html und schreiben Sie die Architektur

Architekturideen:

1 Der äußere Container heißt .container-Container, der in zwei Teile unterteilt ist: .top und .bottom. Jeder Teil enthält zwei Ring-Divs.

Da die beiden parallelen Div-Ringe horizontal angeordnet sein müssen, müssen sie float sein , Sie müssen am Ende des Behälters ein klares Div hinzufügen, den Schwimmer löschen, damit der Behälter die beiden Schwimmerring-Divs noch umwickeln kann

2. Jeder Ring besteht tatsächlich aus zwei Teilen, einem äußerer farbiger Ring und eine innere Schicht Ein kleiner weißer Ring

Laut der Analyse wird der folgende Architekturcode erhalten

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变圆环</title>
  
</head>
<body>
    <div class="container">
        <div class="top">
             <!-- 第一个圆环 -->
            <div class="colorcircle circle1">
                <div class="smallcircle">
                </div>
            </div>
            <!-- 第二个圆环 -->
            <div class="colorcircle circle2">
                <div class="smallcircle">
                </div>
            </div>
            <div class="clear"> </div>
        </div>
        <div class="bottom">
            <!-- 第一个圆环 -->
           <div class="colorcircle circle1">
               <div class="smallcircle">
               </div>
           </div>
           <!-- 第二个圆环 -->
           <div class="colorcircle circle2">
               <div class="smallcircle">
               </div>
           </div>
           <div class="clear"> </div>
       </div>
    </div>
</body>
</html>

Nach dem Login kopieren

2. Als nächstes schreiben Sie den Stil

1. Erstellen Sie einen CSS-Ordner, um die Verwaltung aller CSS-Dateien zu erleichtern. Die Ideen sind wie folgt:

1 >

Ideenanalyse

1. Um die gemeinsamen Stile aller Elemente im Container festzulegen, können wir diese gemeinsamen Codes in den .container *-Stil

schreiben, also hinzufügen Folgender Code zu index.css:

.container *{
    padding:0;
    margin: 0;
}

Nach dem Login kopieren

2. Äußerer Farbkreis.colorcircle

Ideenanalyse

1. Je nach Anforderung, Breite: 400px, Höhe: 400px, Da es kreisförmig ist, muss die Randverrundung auf 400 Pixel eingestellt werden. Das heißt, Randradius: 400 Pixel;,

2. Da der Hintergrund sieben Farben hat, ist ein Linienverlauf und ein Farbverlauf erforderlich von links nach rechts ist Rot, Orange, Gelb, Grün, Blau, Lila, daher wird es in umgewandelt. Der Code lautet: Hintergrundbild: linearer Farbverlauf (nach links, Rot, Orange, Gelb, Grün, Blau, Indigo, Violett). ;

3. Dann werden abgerundete Ecken verwendet und der Rand muss festgelegt werden, sonst wird er nicht wirksam, aber der Rand ist transparent, also konvertieren Sie ihn in den Code: border: 1px solid transparent

4. Um sicherzustellen, dass die Ringe parallel angeordnet sind, müssen Sie sie schweben lassen: links

Fügen Sie der Analyse zufolge den Code weiterhin wie folgt in index.css hinzu:

.colorcircle{
    width:400px;
    height:400px;
    border-radius: 400px;
    background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);    
    border:1px solid transparent;
    float: left; 
}

Nach dem Login kopieren

Kleiner weißer Kreis im Ring.smallcircle

Ideenanalyse:

1. Wie Sie wissen, Breite: 260px, Höhe: 260px, weil Es ist kreisförmig, daher müssen Sie die Randverrundung auf 260 Pixel einstellen, d Der Abstand beträgt 70px=(400-260)/2

2. Dann werden abgerundete Ecken verwendet und der Rand muss festgelegt werden, sonst wird er nicht wirksam, aber sein Rand ist transparent, also in Code konvertieren , das heißt, Rand: 1px solide transparent;

Fügen Sie den Code weiterhin wie folgt in index.css hinzu:

.smallcircle{
    width: 260px;
    height: 260px;
    border-radius: 260px;
    background-color: white;
    margin:70px auto;
    border:1px solid transparent;
}

Nach dem Login kopieren

4.clear style

Idee Analyse:

1. Floats müssen gelöscht werden, also float:none, clear:both

Es gibt keinen Inhalt in diesem Div Die Höhe muss auf 0 gesetzt werden

Fügen Sie weiterhin den folgenden Code zu index.css hinzu:

.clear{
    clear: both;
    float: none;
    width: 0;
    height: 0;
}

Nach dem Login kopieren

5. Right Circle.circle2

Ideenanalyse:

1. Entsprechend den Anforderungen beträgt der Verschiebungsbetrag 120px, also margin-left:-120px

Fügen Sie weiterhin den folgenden Code zu index.css hinzu:

.circle2{
    margin-left:-120px;
}

Nach dem Login kopieren

Die folgender Teil.bottom

Ideenanalyse:

1. Gemäß den Anforderungen beträgt der Aufwärtsverschiebungsbetrag 20px, also margin-top:-20px

Fügen Sie weiter hinzu Folgender Code für index.css:

.bottom{
    margin-top:-20px; 
}

Nach dem Login kopieren

7. Schließlich äußerer Layer.container

Ideenanalyse

1. Da das Ganze zentriert werden muss, wird es konvertiert Code: margin:0 auto; weil es ein grüner Rand ist, also border:1px solid green;

2 Die Standardbreite von div ist 100 %. Um es zu zentrieren, müssen Sie die Breite festlegen , width=684px(400+400+4【Ring 4 borders】-120), height=784(400+400+ 4【Ring 4 borders】-20)

Fügen Sie weiterhin den folgenden Code zum Index hinzu .css:

.container{
    border:1px solid green;
    width:684px;
    margin:0 auto;
    height: 784px;
}

Nach dem Login kopieren

Bisher sind alle Inhalte von index.css wie folgt:

.container *{
    padding:0;
    margin: 0;
}

.colorcircle{
    width:400px;
    height:400px;
    border-radius: 400px;
    background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
    
    border:1px solid transparent;
    float: left; 
}
.smallcircle{
    width: 260px;
    height: 260px;
   
    border-radius: 260px;
    background-color: white;
    margin:70px auto;
    border:1px solid transparent;
}
.clear{
    clear: both;
    float: none;
    width: 0;
    height: 0;
}
.circle2{
    margin-left:-120px;
}


.bottom{
    margin-top:-20px; 
}
.container{
    border:1px solid green;
    width:684px;
    margin:0 auto;
    height: 784px;
}

Nach dem Login kopieren

Führen Sie dann index.css in index.html ein

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变圆环</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
        <div class="top">
             <!-- 第一个圆环 -->
            <div class="colorcircle circle1">
                <div class="smallcircle">
                </div>
            </div>
            <!-- 第二个圆环 -->
            <div class="colorcircle circle2">
                <div class="smallcircle">
                </div>
            </div>
            <div class="clear"> </div>
        </div>
        <div class="bottom">
            <!-- 第一个圆环 -->
           <div class="colorcircle circle1">
               <div class="smallcircle">
               </div>
           </div>
           <!-- 第二个圆环 -->
           <div class="colorcircle circle2">
               <div class="smallcircle">
               </div>
           </div>
           <div class="clear"> </div>
       </div>
    </div>
</body>
</html>

Nach dem Login kopieren

Die laufenden Ergebnisse lauten wie folgt:

发现下面部分.bottom的margin-top好像失效了，其实如果我们将.bottom的border设置成红色，可以看出，其实也是上移了20px，但是因为里面圆环是float的，且默认的postion为relative,所以圆环是无法再上移的，怎么办呢？这里提供两种解决方案：

1、我们将.bottom的postion设置为absoute

index.css中.bottom代码修改如下：

.bottom{
    margin-top:-20px; 
    position: absolute;
}

Nach dem Login kopieren

我们再来运行效果：

Der lineare CSS3-Gradient realisiert 4 verbundene Ringe (Codebeispiel)

我们发现效果实现了

还有一种方法就是

2、通过让.top,.bottom上下两个div都float:left，也可以解决，只不过这样在.container的最后需要添加.clear 块

index.html代码修改如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变圆环</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
        <div class="top">
             <!-- 第一个圆环 -->
            <div class="colorcircle circle1">
                <div class="smallcircle">
                </div>
            </div>
            <!-- 第二个圆环 -->
            <div class="colorcircle circle2">
                <div class="smallcircle">
                </div>
            </div>
            <div class="clear"> </div>
        </div>
        <div class="bottom">
            <!-- 第一个圆环 -->
           <div class="colorcircle circle1">
               <div class="smallcircle">
               </div>
           </div>
           <!-- 第二个圆环 -->
           <div class="colorcircle circle2">
               <div class="smallcircle">
               </div>
           </div>
           <div class="clear"> </div>
       </div>
       <!--如果.top,.bottom都float了，需要加上此行-->
       <div class="clear"> </div>
    </div>
</body>
</html>

Nach dem Login kopieren

index.css代码如下：

.container *{
    padding:0;
    margin: 0;
}

.colorcircle{
    width:400px;
    height:400px;
    border-radius: 400px;
    background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
    
    border:1px solid transparent;
    float: left; 
}
.smallcircle{
    width: 260px;
    height: 260px;
   
    border-radius: 260px;
    background-color: white;
    margin:70px auto;
    border:1px solid transparent;
}
.clear{
    clear: both;
    float: none;
    width: 0;
    height: 0;
}
.circle2{
    margin-left:-120px;
}

/* 解决上移问题 */
.bottom{
    margin-top:-20px; 
    float: left;
}
.top{
    float: left;
}
/* end */
.container{
    border:1px solid green;
    width:684px;
    margin:0 auto;
    height: 784px;
}

Nach dem Login kopieren

运行结果为：

Der lineare CSS3-Gradient realisiert 4 verbundene Ringe (Codebeispiel)

效果还是一样的

到此为止，我们就实现了全部的需求

总结：

1、学习了CSS3中线线渐变的语法如

linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

其中方向left也可以是right,后面的颜色，可以2个或者3个都可以自定义

希望本文能给大家带来一定的帮助，谢谢！！！

Das obige ist der detaillierte Inhalt vonDer lineare CSS3-Gradient realisiert 4 verbundene Ringe (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

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

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Assassins Creed Shadows - So finden Sie den Schmied und entsperren Sie die Waffen- und Rüstungsanpassung

1 Monate vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

3 Wochen vor By DDD

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

Wo ist der Login-Zugang für Gmail-E-Mail?

7642

CakePHP-Tutorial

1392

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

150

Related knowledge

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.

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.

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;".

So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3 Apr 25, 2022 pm 04:52 PM

Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen. Die Syntax „img:active {transform : Skala(x-Achsen-Vergrößerung, y-Achsen-Vergrößerung);}".

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.

So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest Apr 28, 2022 pm 04:32 PM

In CSS3 können Sie das Attribut „animation-timing-function“ verwenden, um die Rotationsgeschwindigkeit der Animation festzulegen. Dieses Attribut wird verwendet, um anzugeben, wie die Animation einen Zyklus abschließt und die Geschwindigkeitskurve der Animation festlegt. Animation-Timing-Funktion: Geschwindigkeitsattributwert;}".

Hat der CSS3-Animationseffekt eine Verformung? Apr 28, 2022 pm 02:20 PM

Der Animationseffekt in CSS3 verfügt über eine Verformung. Sie können „Animation: Animationsattribut @keyframes ..{..{transform: Transformationsattribut}}“ verwenden, um den Animationsstil festzulegen Das Transformationsattribut wird zum Festlegen des Verformungsstils verwendet.

See all articles