本文介绍如何通过主 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