女朋友都喜欢的特效：穿梭时空的CSS魔法

2023-12-02 02:55:35

用 CSS 打造太空穿梭：惊艳女友的炫酷特效

简介

准备好让你的网页脱颖而出，惊艳你的女友了吗？使用 CSS（层叠样式表），你可以轻松创建令人惊叹的视觉效果，比如让元素在页面上穿梭移动，仿佛穿越时空一般。

打造太空穿梭特效

HTML 结构：

创建一个 HTML 结构，包括一个带有文本的 div 元素和一个按钮元素。
给 div 元素设置 ID 为 "box"，按钮元素的 ID 为 "start"。

<div id="box">空间穿梭</div>
<button id="start">开始</button>

CSS 样式：

在 style.css 文件中添加 CSS 样式。
设置 #box 的样式，包括大小、背景色、文本对齐方式和字体大小。
设置 #start 的样式，包括位置、填充、背景色、文本颜色和鼠标悬停时光标样式。
创建一个名为 "animate" 的类，用于设置动画效果。
定义 @keyframes space-travel，指定元素移动的动画。

#box {
  width: 200px;
  height: 200px;
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 200px;
  font-size: 24px;
}

#start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background-color: #f00;
  color: #fff;
  border: none;
  cursor: pointer;
}

#box.animate {
  animation: space-travel 5s infinite;
}

@keyframes space-travel {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(500px);
  }

  100% {
    transform: translateX(0);
  }
}

JavaScript 脚本：

在 script.js 文件中添加 JavaScript 脚本。
获取 div 元素和按钮元素。
添加一个点击事件监听器到按钮元素，当按钮被点击时，给 div 元素添加 "animate" 类。

const box = document.getElementById('box');
const startButton = document.getElementById('start');

startButton.addEventListener('click', () => {
  box.classList.add('animate');
});

效果预览