HTML5移动Web开发项目化实战教程 项目3 习题答案

1.CSS3实现线性渐变背景答：使用linear-gradient()函数，作为background值，需指定渐变方向（可选）和颜色节点。例子：background:linear-gradient(toright,#fff,#000);（从左到右白到黑渐变）2.径向渐变实现+与线性渐变区别答：实现：用radial-gradient()函数，设置形状/圆心/颜色节点，如background:radial-gradient(circle,#fff,#000);。区别：线性渐变沿直线扩散，径向渐变从圆心向四周辐射。3.设置背景图并覆盖整个元素答：background-image设图片路径，搭配background-size:cover+no-repeat。例子：background:url("bg.jpg")no-repeatcenter/cover;4.box-shadow作用+语法答：作用：给元素加盒子阴影（外/内），增强立体感。语法：box-shadow:水平偏移垂直偏移模糊扩展颜色inset;例子：box-shadow:3px3px5px#ccc;（右3px下3px模糊5px灰色外阴影）5.文本添加阴影答：用text-shadow属性，语法：text-shadow:水平垂直模糊颜色;例子：text-shadow:2px2px4px#000;（文字右2px下2px模糊4px黑色阴影）6.圆角边框实现+border-radius值类型答：实现：设置border-radius属性，值越大圆角越明显。值类型：长度值（px/em）、百分比；支持单值/多值设置不同角。例子：border-radius:8px;（全角8px圆角）、border-radius:50%;（圆形）7.transform作用+3种变形效果答：作用：对元素做2D/3D变形（不影响布局）。例子：平移：transform:translate(20px,0);（右移20px）旋转：transform:rotate(30deg);（顺时针转30度）缩放：transform:scale(1.2);（放大1.2倍）8.CSS3动画实现步骤+@keyframes作用步骤：1.@keyframes定义动画关键帧；2.元素绑定animation（指定动画名/时长）；3.可选配置循环/缓动等。@keyframes作用：定义动画不同阶段的样式规则，是动画核心。例子：css/*步骤1：定义关键帧（动画名：move）*/@keyframesmove{from{transform:translateX(0);}/*起始状态：X轴0位置*/50%{transform:translateX(100px);}/*中间状态：右移100px*/to{transform:translateX(0);}/*结束状态：回到初始位置*/}/*步骤2+3：绑定动画并配置细节*/.box{width:50px;height:50px;background:#f00;animation-name:move;/*绑定动画名*/animation-duration:2s;/*动画时长2秒*/animation-iteration-count:infinite;/*无限循环*/animation-timing-function:ease;/*缓动效果*/}9.无限循环水平移动动画答案：@keyframes定义X轴平移，元素animation设infinite。例子：csscss/*步骤1：定义水平移动的关键帧*/@keyframeshorizontalMove{0%{transform:translateX(0);/*起始位置：最左侧*/}100%{transform:translateX(300px);/*结束位置：右移300px*/}}/*步骤2：为元素绑定动画并设置无限循环*/.move-box{width:60px;height:60px;background-color:#00f;/*核心动画属性（简写形式，更简洁）*/animation:horizontalMove3slinearinfinitealternate;/*简写拆解：animation-name:horizontalMove;//动画名animation-duration:3s;//时长3秒animation-timing-function:linear;//匀速运动animation-iteration-count:infinite;