单元3 图文展示网页设计笔记

最新推荐文章于 2024-11-07 16:28:09 发布

原创最新推荐文章于 2024-11-07 16:28:09 发布 · 567 阅读

CC 4.0 BY-SA版权

本文详细介绍了CSS3中的图像标签、背景设置、阴影和渐变、圆角边框、过渡、变形以及3D转换，包括img、figure、figcaption、background属性、box-shadow、text-shadow、线性渐变、径向渐变、圆角边框语法、transition属性、transform属性及其2D和3D转换，以及CSS3动画和CSS精灵技术的应用。

HTML常用图像标签
1、img标签

<img src="图文路径" alt="图片无法显示时显示的文字"/>

2、figure标签和figcaption标签
当需要在网页中添加一个插图时，就可以使用figure标签来实现。figcaption标签是嵌套在figure标签中使用的，用于指定图片的标注。

CSS背景设置 在这里插入图片描述
除上述常用的背景属性外，CSS支持背景属性的合写功能，也成为复合背景属性，用background进行设置，基本语法如下：

选择器{background:background-color||background-image||background-repeat||background-attachment||background-position}

如使用该符合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为transparent none repeat scroll 0% 0%。尽管该属性不可继承，但如果为指定，其父对象的背景颜色和背景图将在对象下面显示。对应的脚本特性为background。
CSS阴影和渐变
1、盒阴影
text-shadow是对象的文本设置阴影，而box-shadow是给对象实现图层阴影，语法格式如下：

对象选择器{box-shadow:投影方式||x轴偏移量||y轴偏移量||阴影模糊半径||阴影扩展半径||阴影颜色}

在这里插入图片描述
2、CSS3渐变
CSS3的渐变属性主要包括线性渐变、径向渐变和重复渐变。
（1）线性渐变
CSS3中的线性渐变通过“background-image:linear-gradient(参数值);”来设置，其基本语法格式如下：

background-image:linear-gradient([<angle>|<side-or-corner>,]color stop,color stop[,color stop]*);

在这里插入图片描述
（2）径向渐变
语法格式：

background-image:radial-gradient(圆心坐标,渐变形状 渐变大小,color stop,color stop[,color stop]*);

在这里插入图片描述
重复渐变
重复渐变对以上两种渐变方式都适用，只需在两个属性前添加“repeating-”，语法格式如下：

/*线性重复渐变*/
repeating-linear-gradient(起始角度,color stop,color stop[,color stop]*)
/*径向重复渐变*/
repeating-radial-gradient(圆心坐标,渐变形状,渐变大小,color stop,color stop[,color stop]*)

CSS3圆角边框
CSS3圆角边框实际上是在矩形的4个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。
border-radius属性的基本语法格式如下：

border-radius:1-4 length|%/1-4 length|%;

length：用于设置对象的圆角半径长度，不可为负值。
如果“/”前后的值都存在，那么“/”前面的值设置水平半径，“/”后面的值设置其垂直半径。如果没有“/”，则表示水平和垂直半径相等。
另外，其4个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的。如果省略bottom-left，则与其top-right相同；如果省略bottom-right，则与其top-left相同；如果省略top-right，则与其top-left相同。
CSS3的过渡（CSS3transition）
CSS3的过渡就是平滑地改变一个元素的CSS值，使元素从一个样式逐渐过渡到另一个样式。要实现这样的效果，必须规定两项内容。
（1）规定应用过渡的CSS属性名称。
（2）规定效果的时长。
CSS3的过渡使用transition属性来定义，transition属性的基本语法格式如下：

transition:property duration timing-function delay;

在这里插入图片描述
CSS3变形（CSS3transform）
CSS3动画相关的第二个属性就是transform，CSS3transform属性允许我们对元素进行旋转、缩放、移动或倾斜，向元素应用2D或3D转换。基本语法格式如下：

transform:none|transform-functions;

transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-functions用于设置变形函数，可以是一个或多个变形函数列表。
1、2D转换
在这里插入图片描述
如果一个元素需要设置多种变形效果，可以使用空格把多个变形属性值隔开。
2、元素的变形原点
元素的变形都有一个原点，元素围绕这个点进行变形或者旋转，默认的起始位置是元素的中心位置。
CSS变形使用transform-origin属性指定元素变形基于的原点，语法格式如下：

transform-origin:x-axis y-axis z-axis;

transform-origin最多接受3个值，分别是x轴、y轴和z轴的偏移量。
在这里插入图片描述
注意：当参数值为0px时，可以省略单位，也可以不写，因为它们都是可选参数。
3、3D转换
3D变形是指某个元素围绕其X轴、Y轴、Z轴进行旋转。

CSS3动画（CSS3animations）
CSS3 animations属性可以解决动画无法在多个状态中转换问题。一个完整的CSS animations由两部分构成：一组定义的动画关键帧和描述该动画的CSS声明。
1、@keyframes规则
在CSS3中使用@keyframes规则来创建动画，keyframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态。
语法格式如下：

@keyframes animationname{
		keyframes-selector{css-styles;}
}

animationname表示当前动画的名称，它将作为引用时的唯一标识，不能为空；keyframes-selector是关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置值是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束；css-styles定义执行到当前关键帧时对应的动画状态。以上三个属性缺一不可。
2、animation属性
animation属性用于描述动画的CSS声明，包括指定具体动画以及动画时长等行为。
基本语法格式如下：

animation:name duration timing-function delay iteration-count direction fill-mode play-state;

在这里插入图片描述
CSS精灵技术（CSS Sprites）
CSS Sprites被称为CSS精灵技术，是一种网页图片应用处理方式。它允许用户将一个页面涉及的所有小图片都包含到一张大图中去，这样，当访问该页面时，只需要载入一次图片，然后利用CSS的“background-image”“background-repeat”“background-position”组合进行背景定位，将一张大图片中的某个部分显示到网页中的固定位置。
CSS精灵技术的使用具体如下：
（1）准备一张精灵图，它是许多小图片的合并，由于精灵图要求不高于200KB，所以这种合并适合于一般小图标素材，不合适大的背景图片。
（2）创建一个容器来加载精灵图片。
（3）编写CSS代码。