【CSS】15秒教会你如何对女朋友进行恶作剧

原创

sidiot

修改于 2023-11-03 23:42:06

1560

修改于 2023-11-03 23:42:06

文章被收录于专栏：技术大杂烩技术大杂烩

展示

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

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

实现

第 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，而不是直接使用图片。

html<iframe 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>

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