ホームページ > 記事 > ウェブフロントエンド > 炎の効果を実現する CSS フィルター
炎の効果を実現する CSS フィルター
- php中世界最好的语言オリジナル
- 2018-03-21 09:38:022406ブラウズ
今回は、炎の効果を実現するための CSS フィルターについて説明します。CSS フィルターで炎の効果を実現するための 注意事項 は何ですか?実際の事例を見てみましょう。
前回はCSSフィルターの基礎知識、CSSフィルターフィルター今回はCSSフィルターを使って炎のエフェクトを実現していきます。 解説
まだはっきりしていない場合は、比較してみましょう。 filter:contrast(20); 这点很重要，两个圆设置了 filter:blur(10px);
1. まず境界線付きの三角形を描きます
幅が 0、高さも 0 の場合、境界線のみを使用すると境界線が三角形になることを知っておく必要があります。幅と高さを見てみましょう。これらはすべて 0 ですが、境界線の幅は 100 ピクセルです。上の図では、4 つの三角形の境界線の色が異なっていることがわかります。これを達成する方法は誰もが知っていると思います。
2. 三角形のサイズと色を調整して炎のような外観を実現します
このステップは非常に簡単で、上記で実装された三角形にこれらの 3 行のコードを追加するだけです。
border-radius: 45%; transform: scaleX(.4); filter: blur(20px) contrast(30);
レンダリング
3. 炎を動かします
このステップはさらに面倒ですが、上記のフュージョン効果を使用して、多数の小さな円をランダムに通過させるだけでも簡単です。原理を理解するには、下の図を見てください。 
これらのコードを理解するのは非常に簡単です。
コードを完成させてください
<!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('p');
// 下面的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> この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書: 写真の壁に3D効果を実現するための純粋なCSS
ファンパターンを描画するCSSCSS読み込みアニメーション効果の使用チュートリアルCSS3 rem (フォントサイズを設定) )使い方チュートリアル以上が炎の効果を実現する CSS フィルターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。