CSS3 教程学习笔记

简介

CSS（Cascading Style Sheets）是用于网页样式设计的语言。CSS3 是 CSS 的第三个主要版本，在其之前的版本中已经有了很多功能。CSS3 包含了大量的新特性，例如盒子模型、背景图片、文字效果、字体选择器等。本篇教程将介绍一些 CSS3 的常用技巧和实例。

选择器

基本选择器

标签选择器：通过 HTML 元素标签名来定义样式。例如 p { color: red; }。
类选择器：通过指定类名来定义样式。例如 .my-class { font-size: 16px; }。
ID 选择器：通过指定 id 来定义样式。例如 #my-id { background-color: blue; }。

属性选择器

[attr]：匹配包含指定属性的元素。例如 [target] 可以匹配所有包含 target 属性的元素。
[attr=value]：匹配指定属性值的元素。例如 [href="https://www.google.com/"] 可以匹配所有 href 属性为 "https://www.google.com/" 的元素。
[attr~=value]：匹配属性值包含指定词汇的元素。例如 [class~="my-class"] 可以匹配所有 class 属性包含 "my-class" 的元素。

伪类选择器

:hover：鼠标悬停时触发。例如 a:hover { color: blue; }。
:active：鼠标按下时触发。例如 button:active { background-color: green; }。
:focus：元素获取焦点时触发。例如 input:focus { border: 1px solid red; }。

动画效果

过渡效果

使用 CSS3 过渡效果可以实现元素状态的平滑变化。例如：

cssCopy Code
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}
.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

关键帧动画

使用 CSS3 关键帧动画可以实现更加复杂的动画效果。例如：

cssCopy Code
@keyframes my-animation {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation-name: my-animation;
  animation-duration: 2s;
}

文字效果

文字阴影

使用 CSS3 可以为文字添加阴影效果。例如：

cssCopy Code
h1 {
  text-shadow: 2px 2px 2px #000000;
}

文字渐变

使用 CSS3 可以为文字添加渐变效果。例如：

cssCopy Code
h1 {
  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

实例展示

下面是一个简单的实例，演示了如何使用 CSS3 技巧为网页元素添加动画效果：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        transition: transform 0.5s;
      }

      .box:hover {
        transform: rotate(180deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

当鼠标悬停在方框上时，方框将旋转 180 度。