言

在现代Web开发中，CSS3的@keyframes规则为网页动态效果的创建提供了强大的原生支持。通过定义关键帧动画，我们可以实现从一个样式状态平滑过渡到另一个样式状态的过程，让网页元素动起来，提升用户体验和视觉效果。本文将详细介绍@keyframes的工作原理、使用方法以及示例应用。

一、什么是@keyframes？

@keyframes是CSS3中的一个重要特性，用于创建动画。它允许开发者定义一组或多组样式变化过程（关键帧），浏览器会自动计算中间帧，从而生成流畅的动画效果。每个关键帧都代表了动画过程中的某一特定时间点的样式状态。

二、@keyframes语法结构

@keyframes 动画名称 {
  0% { /* 初始状态样式 */ }
  50% { /* 中间状态样式 */ }
  100% { /* 结束状态样式 */ }
}

/* 或者多个关键帧 */
@keyframes 动画名称 {
  0% { ... }
  25% { ... }
  50% { ... }
  75% { ... }
  100% { ... }
}

• 动画名称：自定义的关键帧动画的名字，用于在需要动画的元素上引用该动画。
• %：表示动画进度，0%为动画开始，100%为动画结束。在这两个值之间可以定义任意数量的关键帧，浏览器会根据这些关键帧的样式逐渐过渡。

三、应用动画至元素

创建完关键帧动画后，要使其生效，需要将其应用于具体的HTML元素，并指定动画的时长和其他参数：

选择器 {
  animation-name: 动画名称;
  animation-duration: 动画时长;
  /* 其他可选属性如：
   * animation-timing-function, animation-delay, animation-iteration-count,
   * animation-direction, animation-fill-mode, animation-play-state等
   */
}

例如：

/* 定义一个简单的旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  
  /* 应用动画 */
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite; /* 无限次循环播放 */
}

在这个例子中，.box元素将按照spin动画定义的内容，每2秒完成一次从0度到360度的旋转，并且会无限循环。

四、高级用法

除了基础的样式变换外，@keyframes还可以结合其他CSS属性实现更复杂的动画效果，如颜色渐变、尺寸变化、位置移动等。同时，可以通过调整关键帧的分布和动画曲线来控制动画的节奏和流畅度。

示例： 下面是一个更为丰富的动画示例，展示了元素从左向右移动并改变透明度的过程：

@keyframes slideFade {
  0% {
    left: 0;
    opacity: 0;
  }
  50% {
    left: calc(100% - 100px);
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.animate-element {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;

  animation-name: slideFade;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

综上所述，CSS3中的@keyframes规则为我们构建丰富网页动画提供了强大而灵活的方式。熟练掌握这一特性，可以帮助我们创造更加生动有趣的Web体验。

文介绍如何通过主 CSS 设置，实现图像的基本特效，图像悬停hover和图像动画。

Creating Basic Image Effects With CSS使用 CSS 创建基本图像效果

.

Rounded Corners 圆角效果

通过设置 border-radius： px, em, 或 % 方式.

并可设置 top-left, top-right, bottom-right, and bottom-left. 单独设置

/* slighty_rounded */
img {
  border-radius: 15px;
}

/* ellipse from rectangle or circle from square*/
img {
  border-radius: 50%;
}

图像缩图效果

通过工作width 自动生成缩图效果

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

Full-Page Backgrounds 全页背景

整页背景是修饰网页的绝佳选择，但一定要选择不会压倒性的图像。这些背景特别适用于高分辨率图像，您希望以足够大的尺寸显示，而无需观众单独打开它们。

选项参数:

• auto: 设定原始大小。.
• length: 图像长度.
• percentage:图像长度、宽度的百分比
• cover: 调整图像大小以覆盖视口，有时需要拉伸或裁剪。.
• contain: 将图像大小调整为无需裁剪即可适应视口的最大大小。

background-size:：通常与background-position: center; 和background-repeat: no-repeat;;，等结合使用。

如，图像居中，全屏显示:

body {
  background: url(example.jpg);
  background-position: center;
  background-size: cover;
}

响应式图像效果

响应式图像会实时调整自身大小以适应用户的浏览器大小，通过确保图像不会在较小的屏幕上压倒您的网站，并且在较大的屏幕上显示较大的图像来保护您的页面设计。

如下面的示例以视口宽度的 70% 显示图像：

img {
  max-width: 70vw;
  height: auto;
}

Image Transformations 图像变换

使用 transform 属性，可以将二维 （2D） 或三维 （3D） 效果应用于图像。变换提供了用于缩放、旋转、倾斜和更改图像透视的选项。当与 JavaScript 或动画模块结合使用时，此属性可以向图像添加活动旋转或移动。

transform 属性相当新，旧版浏览器不完全支持。若要确保转换在那里工作，请在属性前面加上 -webkit-, -moz- 和 -ms-，如下例所示，该示例显示了旋转和倾斜图像的转换。

.

img {
-webkit-transform: rotate(20deg) skewY(20deg); /Chrome, Safari, Opera/
-moz-transform: rotate(20deg) skewY(20deg); /Firefox/
-ms-transform: rotate(20deg) skewY(20deg); / Internet Explorer /
}

悬停效果

如悬停 放大

<img class=’hover_effect’ src=’example.jpg’/>

.hover_effect {
  height:25%;
  width: auto; 
}
 
.hover_effect:hover {
  height: 100%;
  width: auto;
}

悬停透明度变化:

img {
  width:1900px;
  height:1900px;
  opacity: 1;
}

img:hover {
  opacity: 0.2;
}

动画效果

动画为图像增添了流畅性，可以使它们具有交互性，同时利用上述效果以及其他效果。您可以通过以下两种方式之一设置带有动画的图像样式，如下所述。

图像切换效果

应用鼠标经过图像效果的一种方法是，当用户将鼠标悬停在图像上时，它们似乎在图像之间淡入淡出。您可以通过将一个图像堆叠在另一个图像之上并更改顶部图像的不透明度来实现此目的。下面的代码创建了一个淡出和淡入效果，当光标移到图像上时开始，并在光标移开时立即反转。顶部确保效果适用于较旧的Chrome和Firefox浏览器。

<div id="fade_out">
  <img class="bottom" src="/images/image1.jpg" />
  <img class="top" src="/images/image2.jpg" />
</div>

#fade_out {
  position:relative;
  height:100%;
  width:auto;
  margin:0 auto;
}

#fade_out img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  transition: opacity 2s linear;
}

#fade_out img.top:hover {
  opacity:0;
}

图像定时切换

您可以创建的另一个动画是使用关键帧，这是一个 CSS 模块，通过定义图像状态及其行为配置来实现该创建。

下面的代码创建一个在两个选定图像之间交换的动画。顶部定义关键帧的动画模式。

<div id="fading">
<img class="bottom" src="banner55.jpg" />
<img class="top" src="banner02.jpg" />
</div>

  @keyframes FadeInOut {
  0% {opacity:1;}
  25% {opacity:.75;}
  50% {opacity:.5;}
  100% {opacity:0;}
}

接下来，将该模式应用于图像，定义过渡效果、重复动画的次数、动画的持续时间等。下面的代码导致图像在 10 秒循环中淡入淡出：

#fading img {
position:absolute;
left:0;
}

For Chrome, Mozilla, or Safari:

#fading img.top {
-webkit-animation-name: FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;
}

For Internet Explorer:

#fading img.top {
animation-name: FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

Application of CSS Image Filters 图像滤镜

在 CSS 中应用过滤器的最简单方法是使用它们的函数。您需要做的就是将所需的过滤器添加为属性及其在 CSS 文件中的值。语法如下：

filtered_elem {
filter: <filter-function>(value | none)
}

See this example with real values:

blurred_sepia_image {
	filter: blur(3px) sepia(50%);
}

Functions of CSS Image Filters 图像滤镜函数

图像旋转效果

Animations 动画方式旋转

若要对旋转进行动画处理，请应用 CSS 过渡属性以指定转换的其他属性以及转换时间。例如，以下代码导致旋转在半秒内发生，启动速度较慢。

.rotate {
	transition: transform 0.5s ease-in;
}

Rotation point 旋转点

默认情况下，图像围绕其中心点旋转。要使图像围绕另一个点旋转，请使用 CSS 中的转换原点属性指定该点。

如果手动定义，中心点为 50% 50%。您可以更改 2D 图像的 x 和 y 值以及 3D 图像的 z 值。例如：

旋转原点设置在右上角：

.rotate {
	transform-origin: 100% 0%;
}

旋转原点设置在左上角：

.rotate {
	transform-origin: 0% 0%;
}

For more cool tri