展示

和女朋友之间的情感似乎有些淡了呢？也许我们需要来点调味料，用一些小恶作剧来为我们的感情增添一丝趣味！不过，要小心不要吓到她太多，不然你就惨了！

我们将以女朋友常用的网站（这里以小破站为例）作为背景进行执法钓鱼，然后移动小而可爱的蜘蛛。像这样：

实现

第 1 步：设计蜘蛛样式

首先，我们需要一张在爬动的蜘蛛动图，如下所示：

然后，编写相应的 CSS 代码：

csshtml {
    
  position: relative;

}


img.spider {
    
  position: absolute;
    
  bottom: 0;
    
  right: 0;
    
  transform: scaleX(-1);
    
  width: 200px;

}

解释一下上述代码：

• html { position: relative; } ：设置 HTML 文档中其他元素的定位上下文，这对于后续正确定位蜘蛛动图相当重要。
• img.spider { ... } ：选择类名为 "spider" 的 img 元素。
• position: absolute; ：将蜘蛛动图绝对定位在 HTML 文档中。
• bottom: 0; right: 0; ：将蜘蛛放置在父元素（HTML 文档）的右下角。
• transform: scaleX(-1); ：水平翻转蜘蛛动图。
  • transform： 表示对选中的元素进行变形操作。
  • scaleX(-1)： 表示水平翻转图片，使其呈现镜像效果。
• width: 200px; ：设置 img 元素的宽度为 200 像素。

运行结果：

第 2 步：设计蜘蛛爬行

定义一个关键帧动画，用于控制蜘蛛的水平移动效果，代码如下所示：

css@keyframes spiderMovement {

  0% {
    
    right: 0;

  }

  100% {
    
    right: 100%;

  }

}
    

其中，@keyframes spiderMovement 声明一个名为 "spiderMovement" 的关键帧动画。

0% 表示动画的起始点，right: 0; 设置元素在动画起始点时，相对于其父元素右侧的偏移量为 0，即元素在父元素的右侧边缘处。

100% 表示动画的结束点， right: 100%; 设置元素在动画结束点时，相对于其父元素右侧的偏移量为 100%，即元素在父元素的右侧边缘处的偏移量为父元素宽度的 100%。

接着，将上述动画效果写入刚刚的 CSS 样式中，代码如下所示：

cssimg.spider {
    
  ...
  animation: spiderMovement 6s linear infinite;

}
    

animation: spiderMovement 6s linear infinite; ：设置在 img 元素上应用的动画效果。在 6 秒的时间内蜘蛛动图将从屏幕右边缘（0% 进度）移动到左边缘（100% 进度），并且无限循环。

• spiderMovement： 上述自定义的动画名称。
• 6s： 表示动画持续时间为 6 秒。
• linear： 表示动画的时间曲线是线性的，也就是匀速进行。
• infinite： 表示动画将无限循环播放。

运行结果：

第 3 步：添加网站背景

为了能够让页面更加真实，因此使用 iframe，而不是直接使用图片。

htmliframe id="background-iframe" src="...">
    /iframe>

同时为了让 iframe 铺满整个页面，需要设置一些样式，代码如下所示：

cssbody {
    
    margin: 0;
    
    overflow: hidden;

}


#background-iframe {
    
    position: fixed;
    
    left: 0;
    
    top: 0;
    
    width: 100%;
    
    height: 100%;
    
    border: none;
    
    z-index: -1;

}
    

这样就能实现开头展示的效果了：

代码

图片上传的是公共图床，所以可能存在不稳定性，也可以访问博主的 GitHub 获取图片。

整体代码如下所示：

html!DOCTYPE html>
    
html>
    
head>
    
    title>
    哔哩哔哩 (゜-゜)つロ 干杯~-bilibili/title>
    
    link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico?v=1">
    
    style>

        body {
    
            margin: 0;
    
            overflow: hidden;

        }

        
        #background-iframe {
    
            position: fixed;
    
            left: 0;
    
            top: 0;
    
            width: 100%;
    
            height: 100%;
    
            border: none;
    
            z-index: -1;

        }


        img.spider {
    
            position: absolute;
    
            bottom: 0;
    
            right: 0;
    
            animation: spiderMovement 6s linear infinite;
    
            transform: scaleX(-1);
    
            width: 200px;

        }


        @keyframes spiderMovement {

            0% {
    
                right: 0;

            }

            100% {
    
                right: 100%;

            }

        }
    
    /style>
    
/head>
    
body>
    
    img class="spider" src="https://github.com/sid10t/bigImages/blob/main/crawling_spider.webp"/>
    
    iframe id="background-iframe" src="https://www.bilibili.com/">
    /iframe>
    
/body>
    
/html>
    

不能说完全一样，只能说一模一样：

后记

本文手把手教会读者一个分手小技巧，通过图文与代码的结合，深入讲解其中的原理，旨在读者掌握其中的精髓，能够完美复刻 “钓鱼网站” 进行恶作剧，增进情侣间的感情！

以上就是博文 15秒教会你如何对女朋友进行恶作剧 的所有内容了，希望对大家有所帮助！

📝 上篇精讲：这是第一篇，没有上一篇喔~

💖 我是 𝓼𝓲𝓭𝓲𝓸𝓽，期待你的关注，创作不易，请多多支持；

👍 公众号：sidiot的技术驿站；

🔥 系列专栏：前端大杂烩

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！