javaScript+css+html——图片剪切效果（只能向右进行剪切）

最新推荐文章于 2025-06-22 10:55:34 发布

原创

最新推荐文章于 2025-06-22 10:55:34 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用JavaScript、CSS和HTML结合，创建一个仅允许向右剪切的图片剪切效果。通过示例代码展示了具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片剪切</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            background:pink ;
        }
        .box{
            top: 100px;
            left: 200px;
            width: 500px;
            height:350px;
            position: absolute;
            /*background: dodgerblue;*/
        }
        .img1{
            opacity: 0.5;
        }
        img{
            width: 500px;
            height:350px;
            position: absolute;
            z-index: 1;

        }
        .img2{
            clip: rect(0px,300px,3