JS图片特效，从基础到高级的实现-「好主机」

首页 / 韩国服务器 / 正文

JS图片特效，从基础到高级的实现

Time：2025年03月12日 Read：4 评论：42 作者：y21dr45

本文目录导读：

模糊效果
滤镜效果
动画效果
渐变效果
玻璃效果

JS图片特效，从基础到高级的实现

在前端开发中,图片特效是一个非常受欢迎的主题，无论是用于个人博客、社交媒体，还是商业项目，图片特效都能为作品增添更多吸引力，使用JavaScript（JS）实现图片特效，可以避免浏览器直接解析图片的限制，从而实现更多创意效果，本文将详细介绍如何使用JS实现各种图片特效，包括模糊效果、滤镜效果、动画效果、渐变效果、玻璃效果和水波效果等。

模糊效果

模糊效果是最常见的图片特效之一,通过模糊图片，可以增强视觉效果，让图片看起来更加柔和，以下是两种实现模糊效果的方法。

方法1：使用CSS模糊滤镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模糊图片</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 20px;
        }
        .original {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            border: 2px solid #333;
        }
        .blurred {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            border: 2px solid #333;
        }
        .blurred:hover {
            box-shadow: 0 0 20px rgba(0, 0, 255, 0.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="original" alt="Original">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="blurred" alt="Blurred">
    </div>
</body>
</html>

方法2：使用JS模糊效果

function createFuzzyEffect() {
    const img = new Image();
    img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
    img.onload = function() {
        img.style.transform = 'filter:模糊(2px)';
        img.style.display = 'block';
    };
}
createFuzzyEffect();

滤镜效果

滤镜效果可以结合模糊、锐化、 embossing 等多种滤镜，创造出更复杂的图片效果。

示例：模糊加锐化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滤镜效果</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 20px;
        }
        .original {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            border: 2px solid #333;
        }
        .filtered {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            border: 2px solid #333;
        }
        .filtered:hover {
            box-shadow: 0 0 20px rgba(0, 0, 255, 0.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="original" alt="Original">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="filtered" alt="Filtered">
    </div>
</body>
</html>

动画效果

动画效果可以实现图片的旋转、缩放、平移等动态效果。

示例：旋转动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转动画</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 20px;
        }
        .original {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            border: 2px solid #333;
        }
        .animated {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            border: 2px solid #333;
        }
        .animated:hover {
            transform: rotate(45deg);
            box-shadow: 0 0 20px rgba(0, 0, 255, 0.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="original" alt="Original">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="animated" alt="Animated">
    </div>
</body>
</html>

渐变效果

渐变效果可以通过调整图片的颜色分布来实现,使图片看起来更具层次感。

示例：线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变效果</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 20px;
        }
        .original {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            border: 2px solid #333;
        }
        .blended {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            border: 2px solid #333;
        }
        .blended:hover {
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            box-shadow: 0 0 20px rgba(0, 0, 255, 0.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="original" alt="Original">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="blended" alt="Blended">
    </div>
</body>
</html>

玻璃效果

玻璃效果可以通过叠加模糊层和原图来实现,使图片看起来像一块玻璃。

示例：玻璃效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>玻璃效果</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 20px;
        }
        .original {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            border: 2px solid #333;
        }
        .glass {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            border: 2px solid #333;
        }
        .glass:hover {
            filter: blur(5px);
            box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR42mNkYAAAAAY

原文链接：https://asoulu.com/post/188895.html

上一篇：电信服务器，数字时代的基础设施

下一篇：云服务器内网穿透技术详解