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

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!