有关css的filter(滤镜)学习以及小运用

最新推荐文章于 2024-09-26 10:01:01 发布

一木有城

最新推荐文章于 2024-09-26 10:01:01 发布

阅读量149

点赞数

分类专栏：学习笔记文章标签： css

本文链接：https://blog.csdn.net/qq_46770287/article/details/109153841

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

filter属性有点意思，花样很多，在学了在学了呜呜

filter滤镜

- 基本用法
- 实例运用火焰蜡烛（？）

基本用法

暂时举了些我了解的滤镜

滤镜	效果
Blur	产生模糊的效果
Alpha	呈现出透明的渐进效果
Wave	产生水平或是垂直方向上的波浪变形
brightness	亮度调节
contrast	调节对比度
drop-shadow	添加整个阴影
grayscale	调节灰度
hue-rotate	色调调节

实例运用火焰蜡烛（？）

（菜鸡使用canvans）

下面展示代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    body {
        background: #000;
    }
    canvas{
			display: block;
			margin: 0 auto;
			border:1px solid #3f0000;
		}

    .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: #3f0000;
        border-radius: 50%;
    }

    @keyframes move {
        100% {
            transform: translateY(-350px);
        }
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="fire">
        </div>
	</div>
	<canvas id="carvas" width="100" height="200" style="border:1px solid bottom brown;;"></canvas>
    <script>
	var c=document.getElementById('carvas');
    var cxt=c.getContext("2d");
    cxt.fillStyle="brown";
	cxt.fillRect(0,0,100,200);
	
    var circleBox = document.createElement('div');
    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('div');
        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";
        circleBox.appendChild(circle);
    };
    var fire = document.querySelector(".fire");
    fire.appendChild(circleBox);
	</script>
	</ul>
</body>
</html>

一些东西了解的还不多
努力学习吧（哭）