Web前端开发（HTML5+CSS3+JavaScript） 课件 第8章 CSS3新特性

Web前端基础技术CSSJSHTML第8章CSS3新特性Contents目录边框阴影/圆角；转换：位移；旋转；缩放过渡动画CSS3基础应用盒子阴影、圆角边框CSS3边框；CSS3转换；CSS3过渡；CSS3动画；CSS3文本效果a.盒子阴影：box-shadow:

xyblur(阴影距离)[spread(扩散距离)]color[inset/outset]xy相对左上角位置出现阴影的起始点，单位px，默认为00（左上角坐标）blur阴影距离,单位px；spread阴影扩散程度（通常省略），单位pxcolor：阴影颜色inset/outset内部阴影/外部阴影（扩散，默认外部outset）b.边框圆角：border-radius:toprightbottomleft；独立属性border-top-left-radius:px;/*左上角*/border-top-right-radius:px;/*右上角*/border-bottom-left-radius:px;/*左下角*/border-bottom-right-radius:px;/*右下角*/border-radius:x1y1x2y2;

/*顺时针：上、右、下、左；各个顶点圆角的半径值*/border-radius:xy;/*对角设置：左上右下右上左下圆角的半径值*/border-radius:x;/*四个半径值相同*/border-radius:50%;/*相对宽高均为50%的半径值，宽度和高度相等时为圆*/border-radius:40px80px

示例

边框阴影与圆角---卡片式商品列表<divclass="container"><divclass="item"><imgsrc="./images/1.avif"/><p>商品描述</p><p>价格</p></div><divclass="item"><imgsrc="./images/2.avif"/><p>商品描述</p><p>价格</p></div><!--重复--></div><style>*{box-sizing:border-box;}.container{width:800px;/*border:1pxsolidred;*//*水平排列，可分行显示*/display:flex;flex-wrap:wrap;}.item{width:200px;margin:10px;/*阴影效果*/box-shadow:0020px#ccc;/*美观目的，给一定内边距*/padding:10px;/*圆角*/border-radius:6px;}.item>img{width:100%;}</style>参见实例v22.

CSS3基础应用---样式属性1.位移（相对当前位置）；2.旋转（相对给定坐标点，默认中心点）；3.缩放；4.倾斜skew(角度)CSS3边框；CSS3转换；CSS3过渡；CSS3动画；CSS3文本效果1.位移：单位px，类似基于相对位置（position:relative）来改变位置。transform:translate(x,y)相对当前位置，偏移原点/中心点的坐标(相对位置移动，还占据原来空间)transform:translateX(x)仅水平方向位移transform:translateY(y):仅垂直方法位移单位：像素px示例：位移<divclass="container"><divclass="div1">仍占据位置，浮动出来，不影响后续元素布局</div></div><style>.container{border:10pxsolidgreen;width:200px;}.div1{width:100px;height:100px;background-color:red;}.container:hover.div1{

transform:translate(100px,100px);}</style>2.平面2D旋转：实例：转换为圆的旋转；transform:rotate(ndeg)角度单位deg，顺时针旋转,默认旋转坐标：中心点.可以更改选择基点:使用transform-origin:lefttop;/*基于左上顶点（00），可以使用关键字或具体数值*/示例：旋转45deg.container:hover.div1{/*transform:translate(100px,100px);*/transform:rotate(45deg)}2.

CSS3基础应用位移（相对当前位置）；旋转（相对给定坐标点，默认中心点）；缩放；4.倾斜skew(角度)CSS3边框；CSS3转换；CSS3过渡；CSS3动画；CSS3文本效果3.缩放

:transform:scale(xn,yn)

宽度高度同时缩放的倍数可以是小数，无单位transform:scaleX(xn)仅宽度缩放transform:scaleY(yn):仅高度缩放

大于1---放大；小于1---缩小<divclass="container"><imgclass="item"src="./images/1.avif"><imgclass="item"src="./images/2.avif"><imgclass="item"src="./images/3.avif"><imgclass="item"src="./images/4.avif"></div>示例缩放图片<style>*{box-sizing:border-box;}.container{width:800px;display:flex;flex-wrap:wrap;}.item{width:100px;height:100px;margin:10px;}.item:hover{transform:scale(1.2,1.2);}</style>使元素沿着水平方向

或垂直方向发生倾斜语法格式：transition:skew(角度)单位：deg位移（相对当前位置）；旋转（相对给定坐标点，默认中心点）；缩放；4.倾斜skew(角度)CSS3边框；CSS3转换；CSS3过渡；CSS3动画；CSS3文本效果skew(30deg,0)==skewX(30deg)skew(-30deg,0)==skewX(-30deg)原始状态

向左推

向右推

skew(0,30deg)==skewY(30deg)skew(0,-30deg)==skewY(-30deg)原始状态

向下推

向上推

<imgsrc="./images/1.jpg"/>

<imgsrc="./images/2.jpg"/>

<imgsrc="./images/3.jpg"/>

<style>

img{

width:200px;

height:200px;

/*距离页面一定距离*/

margin:100px;

transform:skew(0,-30deg);/*垂直方向上倾斜-30度*/

border:2pxsolid#ccc;

}</style>2.

CSS3基础应用CSS3过渡transition(渐变)：根据指定的属性，从其初始值到终止值逐渐变化的过程CSS3边框；CSS3转换；CSS3过渡；CSS3动画；CSS3文本效果语法格式transition:property[属性]duration[持续秒数]timing-function(时间函数)delay（延迟多少秒才开始）

注意：需要过渡的属性必须显式设置初始值

多重效果（多个属性）可以同时进行，每组过渡效果使用逗号分隔property：属性名，即哪个样式属性改变时，触发过渡效果【注意：该属性必须设置初始值！】duration：渐变过程用时，单位：s，即秒times-function：渐变效果，即慢速开始/慢速结束/先慢后快等。delay:延时多少秒开始产生过渡效果附：timing-function属性取值：linear 匀速，规定以相同速度开始至结束的过渡效果ease

规定慢速开始，然后变快，然后慢速结束的过渡效果ease-in 规定以慢速开始的过渡效果ease-out 规定以慢速结束的过渡效果ease-in-out规定以慢速开始和结束的过渡效果示例理解过渡：宽度、高度和背景变化时，产生过渡效果<divclass="main">

理解过渡

</div>.main{

width:200px;height:40px;color:white;background-color:black;

transition:width2s,height1s,color2s,background-color2s;}.main:hover{width:400px;height:100px;background-color:red;}示例效果过渡，缓慢旋转的圆

<!--旋转圆--><divclass="circle"></div>.circle{width:200px;height:200px;border-radius:50%;border:10pxsolidblue;

border-top-color:red;

transition:transform2slinear;}.circle:hover{transform:rotate(90deg);}所有的转换过渡过程，都使用transform属性，不需要初始值2.

CSS3基础应用CSS3动画animation:可以是简单过渡（fromto），也可以在不同阶段使样式产生连续的变化；或不同阶段有不同样式。内容：1：属性；2.简单的过渡；3.暂停/继续；

CSS3边框；CSS3转换；CSS3过渡；CSS3动画；CSS3文本效果animation:组合属性（顺序无关）nameduration【timing-function】

【delay】【iteration-count】

【direction】语法格式animation-name

指定要绑定到选择器的关键帧的名称，必须先定义关键帧名animation-duration

动画指定需要多少秒或毫秒完成animation-timing-function

设置动画将如何完成一个周期(与过渡属性值相同)animation-delay

设置动画在启动前的延迟间隔。animation-iteration-count

整数值，定义动画的播放次数；如果无限循环，使用infinite。animation-direction

指定是否应该轮流反向播放动画。normal、reverse、alternateanimation-fill-mode

规定当动画完成后(100%)，要应用到元素的其他样式（结束样式）。animation-play-state

指定（设置）动画是否正在运行或已暂停。取值paused/running（是否暂停）示例模拟进度条

<divclass="container">

<divclass="progress"></div>

</div><style>

.container{

width:200px;

height:40px;

border:1pxsolid#ccc;

}

.progress{

width:0;

height:100%;

background-color:red;

/*动画效果,引用change关键帧*/

animation:change10slinearinfinitealternate;

/*保持初始状态*/

/*animation-fill-mode:backwards;*/

/*动画结束后，保持终止状态*/

animation-fill-mode:forwards;

}

/*定义关键帧*/

@keyframeschange{

/*初始状态*/

0%{

width:0%;

}

/*中间状态*/

50%{

width:50%;

}

/*终止状态*/

100%{

width:100%;

}

}

/*鼠标悬停时暂停动画*/

.container:hover>.progress{

animation-play-state:paused;

}</style>把持续时间分成3等分理解代码.无限循环旋转的圆；;<style>.circle{width:80px;height:80px;border-radius:50%;border:10pxsolid#ccc;border-top:10pxsolidred;background-color:#ccc;/*动画*/

animation:rotate2sinfinitelinear;}

@keyframesrotate{0%{/*from*/transform:rotate(0deg);}

100%{/*to*/transform:rotate(360deg);}}</style><divclass="circle"></div>2.

CSS3基础应用Overflow：hiddenwhite-space:nowrap;text-overflow:ellipsis注