HTML5响应式网页设计【第四章、页面特效】

最新推荐文章于 2024-08-15 00:16:41 发布

小超学长

最新推荐文章于 2024-08-15 00:16:41 发布

阅读量1k

点赞数

分类专栏： HTML响应式文章标签： css html html5 css3

本文链接：https://blog.csdn.net/GUO__CHAO/article/details/110068763

版权

HTML响应式专栏收录该内容

5 篇文章 2 订阅

订阅专栏

全部笔记

第4章页面特效

4.1过渡

4.1.1过渡介绍

通过CSS3中过渡属性，可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
CSS3中过渡属性如下

属性名	说明
transition-delay	指定过渡开始之前的延迟时间
transition-duration	指定过渡的持续时间
transition-property	指定应用过渡的属性
transition-timing-function	指定过渡期间计算中间值的方式
transition	在一条声明中指定所有过渡细节的简写属性

4.1.2使用过渡

默认情况下，当过渡完成后，元素的外观会立刻回到初始状态。因此大多数过渡成对出现：暂停状态的过渡和方向相反的反向过渡
在指定多个过渡应用属性时，过渡属性的值用逗号隔开
使用过渡时，浏览器需要为每个样式属性计算初始值和最终值之间的中间值
可使用transition-timing-function 属性指定，其取值如下

属性值	说明
ease	指定慢速开始，然后变快，然后慢速结束的过渡效果，默认值
linear	指定以相同速度开始至结束的过渡效果
ease-in	指定以慢速开始的过渡效果
ease-out	指定以慢速结束的过渡效果
ease-in-out	指定以慢速开始，慢速结束的过渡效果

4.2动画

4.2.1CSS3动画介绍

CSS3动画本质上是增强的过渡。在如何从一种CSS3样式过渡到另一种样式的过渡中，可以具有更多选择和控制，以及更多的灵活性
CSS3动画基于关键帧，动画的定义分两部分定义的

使用 @keyframes 规则创建一个动画，用于定义应用动画的属性

在样式声明时，使用 animation 及其相关属性调用关键帧以实现动画

使用@keyframes 规则创建动画，基本语法如下

@keyframes 关键帧组名{
      from{
          起始样式属性值
     }
     to{
          结束样式属性值
     }
}

@keyframes 关键帧组名{
     0%{ 样式属性值 }
     ...
     50%{ 样式属性值 }
     ...
     100%{ 样式属性值 }
}

样式声明时，使用animation及其相关属性调用关键帧以实现动画

animation：关键帧组名 持续时间 动画速度 延迟时间 播放次数

属性名	说明
animation-delay	指定动画开始之前的延迟时间
animation-direction	指定动画循环播放的时间是否反向播放过渡的持续时间
animation-duration	指定动画播放的持续时间
animation-iteration-count	指定动画的播放次数，取值infinite或数值
animation-name	指定动画名称
animation-timing-function	指定动画期间计算中间值的方式。确定动画播放速度的变化

4.3平移和缩放变化

4.3.1CSS3 变换介绍

变换是使元素改变形状、尺寸和位置的一种效果。通过 CSS3 变换能够对元素进行移动、缩放、旋转或扭曲
CSS3中的变换主要通过transform属性和transform-origin属性实现
transform属性指定应用的变换功能

属性值	说明
translate(<长度值或百分数值>)	指定在水平和垂直两个方向上平移元素
translateX(<长度值或百分数值>)	指定在水平方向上平移元素
translateY(<长度值或百分数值>)	指定在垂直方向上平移元素
scale(<数值>)	指定在水平和垂直两个方向上缩放元素
scaleX(<数值>)	指定在水平方向上缩放元素
scaleY(<数值>)	指定在垂直方向上缩放元素

transform属性指定应用的变换功能

属性值	说明
rotate(<角度>)	旋转元素
skew(<角度>)	指定在水平和垂直两个方向上使元素倾斜一定的角度
skewX(<角度>)	指定在水平方向上使元素倾斜一定的角度
skewY(<角度>)	指定在垂直方向上使元素倾斜一定的角度
matrix(4-6个数值，逗号隔开)	指定自定义变换

transform-origin属性指定变换的起点

属性值	说明
<%>	指定元素X轴或者Y轴的起点
<长度值>	指定距离
left	指定X轴上的位置
center
right
top	指定Y轴上的位置
center
bottom

4.3.2平移变换介绍

translate（平移）是在坐标轴上移动的

4.3.3缩放变换介绍

CSS3 缩放变换包含 scale(X,Y)、scaleX(n) 和 scaleY(n) 3 个方法

取值为“1.0”是原始大小，“1.5”表示以 1.5 的比例放大

缩小取值为 0 ～ 1 之间的数

当取值为负数的时候，将元素绕着 X、Y（取决于缩放方向）方向旋转 180 度，然后再进行缩放

4.4旋转和倾斜变化

4.4.1旋转变换介绍

CSS3 中的旋转可通过rotate(<角度>)实现，其中，角度对应的单位是deg
旋转的起点

默认状态以中心为起点

也可使用 transform-origin 属性指定

旋转的角度

为正值顺时针旋转，用负值则逆时针旋转

总结

CSS3中实现过渡效果可使用tansition属性实现，需要设置过渡属性、持续时间、计算中间值方式以及延迟时间
CSS3动画的定义分两部分：使用 @keyframes 规则创建动画，使用animation属性调用关键帧以实现动画
CSS3中的变换主要通过transform属性和transform-origin属性实现 CSS3中的变换包含移动（translate）、缩放（scale）、旋转（rotate）或倾斜（skew）