css-filter属性-火焰效果-1.1

最新推荐文章于 2024-07-04 18:24:34 发布

彩舒

最新推荐文章于 2024-07-04 18:24:34 发布

阅读量495

点赞数 1

分类专栏：前端技术文章标签： css 火焰

本文链接：https://blog.csdn.net/caishu1995/article/details/89355565

版权

本文介绍了如何使用CSS的filter属性创建逼真的火焰效果。通过结合模糊、旋转和对比度调整，创造出动态的火焰动画。通过在特定区域内添加点并利用滤镜特性，实现了火焰与背景的融合，最终形成栩栩如生的火焰视觉效果。

摘要由CSDN通过智能技术生成

首先灰常感谢你所不知道的 CSS 滤镜技巧与细节。我看完filter属性后还是迷迷糊糊的。因为不清楚能干什么。但看完这篇文章的例子后发现filter属性真的很厉害。

现在记录一些我的理解。

火焰效果

1、先画个带弧形的尖角。至于为什么需要带弧，只是因为带弧看起来更柔和一点，不太生硬。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <style>
        .firePart{ background-color: #b5932f; border: 200px solid black; border-bottom-color: transparent; border-radius: 50%; height: 0; position: absolute; top: 0; width: 0; }
    </style>
</head>
<body>
    <div style="float: left; position: relative;">
        <div class="firePart"></div>
    </div>
</body>
</html>

最低0.47元/天解锁文章

彩舒

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css-filter属性-火焰效果-1.1

首先灰常感谢你所不知道的 CSS 滤镜技巧与细节。我看完filter属性后还是迷迷糊糊的。因为不清楚能干什么。但看完这篇文章的例子后发现filter属性真的很厉害。现在记录一些我的理解。火焰效果 1、先画个带弧形的尖角。至于为什么需要带弧，只是因为带弧看起来更柔和一点，不太生硬。<!DOCTYPE html><html lang...
复制链接

扫一扫

专栏目录