网页设计基础 第十二讲：CSS选择器之打造动态图片跑马灯效果

TechLearn
963 阅读4分钟

在上一章色彩斑斓的网页——CSS基础概览中，我们初步了解了CSS的基本概念及其在网页设计中的重要性，并通过几种不同的方式展示了如何将样式应用到HTML文档中。现在，我们将更进一步，深入探讨CSS的语法细节，并通过具体的示例来巩固所学的知识。掌握CSS语法不仅能够帮助我们更精细地控制网页的外观，还能提高我们解决问题的能力，使网页设计更加灵活多样。

知识回顾

选择器（Selectors）

选择器是用来指定哪些HTML元素应该应用样式规则的部分。常见的选择器包括： CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

元素选择器

直接使用HTML元素的名称作为选择器，如div、p等。

p {
    color: blue;
}

类选择器

使用.来指定类名，类名可以应用于多个元素。

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

.highlight {
    background-color: yellow;
}

ID选择器

使用#来指定ID名，ID在页面中应该是唯一的。

  • ID 属性不要以数字开头，数字开头的 ID 在 Mozilla/Firefox 浏览器中不起作用。
  • ID 属性只能在每个 HTML 文档中出现一次。 Remark
#header {
    font-size: 2em;
}
  • 属性选择器：使用[]来指定属性及其值。
   input[type="text"] {
      border: 1px solid black;
  }

属性与值（Properties and Values）

属性定义了要改变的样式类型，而值则指定了具体的样式参数。例如：

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

在此示例中，background-color和font-family是属性，而#f4f4f4和Arial, sans-serif是它们各自的值。

伪类与伪元素（Pseudo-classes & Pseudo-elements）

伪类：用来定义某些特殊状态的链接，如鼠标悬停时的状态

a:hover {
    color: red;
}

伪元素：用来创建特殊的视觉效果，如首行或首字的样式。

p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

多重样式优先级顺序

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

  1. 通用选择器（*）
  2. 元素(类型)选择器
  3. 类选择器
  4. 属性选择器
  5. 伪类
  6. ID 选择器
  7. 内联样式

!important 规则例外

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖 CSS 中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important 规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

  • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
  • Never 永远不要在全站范围的 CSS 上使用 !important
  • Never 永远不要在你的插件中使用 !important

任务描述

实现图片跑马灯效果：按暂停按钮或鼠标停在图片上暂停

image.png

任务实施

新建index.html网页

<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片跑马灯</title>
    <link rel="stylesheet" href="css/styles.css">


    <div class="marquee" id="marquee">
        <div class="marquee-content" id="marquee-content">
            <img src="img/1.png" alt="图片1">
            <img src="img/2.png" alt="图片2">
            <img src="img/3.png" alt="图片3">
            <img src="img/4.jpeg" alt="图片4">
        </div>
    </div>
    <button id="toggle">暂停</button>
    <script src="js/script.js"></script>

在css目录下创建style.css

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.marquee {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0; /* 背景颜色 */
}

.marquee-content {
    display: inline-block;
    animation: marquee 10s linear infinite; /* 动画效果 */
}

.marquee img {
    height: 200px; /* 图片高度 */
    margin-right: 20px; /* 图片间距 */
}

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

在js目录下创建script.js

const marqueeContent = document.getElementById('marquee-content');
const toggleButton = document.getElementById('toggle');

let isPaused = false; // 用于控制动画状态

toggleButton.addEventListener('click', () => {
    if (isPaused) {
        // 如果已暂停，则重新开始动画
        marqueeContent.style.animationPlayState = 'running';
        toggleButton.textContent = '暂停';
    } else {
        // 如果正在播放，则暂停动画
        marqueeContent.style.animationPlayState = 'paused';
        toggleButton.textContent = '继续';
    }
    isPaused = !isPaused; // 切换状态
});

// 鼠标悬停事件
marqueeContent.addEventListener('mouseenter', () => {
    marqueeContent.style.animationPlayState = 'paused'; // 暂停动画
});

marqueeContent.addEventListener('mouseleave', () => {
    marqueeContent.style.animationPlayState = 'running'; // 继续动画
});

效果如下：

动画.gif

实验实训

班级照片墙

结语

通过本章的学习，你应该能够熟练掌握CSS的基本语法，并能够运用到实际的网页设计中。接下来，我们将进一步探讨更多高级的CSS技巧，帮助你在网页设计方面更上一层楼。

通过本章的学习，你将能够掌握CSS的基本语法，并能够运用这些知识来美化你的网页。继续探索更多的CSS技巧，不断丰富你的技能库。

avatar
文章
阅读
粉丝