suchen

Heim >Web-Frontend >CSS-Tutorial >CSS-Filter zur Erzielung eines Flammeneffekts

CSS-Filter zur Erzielung eines Flammeneffekts

php中世界最好的语言
php中世界最好的语言Original
2018-03-21 09:38:022495Durchsuche

Dieses Mal stelle ich Ihnen CSS-Filter vor, um Flammeneffekte zu erzielen. Was sind die Vorsichtsmaßnahmen für die Verwendung von CSS-Filtern, um Flammeneffekte zu erzielen?

Das letzte Mal haben wir einige Grundkenntnisse über CSS-Filter und CSS-Filtereigenschaften gelernt

Dieses Mal werden wir CSS-Filter verwenden, um einen Flammeneffekt zu implementieren.

Erklärung

Um den oben genannten Flammeneffekt zu erzielen, müssen wir zunächst einige notwendige Dinge verstehen.

Das letzte Mal haben wir über zwei Filter gesprochen: Unschärfe und Kontrast.

Unschärfe dient dazu, die Gaußsche Unschärfe auf das Bild einzustellen, und Kontrast dient dazu, den Kontrast des Bildes anzupassen. Wenn Sie beide zusammen verwenden, entsteht ein Fusionseffekt.

Rendering

Der rote Hintergrund im Bild ist gesetzt

Das ist sehr wichtig, die beiden Kreise sind gesetztfilter:contrast(20);Wenn nicht noch klar, lasst uns vergleichen und sehen. filter:blur(10px);

Okay, wenn wir das wissen, beginnen wir mit der Implementierung des Flammeneffekts.

Ganz grob sind diese 3 Schritte nötig:

Zeichne zuerst ein Dreieck mit einem Rand

Wissen Sie, wenn die Breite 0 ist, ist die Höhe auch 0. Wenn nur der Rand verwendet wird, ist der Rand dreieckig, wobei Breite und Höhe beide 0 sind, aber die Randbreite beträgt 100 Pixel

Obiges Bild, 4 Seiten Die Randfarben sind deutlich zu erkennen. Wir brauchen jetzt so etwas wie das Folgende. Ich glaube, jeder weiß, wie man es umsetzt.

2. Passen Sie die Größe und Farbe des Dreiecks an, um ein flammenartiges Aussehen zu erzielen

Dieser Schritt ist sehr einfach. Wir müssen nur diese drei Codezeilen zum oben implementierten Dreieck hinzufügen 

border-radius: 45%;
transform: scaleX(.4);
filter: blur(20px) contrast(30);

Rendering

3. Lassen Sie die Flammen sich bewegen

Dieser Schritt ist ziemlich mühsam, aber leicht zu verstehen. Verwenden Sie einfach den oben erwähnten Fusionseffekt, um viele kleine Kreise zufällig durch das Dreieck zu ziehen Schauen Sie sich das Bild unten an, um das Prinzip zu verstehen.

Okay, es ist definitiv einfach, diese Codes zu verstehen.

Vervollständigen Sie den Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    body {
        background: #000;
    }
    .container {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 0 auto;
        background-color: #000;
    }
    .fire {
        position: absolute;
        bottom: 0;
        left: 50%;
        border-radius: 45%;
        box-sizing: border-box;
        border: 200px solid #000;
        border-bottom: 200px solid #b5932f;
        transform: translate(-50%, 0) scaleX(.4);
        filter: blur(20px) contrast(30);
    }
    
    /* 小圆的样式 */
    .dot {
        position: absolute;
        bottom: -110px;
        left: 0;
        width: 24px;
        height: 24px;
        background: #000;
        border-radius: 50%;
    }
    @keyframes move {
        100% {
            transform: translateY(-350px);
        }
    }
    </style>
</head>
<body>
    <p class="container">
        <p class="fire">
        </p>
    </p>
    <script>
    //创建一个元素，放所有的小圆
    var circleBox = document.createElement('p');
    //获取随机数   from 参数表示从哪个数开始  to参数表示到哪个数结束 from<= num <= to
    function randomNum(from, to) {
        from = Number(from);
        to = Number(to);
        var Range = to - from;
        var num = from + Math.round(Math.random() * Range); //四舍五入
        return num;
    };  
    
    for (var i = 0; i < 40; i++) {
        //创建小圆
        var circle = document.createElement(&#39;p&#39;);
        // 下面的4个变量 代表小圆随机位置  和 随机持续时间和延迟
        var bottom = randomNum(-300, -250);
        var left = randomNum(-200, 200);
        var duration = randomNum(10, 30) / 10;
        var delay = randomNum(0, 50) / 10;
        //给生成的每个小圆 加上动画和位置属性
        circle.style.cssText += `animation:move ${duration}s linear ${delay}s infinite;bottom:${bottom}px;left:${left}px;`;
        circle.className += " dot";
        //把每个小圆 都加入这个p
        circleBox.appendChild(circle);
    };
    
    var fire = document.querySelector(".fire");
    //把有40个随机小圆的 p 加入DOM树
    fire.appendChild(circleBox);
    </script>
</body>
</html>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Reines CSS, um einen 3D-Effekt auf der Fotowand zu erzielen

CSS, um Fächermuster zu zeichnen

Tutorial zur Verwendung des CSS-Ladeanimationseffekts

Tutorial zur Verwendung von CSS3 rem (Festlegen der Schriftgröße)

Das obige ist der detaillierte Inhalt vonCSS-Filter zur Erzielung eines Flammeneffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Reines CSS, um den 3D-Effekt der Fotowand zu erzielenNächster Artikel：Reines CSS, um den 3D-Effekt der Fotowand zu erzielen

In Verbindung stehende Artikel

Mehr sehen