网页设计基础与实战课件

上传人：1*** IP属地：广东上传时间：2025-02-16 格式：PPTX 页数：75 大小：1.85MB 积分：30 举报 版权申诉

已阅读5页，还剩70页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第6章实现CSS3动画6.1实现2Dtransform转换6.2制作animation动画6.3实现transition过渡和3D转换了解CSS3动画掌握CSS3中2D和3D的transform转换掌握CSS3中的transition过渡掌握CSS3中的animation动画引言在早期的Web设计中，通常依赖于Flash或JavaScript脚本来实现网页中的动画或特效。而CSS3提供了对动画的强大支持，CSS3动画包括transform转换、animation动画和transition过渡3大模块，transform转换可对网页元素进行转换操作，animation动画可实现帧动画的效果，transition过渡可实现CSS属性的过渡变化，CSS3动画的应用极大的带动了网页设计的灵活性。6.1实现2Dtransform转换transform-origin属性案例—清凉夏日主题宣传rotate()旋转translate()位移skew()倾斜scale()缩放6.1实现2Dtransform转换6.1.1

transform-origin属性在CSS3中，2D转换是使用transform属性来实现文字或图像的各种转换效果，如位移、旋转、缩放、倾斜等转换方法。这些转换方法的使用，让网页效果更丰富，提升了用户的体验感。CSS3中位移、旋转、缩放和倾斜都是默认以元素的中心原点进行转换，可通过transform-origin属性设置原点的位置，一旦中心原点改变，转换的效果就会不一样。transform-origin:x-axisy-axisz-axis;语法格式transform-origin属性可用来设置transform转换的原点位置。默认情况下，原点位置为元素的中心点。transform-origin属性的语法格式如下所示。transform-origin属性的语法格式如下。6.1实现2Dtransform转换6.1.1transform-origin属性transform-origin属性可取值位置、百分数或px值，上述语法格式中，属性值的具体说明如6.1所示。名称说明值x-axisX轴原点坐标位置（left、center、right）/百分数/px值y-axisY轴原点坐标位置（top、center、bottom）/百分数/px值z-axisZ轴原点坐标数值如transform-origin:leftbottom;/transform-origin:50%30%;/transform-origin:20px40px;属性值由于2D转换没有Z轴，transform-origin属性可不设置Z轴的值。6.1实现2Dtransform转换6.1.2translate()位移translate()位移是2D转换的一种位移方法。translate()方法用于元素位移操作，在CSS3中，可以使用translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。translate()方法与relative相对定位相似，元素位置的改变不会影响到其他元素。transform:translate(x,y);或者分开写transform:translateX(n);transform:translateY(n);语法格式translate()位移的语法格式如下。6.1实现2Dtransform转换6.1.2translate()位移translate()位移可以改变元素的位置，以自身位置为基准进行移动，其值可为正数或负数，单位是px（像素）或%（百分比）。translate()位移方法可分为3种情况，具体说明如表所示。translate()方法说明translate(x,y)元素在水平方向（X轴）和垂直方向（Y轴）同时移动translateX(n)元素在水平方向（X轴）移动，n值为正数时，以自身位置为基准向右移动translateY(n)元素在垂直方向（Y轴）移动，n值为正数时，以自身位置为基准向下移动原心的改变对于位移没有任何效果。6.1实现2Dtransform转换6.1.3

rotate()旋转rotate()旋转是2D转换的一种旋转方法。rotate()方法用于元素旋转操作，在CSS3中，可以使用rotate()方法将元素相对于原点进行旋转。transform:rotate(度数);语法格式rotate()旋转的语法格式如下。6.1实现2Dtransform转换6.1.3

rotate()旋转rotate()旋转可根据给定的角度顺时针或逆时针旋转元素，其值可为正数或负数，单位是deg（角度单位）。角度值的取值范围为0~360，当角度值为正数时，以顺时针（默认值）方向进行旋转；当角度值为负数时，以逆时针方向进行旋转。rotate()旋转方法采用就近旋转目标角度的原则，当旋转角度大于或等于180度时，会逆时针旋转，如设置值为200deg，则会逆时针旋转160deg。原心的改变会影响旋转的效果，默认以中心原点进行旋转。6.1实现2Dtransform转换6.1.3

rotate()旋转演示说明制作4个宽度和高度相同，自上而下排列的“盒子”。第1个和第3个“盒子”保持原始状态，第2和第4个“盒子”，分别进行不同先后顺序的位移和旋转，演示其不同效果。<body><divid="late">参照元素1</div><divclass="late-1">先位移再旋转</div><divid="rotate">参照元素2</div><divclass="rotate-1">先旋转后位移</div></body>主体代码

例6.1/*分别设置第2个和第4个元素*/.late-1{background-color:#b39cd2;transform:translateX(150px)rotate(50deg);/*先位移再旋转*/-webkit-transform:translateX(150px)rotate(50deg);/*添加浏览器前缀，兼容浏览器*/}.rotate-1{background-color:#dda2b6;transform:rotate(50deg)translateX(150px);/*先旋转再位移*/-webkit-transform:rotate(50deg)translateX(150px);}CSS代码

例6.16.1实现2Dtransform转换6.1.3

rotate()旋转演示说明制作4个宽度和高度相同，自上而下排列的“盒子”。第1个和第3个“盒子”保持原始状态，第2和第4个“盒子”，分别进行不同先后顺序的位移和旋转，演示其不同效果。在使用位移与旋转实现转换效果时，要注意两者之间设置的先后顺序，顺序不一样则效果也会不一样。如果先进行位移，那么会在位移后的位置原地旋转；如果先进行旋转，那么会改变原点的位置，按照旋转后的原心方向进行位移。6.1实现2Dtransform转换6.1.4scale()缩放scale()缩放是2D转换的一种缩放方法。scale()方法用于元素缩放操作，缩放指的是缩小和放大。在CSS3中，可以使用scale()方法将元素相对于原点进行缩放。transform:scale(w,h);或者分开写transform:scaleX(w);transform:scaleY(h);语法格式scale()缩放的语法格式如下。6.1实现2Dtransform转换6.1.4scale()缩放scale()缩放根据给定的宽度和高度参数增加或减少元素的大小，其值可为正数或负数。scale()缩放方法可分为3种情况，具体说明如表所示。scale()方法说明scale(w,h)元素在水平方向（X轴）和垂直方向（Y轴）同时缩放。当两个参数值一样时，可以只写一个scaleX(w)元素在水平方向（X轴）缩放，w值为宽度缩放的比例值scaleY(h)元素在垂直方向（Y轴）移动，h值为高度缩放的比例值比例值为0~1时，表示缩小。比例值大于1时，表示放大。比例值为1时，处于默认状态，既不放大，也不缩小。比例值为负数时，元素翻转后再缩放。原心的改变会影响缩放的效果，默认以中心原点进行缩放，利用scale()方法进行缩放的元素不影响网页的布局。6.1实现2Dtransform转换6.1.5skew()倾斜skew()倾斜是2D转换的一种倾斜方法。skew()方法用于元素倾斜操作，在CSS3中，可以使用skew()方法将元素倾斜显示。transform:skew(x,y);或者分开写transform:skewX(x);transform:skewY(y);语法格式skew()倾斜的语法格式如下。6.1实现2Dtransform转换6.1.5skew()倾斜skew()倾斜方法使元素沿指定方向倾斜给定角度，角度值表示元素的倾斜角度，角度值可为正数或负数，单位是deg（角度单位）。skew()方法说明skew(x,y)元素在水平方向（X轴）和垂直方向（Y轴）同时倾斜，即元素沿水平方向（X轴）和垂直方向（Y轴）倾斜给定角度skewX(x)元素在水平方向（X轴）倾斜，即元素沿水平方向（X轴）倾斜给定角度skewY(y)元素在垂直方向（Y轴）倾斜，即元素沿垂直方向（Y轴）倾斜给定角度角度值的取值范围为0~360，当角度值为正数时，以顺时针（默认值）方向进行倾斜；当角度值为负数时，以逆时针方向进行倾斜。原心的改变会影响倾斜的效果，默认以中心原点进行倾斜。6.1实现2Dtransform转换6.1.5skew()倾斜演示说明制作4个宽度和高度相同，自上而下排列的“盒子”。第1个和第3个“盒子”保持原始状态，第2个“盒子”改变原心的位置进行缩放，第4个“盒子”改变原心的位置进行倾斜，演示其不同效果。<body><divid="form"><divid="scale">缩放参照元素1</div><divclass="scale-1">缩放元素</div><divid="skew">倾斜参照元素2</div><divclass="skew-1">倾斜元素</div></div></body>主体代码

例6.2/*分别设置第2个和第4个元素*/.scale-1{transform-origin:rightbottom;/*改变元素原心位置*/background-color:#ffe4c6;transform:scale(0.8);/*缩小元素*/-webkit-transform:scale(0.8);/*添加浏览器前缀，兼容浏览器*/}.skew-1{transform-origin:rightbottom;/*改变元素原心位置*/background-color:#dda2b6;transform:skewX(50deg);/*倾斜元素*/-webkit-transform:skewX(50deg);}CSS代码

例6.26.1实现2Dtransform转换6.1.5skew()倾斜演示说明制作4个宽度和高度相同，自上而下排列的“盒子”。第1个和第3个“盒子”保持原始状态，第2个“盒子”改变原心的位置进行缩放，第4个“盒子”改变原心的位置进行倾斜，演示其不同效果。6.1实现2Dtransform转换6.1.6案例-清凉夏日主题宣传本实例是一个关于清凉夏日的主题宣传页面。该页面主要由<div>块元素、<img>图像标签、<h3>标题标签和<p>段落标签构成，清凉夏日主题宣传页面结构简图如图6.3所示。<head><title>清凉夏日主题宣传</title>

<linktype="text/css"rel="stylesheet"href="theme.css"></head><body><divid="summer">

<divclass="header"><imgclass="bg"src="../image/theme.jpg"alt></div>

<divid="main"class="clearfix">

<divid="feature-1">

<divclass="ficon-1"><imgclass="img1"src="../image/sun.png"alt></div>

<divclass="details-1"><h3class="t1">天气</h3><p>夏天是一个炎热的季节，晴空万里，太阳透过密密层层的叶子，圆影照射在地上，把地面烤得滚烫滚烫的。走在路上，迎面的风似热浪扑来，天气热得像个蒸笼。</p></div></div>

</div></div></body>代码实现6.1实现2Dtransform转换6.1.6案例-清凉夏日主题宣传主体代码

例6.3/*使用伪元素清除浮动*/.clearfix::after{content:"";display:block;clear:both;}/*设置特色模块1和特色模块2左浮动*/#feature-1,#feature-2{

float:left;}/*使用空标签，清除特色模块1和特色模块2左浮动带来的影响*/.clear{clear:both;}/*设置特色模块3和特色模块4左浮动*/#feature-3,#feature-4{

float:left;}/*统一设置4个特色模块*/#feature-1,#feature-2,#feature-3,#feature-4{

position:relative;/*设置相对定位*/}/*统一设置4个特色模块中的左部图标*/.ficon-1img,.ficon-2img,.ficon-3img,.ficon-4img{position:absolute;/*设置绝对定位*/left:15px;/*设置偏移位置*/top:15px;}代码实现6.1实现2Dtransform转换6.1.6案例-清凉夏日主题宣传CSS部分代码

例6.3/*统一设置4个特色模块中的特色详情部分*/.details-1,.details-2,.details-3,.details-4{width:250px;

/*设置左外边距和上外边距*/margin-left:90px;margin-top:12px;}/*鼠标放至<header>头部标签内容上时，设置背景图片*/.header:hover.bg{

transform:scale(0.95);/*背景图片缩小0.95倍*/}/*鼠标放至“ficon-1”<div>块标签内容上时，设置内部图片*/.ficon-1:hover.img1{

transform-origin:lefttop;/*以左上角为原心进行转换*/transform:scale(1.1)rotate(30deg);/*图片先放大1.1倍，再顺时针旋转30度*/}/*鼠标放至“ficon-2”<div>块标签内容上时，设置内部图片*/.ficon-2:hover.img2{

transform-origin:rightbottom;/*以右下角为原心进行转换*/transform:scale(1.1)rotate(-30deg);/*图片先放大1.1倍，再逆时针旋转30度*/}/*鼠标放至“details-1”<div>块标签内容上时，设置内部文字标题*/#feature-1:hover.t1{

transform:translate(102px);/*文字标题向右位移102px*/}6.1实现2Dtransform转换6.1.6案例-清凉夏日主题宣传代码实现在上述CSS代码中，在设置页面主体部分的转换效果时，首先，统一为4个特色模块设置相对定位，再统一为4个特色模块中的左部图标设置绝对定位，使用位置属性设置图标的具体位置，然后统一设置右部的特色详情介绍。接下来就是具体实现元素转换效果。当鼠标放至<header>头部标签内容上时，设置背景图片缩小0.95倍，当鼠标分别放至4个特色模块中的左部图标时，可改变原点位置，设置图片先放大1.1倍，再以不同方向旋转30度，当鼠标分别放至特色详情介绍的内容上时，设置文字标题向右位移102px。本节小结本节内容主要讲解了设置transform转换原点位置的transform-origin属性，以及4种实现转换效果的translate()位移、rotate()旋转、scale()缩放和skew()倾斜方法。通过本节的学习，希望读者可以了解CSS动画中的4种转换效果，以及掌握其使用方法。6.2制作animation动画@keyframes规则案例—无缝轮播图动画浏览器前缀animation属性6.2制作animation动画随着前端技术的不断升级，在网页上实现动画效果的方式随之增加。其中，CSS3的animation属性可直接实现动画效果，可以取代许多网页的动画图像和Flash动画，以及JavaScript实现的效果。animation动画不需要触发任何事件，就可以显式的随时间变化来改变元素的CSS属性，从而达到动画效果。animation动画主要由keyframes关键帧、animation属性和CSS样式属性3个部分组成，资源占用少，不仅减少内存空间，还使网页更具有灵动性。6.2制作animation动画@keyframes规则用于创建动画，在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。在动画过程中，可以多次更改CSS样式的设定。动画过程变化的发生有2种设置方式，1种是使用关键字“from”和“to”，另1种是使用百分比。在创建动画时，通常以百分比来规定变化发生的时间，0％是开头动画，100％是结束动画，其中0%对应的是from，100%对应的是to。6.2.1

@keyframes规则设置方式6.2制作animation动画6.2.1

@keyframes规则@keyframes规则的基本语法格式如下所示。语法格式@keyframes动画名称{from{CSS样式}to{CSS样式}}或者在一个@keyframes规则中可以由多个百分比构成的，即在“0%”到“100%”之间创建多个百分比，为每个百分比中的动画效果元素添加上不同的CSS样式，从而达到一种不断变化的效果，使动画效果呈现得更细腻。@keyframes动画名称{0%{CSS样式}......100%{CSS样式}}6.2制作animation动画animation属性通过定义多个关键帧以及定义每个关键帧中的元素属性来实现复杂的动画效果。animation属性是一个简写属性，主要包含animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode和animation-play-state这8个子属性。6.2.2

animation属性6.2制作animation动画animation-name属性表示动画的名称，也是需要绑定到选择器的keyframes名称，可以通过@keyframes关键帧样式来找到对应的动画名称。6.2.2

animation属性animation-name属性animation-name:keyframename|none;语法格式animation-name属性的语法格式如下。6.2制作animation动画animation-duration属性表示动画的持续时间，单位可以设置成s（秒）或ms（毫秒）。6.2.2

animation属性animation-duration属性animation-duration:time;语法格式animation-duration属性的语法格式如下。animation-duration属性的默认值是0，这意味着没有动画效果，因此必须设置动画的持续时间。6.2制作animation动画animation-timing-function属性表示动画的速度曲线，指定动画将如何完成一个周期。6.2.2

animation属性animation-timing-function属性animation-timing-function:value;语法格式animation-timing-function属性的语法格式如下。6.2制作animation动画animation-timing-function属性值的具体说明如表所示。6.2.2

animation属性animation-timing-function属性属性值说明ease默认值。动画以低速开始，然后加快，在结束前变慢linear匀速。动画从头到尾的速度是相同的ease-in动画以低速开始ease-out动画以低速结束ease-in-out动画以低速开始和结束6.2制作animation动画续表。6.2.2

animation属性animation-timing-function属性属性值说明cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值。可能的值是从0~1的数值。step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画step-end在变化过程中，都是以上一帧的显示效果来填充间隔动画steps()可传入两个参数，第一个是大于0的整数，将动画等分成指定数目的小间隔动画，根据第二个参数来决定显示效果。第二个参数设置后和step-start，step-end同义，在分成的小间隔动画中判断显示效果。animation属性提供了cubic-bezier值，也就是贝塞尔曲线。贝塞尔曲线是应用于二维图形应用程序的数学曲线，可以通过（贝塞尔官网）来获取想要设置的样式。6.2制作animation动画animation-delay属性表示执行动画效果的延迟时间，默认值为0，单位是s（秒）或ms（毫秒）。6.2.2

animation属性animation-delay属性animation-delay:time;语法格式animation-delay属性的语法格式如下。动画延迟时间的数值可以是负数，动画效果会从该时间点开始，之前的动作不执行。例如，将属性值设置为-2s时，动画会马上开始，直接跳过前2秒进入动画，即前2秒的动画不执行。6.2制作animation动画animation-iteration-count属性表示动画的执行次数。6.2.2

animation属性animation-iteration-count属性animation-iteration-count:number|infinite;语法格式animation-iteration-count属性的语法格式如下。animation-iteration-count属性有2个属性值。number为一个数值，定义应该播放多少次动画。infinite为指定动画应该播放无限次，即动画执行无限次。6.2制作animation动画animation-direction属性表示是否应该轮流反向播放动画。6.2.2

animation属性animation-direction属性animation-direction:normal|reverse|alternate|alternate-reverse;语法格式animation-direction属性的语法格式如下。6.2制作animation动画animation-direction属性值的具体说明如表所示。6.2.2

animation属性animation-direction属性属性值说明normal默认值。动画按正常播放reverse动画反向播放alternate动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放alternate-reverse动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放值得注意的是，如果动画被设置为只播放1次，则该属性将不起作用。动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放，而animation-direction属性可以重写该行为。6.2制作animation动画animation-fill-mode属性可控制动画停止位置。在正常情况下，动画结束后会回到初始状态，可通过animation-fill-mode属性设置动画结束时的停止位置。6.2.2

animation属性animation-fill-mode属性animation-fill-mode:none|forwards|backwards|both;语法格式animation-fill-mode属性的语法格式如下。6.2制作animation动画animation-fill-mode属性值的具体说明如表所示。6.2.2

animation属性animation-fill-mode属性属性值说明none默认值。动画在执行之前和之后不会应用任何样式到目标元素forwards动画停止在结束状态，即停止在最后一帧backwards动画回到初始状态both动画遵循forwards和backwards的规则。也就是说，animation-fill-mode相当于同时配置了backwards和forwards，意味着在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式animation-fill-mode属性值设置为backwards时，要参考animation-direction属性的取值。当animation-direction属性值为“normal”或“alternate”时，回到初始状态；当animation-direction属性值为“reverse”或“alternate-reverse”时，停止在最后一帧。6.2制作animation动画animation-play-state属性定义动画的播放状态。6.2.2

animation属性animation-play-state属性animation-play-state:paused|running;语法格式animation-play-state属性的语法格式如下。animation-play-state属性有2个属性值。paused表示暂停动画；running表示播放动画，为默认值。一般情况下是通过JavaScript方式控制动画的暂停和播放。6.2制作animation动画animation属性的简写格式如下所示。6.2.2

animation属性animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;简写格式值得注意的是，定义动画时，必须定义动画的名称和动画的持续时间。如果省略持续时间，则animation-duration属性值默认为0，动画将无法执行。6.2制作animation动画由于浏览器厂商众多，一些新出现的CSS3属性在不同的浏览器上会出现兼容问题。为了解决这一情况，可在这些CSS3属性上加入浏览器引擎前缀，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。常见的浏览前缀的具体说明如表所示。6.2.3

浏览器前缀属性值内核前缀Chrome(谷歌浏览器)和Safari(苹果浏览器)WebKit内核-webkit-Firefox(火狐浏览器)Gecko内核-moz-IE(IE浏览器)Trident内核-ms-Opera(欧朋浏览器)Presto内核-o-6.2制作animation动画浏览器内核就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释会有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。IE10和Firefox浏览器（>=16版本）支持没有前缀的animation属性，Firefox浏览器（<16版本）使用-moz-前缀，由于现在Firefox浏览器的版本通常不低，Firefox浏览器可以直接使用没有前缀的animation属性，但是Chrome、Safari和Opera浏览器不支持，因此animation属性需使用webkit前缀。6.2.3

浏览器前缀6.2制作animation动画使用浏览器前缀示例如下。6.2.3

浏览器前缀@-webkit-keyframesmyAnim{0%{background:#f00;}50%{background:#0f0;}100%{background:yellowgreen;}}6.2制作animation动画6.2.4案例-无缝轮播图动画本实例是一个关于清凉夏日主题背景的浏览动画页面。该页面主要由<div>块元素、<ul>无序列表、<span>内联元素、<img>图像标签和<h3>标题标签构成，页面结构简图如图所示。<head><metacharset="UTF-8"><title>无缝轮播图动画</title><linktype="text/css"rel="stylesheet"href="animation.css"></head><body><h3>清凉夏日主题浏览</h3><divid="cartoon"><ulclass="picture"><li><span>1</span><imgsrc="../image/summer-1.jpg"alt=""></li><li><span>2</span><imgsrc="../image/summer-2.jpg"alt=""></li><li><span>3</span><imgsrc="../image/summer-3.jpg"alt=""></li><li><span>4</span><imgsrc="../image/summer-4.jpg"alt=""></li><li><span>5</span><imgsrc="../image/summer-5.jpg"alt=""></li><li><span>6</span><imgsrc="../image/summer-6.jpg"alt=""></li></ul></div></body>代码实现6.2制作animation动画6.2.4案例-无缝轮播图动画主体代码

例6.4/*设置外层容器*/#box{

width:650px;height:300px;margin:10pxauto;

overflow:hidden;/*隐藏溢出的内容部分*/}/*设置内层容器*/.picture{

width:3900px;height:300px;

list-style:none;/*取消项目标记*/}/*设置项目列表与图片的宽度和高度相同*/.picture>li,img{width:650px;height:300px;}/*设置项目列表*/.picture>li{

float:left;/*向左浮动*/position:relative;/*设置相对定位*/animation:summer22sease2sinfinitealternate;/*设置动画效果*/-webkit-animation:summer22sease2sinfinitealternate;/*添加浏览器前缀，兼容浏览器*/}代码实现6.2制作animation动画6.2.4案例-无缝轮播图动画CSS部分代码

例6.4/*设置图片中右下角的序号*/span{width:18px;height:18px;line-height:18px;text-align:center;color:#FF3300;display:inline-block;/*转化为内联块元素*/border:1pxsolid#FF3300;/*设置边框样式*/border-radius:50%;/*设置圆角*/position:absolute;/*设置绝对定位*/right:70px;/*设置偏移位置*/bottom:20px;}/*使用@keyframes规则创建动画*/@keyframessummer{0%{left:0}20%{left:-650px}45%{left:-1300px}60%{left:-1950px}80%{left:-2600px}100%{left:-3250px}}@-webkit-keyframessummer{0%{left:0}20%{left:-650px}45%{left:-1300px}60%{left:-1950px}80%{left:-2600px}100%{left:-3250px}}6.2制作animation动画6.2.4案例-无缝轮播图动画代码实现在上述CSS代码中，首先，使用overflow属性隐藏外层容器溢出的内容部分，再设置内层容器中的无序列表，使用float属性将6个项目列表设置向左浮动，并添加相对定位，以及使用animation属性设置动画效果。然后设置背景图片中的右下角序号，为<span>内联元素添加绝对定位，使用位置属性设置图标的具体位置。最后使用@keyframes规则创建动画，配合animation属性实现动画效果。本节小结本节内容主要讲解了@keyframes规则创建动画，animation属性设置动画具体实现效果，以及有关浏览器前缀的使用方法。通过本节的学习，希望读者可以使用CSS3的animation属性在网页中添加动画。6.3实现transition过渡和3D转换transition属性案例—旋转夏日主题背景3Drotate()旋转3D转换属性3D其他转换6.3实现transition过渡和3D转换CSS3的transition过渡属性允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在光标单击、光标移过、获得焦点或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。transition过渡属性是一个简写属性，主要包含transition-property、transition-duration、transition-timing-function和transition-delay这4个子属性。6.3.1

transition属性6.3

实现transition过渡和3D转换transition-property属性规定设置过渡效果的CSS属性的名称，也就是表明需要对元素的哪一个属性进行过渡操作。6.3.1

transition属性transition-property属性transition-property:none|all|property;语法格式transition-property属性的语法格式如下。6.3

实现transition过渡和3D转换transition-property属性值的具体说明如表所示。6.3.1

transition属性transition-property属性属性值说明none表示没有属性获得过渡效果all表示所有属性获得过渡效果property定义应用过渡效果的CSS属性的名称列表，列表以“，”（逗号）分隔6.3

实现transition过渡和3D转换transition-duration属性表示过渡的持续时间，单位可以设置成s（秒）或ms（毫秒）。6.3.1

transition属性transition-duration属性transition-duration:time;语法格式transition-duration属性的语法格式如下。6.3

实现transition过渡和3D转换transition-timing-function属性表示过渡的速度曲线，指定过渡将如何完成一个周期。6.3.1

transition属性transition-timing-function属性transition-timing-function:value;语法格式transition-timing-function属性的语法格式如下。transition-timing-function与animation-timing-function的动画形式完全一样，属性的取值相同，默认情况下是ease形式。6.3

实现transition过渡和3D转换transition-delay属性表示执行过渡效果的延迟时间，默认值为0，单位是s（秒）或ms（毫秒）。6.3.1

transition属性transition-delay属性transition-delay:time;语法格式transition-delay属性的语法格式如下。过渡延迟时间的数值可以是正数或负数，transition-delay与animation-delay的效果完全一样。6.3

实现transition过渡和3D转换transition过渡和animation动画都能在网页上实现动态效果，但它们之间是存在差异的，具体有以下4点。6.3.1

transition属性过渡效果与动画效果的区别transition过渡需要事件触发，无法在网页加载时自动发生。animation动画不需要事件触发，可直接实现动画效果。transition过渡是一次性的，不能重复发生，除非再次触发。animation动画能执行无限次。transition过渡只有两个状态，即开始状态和结束状态，不能定义中间状态。animation动画可定义多个状态。一条transition过渡规则，只能定义一个属性的变化，不能涉及多个属性。animation动画能定义多个属性的变化。6.3实现transition过渡和3D转换CSS3的3D转换功能与2D转换功能类似，2D转换元素可以在平面空间内进行位置或形状的转换，而3D转换元素可以在三维空间（也就是立体空间）内进行位置或形状的转换，具有更丰富的视觉效果。3D即三维空间，是指在平面二维系中又加入了一个方向向量构成的空间系。3D指的是坐标轴的三个轴，即x轴、y轴、z轴，其中x表示左右空间，y表示上下空间，z表示前后空间，这样就形成了视觉立体感。3D转换主要有perspective、transform-style、perspective-origin和backface-visibility4个属性。6.3.2

3D转换属性6.3

实现transition过渡和3D转换perspective属性规定3D元素的透视效果。perspective属性可以简单理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由自身的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。6.3.23D转换属性perspective属性perspective:number|none;语法格式perspective属性的语法格式如下。6.3

实现transition过渡和3D转换当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。值得注意的是，perspective属性只影响3D转换元素。6.3.23D转换属性perspective属性属性值说明none默认值。与0相同，不设置透视number元素距离视图的距离，单位为px（像素）perspective属性值为none和像素值，具体说明如表所示。6.3

实现transition过渡和3D转换transform-style属性规定被嵌套元素如何在3D空间中显示。6.3.23D转换属性transform-style属性transform-style:flat|preserve-3d;语法格式transform-style属性的语法格式如下。6.3

实现transition过渡和3D转换transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。6.3.23D转换属性transform-style属性属性值说明flat表示所有子元素在2D平面呈现preserve-3d表示所有子元素在3D空间中呈现transform-style属性值为flat和preserve-3d，具体说明如表所示。6.3

实现transition过渡和3D转换perspective-origin属性定义3D元素所基于的X轴和Y轴，即设置3D元素的基点位置，允许改变3D元素的底部位置。6.3.23D转换属性perspective-origin属性perspective-origin:x-axisy-axis;语法格式perspective-origin属性的语法格式如下。perspective-origin与transform-origin的属性取值相似，可参考transform-origin的属性值。值得注意的是，perspective-origin属性必须定义在父元素上，需要与perspective属性一同使用，以便将视点移至元素的中心以外位置。6.3

实现transition过渡和3D转换backface-visibility属性定义元素不面向屏幕时是否可见，即决定当元素旋转后，背面是否可见。6.3.23D转换属性backface-visibility属性backface-visibility:visible|hidden;语法格式backface-visibility属性的语法格式如下。backface-visibility属性有2个属性值。visible表示背面是可见的；hidden表示背面是不可见的。6.3

实现transition过渡和3D转换6.3.3

3Drotate()旋转方法说明rotateX(a)元素以坐标轴X轴，从下往上旋转。rotateX(a)函数功能等同于rotate3d(1,0,0,a)rotateY(a)元素以坐标轴Y轴，从左往右旋转。rotateY(a)函数功能等同于rotate3d(0,1,0,a)rotateZ(a)元素以坐标轴中心为原点，顺时针旋转。rotateZ(a)函数功能等同于rotate3d(0,0,1,a)rotate3d(x,y,z,a)表示围绕自定义旋转轴进行旋转3D转换使用基于2D转换的相同属性，首先介绍3D的rotate()旋转效果。CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()4个功能函数，这4种方法的具体说明如所示。6.3

实现transition过渡和3D转换6.3.3

3Drotate()旋转rotate3d(x,y,z,a)中的取值说明如下。x是一个0~1之间的数值，主要用来描述元素围绕X轴旋转的矢量值。y是一个0~1之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。z是一个0~1之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。a是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，其值为负值，元素逆时针旋转。6.3

实现transition过渡和3D转换6.3.4

3D其他转换3D位移可使元素在三维空间里进行移动，translateZ()位移和translate3d()位移的具体说明如表如表所示。x通常为像素值，表示元素在三维空间里沿X轴进行位移。y通常为像素值，表示元素在三维空间里沿Y轴进行位移。z通常为像素值，表示元素在三维空间里沿Z轴进行位移，视觉效果如同以坐标轴原点为基准，放大或缩小。3Dtranslate()位移方法说明translateZ()元素在坐标轴Z轴上进行位移，其效果等同于缩放translate3d(x,y,z)元素在三维空间里移动，使用三维向量坐标定义元素在每个方向的移动位置translate3d(x,y,z)中的取值说明如下。6.3

实现transition过渡和3D转换6.3.4

3D其他转换3D缩放主要有scaleZ()和scale3d()两种方法。scaleZ()缩放和scale3d()缩放的具体说明如表如表所示。x为数值，表示元素在三维空间里以X轴为基准，Y轴方向放大或缩小，即左右放大或缩小。y为数值，表示元素在三维空间里以Y轴为基准，X轴方向放大或缩小，即上下放大或缩小。z为数值，没有效果，看不出变化。3Dscale()缩放方法说明scaleZ()元素在Z轴上按比例缩放，默认值为1。没有任何效果scale3d(x,y,z)元素在三维空间里缩放，按比例在坐标轴各方向上进行缩放scale3d(x,y,z)中的取值说明如下。scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的转换方法一起使用才会有效果。6.3实现transition过渡和3D转换6.3.5案例-旋转夏日主题背景本实例是一个关于清凉夏日主题背景的3D旋转页面。该页面主要由<div>块元素、<ul>无序列表和<h3>标题标签构成，页面结构简图如图所示。<head><metacharset="UTF-8"><title>旋转夏日主题背景</title><linktype="text/css"rel="stylesheet"href="transition.css"></head><body><divid="rotate">

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页设计基础与实战课件

文档简介

温馨提示

最新文档

评论

网页设计基础与实战课件

文档简介

温馨提示

最新文档

评论

相关文档