网页制作案例教程HTML5+CSS3 课件 项目10 CSS3变形、过渡和动画

HTMLCSS项目10CSS3过渡、变形和动画效果网页制作案例教程（HTML5+CSS3）教学目标掌握熟悉熟练掌握2掌握@keyframes语法规则。3掌握animate动画属性的使用。能够熟练地在网页中添加合适的变形、过渡和动画效果。4掌握CSS3变形和过渡属性的设置。11CSS3变形2CSS3过渡3CSS3动画4制作河南文化旅游网介绍栏目任务分解PART0101CSS3变形CSS3变形设置

变形基本语法格式选择器{transform：none|变形函数;}none，表示无变形设置CSS3变形变形函数函数描述translate(x[,y])设置对象的平移。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。translateX(x)设置对象X轴（水平方向）的平移。translateY(y)设置对象Y轴（垂直方向）的平移。rotate(angle)设置对象的旋转，angle值为旋转角度。scale(x,y)设置对象的缩放。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值。scaleX(x)设置对象X轴（水平方向）的缩放。scaleY(y)设置对象Y轴（垂直方向）的缩放。skew(angle[,angle])设置对象扭曲效果。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0skewX(angle)设置对象X轴（水平方向）的扭曲skewY(angle)设置对象Y轴（垂直方向）的扭曲CSS3变形动手实践demo1CSS3变形<ul><li>未变形</li><liclass=“translate”>位置移动：向右移动10px,向下移动5px</li><liclass="rotate">旋转30度</li><liclass="scale">缩放：水平方向为为原来的0.5，垂直方向为1.5倍</li><liclass="skew1">水平方向（X轴）的扭曲20deg</li><liclass="skew2">垂直方向（Ｙ轴）的扭曲20deg</li><liclass="skew3">水平垂直方向（XＹ轴）同时扭曲20deg</li></ul>CSS3变形ul{list-style-type:none;margin-left:20px;}li{width:80px;height:80px;border:1pxsolid#55aaff;margin:20px;float:left;background-color:#b1b1b1;}.translate{transform:translate(10px,5px);}.rotate{transform:rotate(30deg);}.scale{transform:scale(0.5,1.5);}.skew1{transform:skewX(20deg);}.skew2{transform:skewY(20deg);}.skew3{transform:skew(20deg,20deg);}CSS3变形设置变形中心基本语法格式选择器{transform-origin：x轴位置y轴位置；}transform-origin属性设置对象以某个原点进行转换。默认的变形中心点：50%50%，效果等同于centercenter，对象的中心。该属性提供2个参数值，第一个用于横坐标，第二个用于纵坐标。如果只提供一个参数，该值将用于横坐标；纵坐标将默认为50%。设置浮动效果<div></div><divclass="rotate1"></div><divclass="rotate2rotate1"></div>div{height:100px;width:100px;background-color:rgb(221,81,231);margin:30px;}.rotate1{transform:rotate(45deg);}.rotate2{transform-origin:00;-webkit-transform-origin:00;-moz-transform-origin:00;}动手实践demo2PART0202CSS3过渡CSS3过渡CSS3可以为元素从一种样式转变为另一种样式时添加过渡效果，例如渐显、渐弱、动画快慢等。CSS3过渡设置

过渡基本语法格式选择器{transition：[过渡属性]||[过渡时长]||[过渡动画类型]||[延迟时间]；}过渡属性用来设置对象中的参与过渡的属性，值为all、none或者[property]，默认值为all;过渡时长用来设置对象过渡的持续时间，值为time，默认值为0;过渡动画用来设置对象过渡的动画类型，默认值为ease;延迟时间用来设置对象延迟过渡的时间，值为time，默认值为0。transition:border-radius2s;transition:border-color.5sease-in.1s,background-color.5sease-in.1s;例CSS3过渡过渡

动画函数描述linear线性过渡，等同于贝塞尔曲线(0.0,0.0,1.0,1.0)ease平滑过渡，等同于贝塞尔曲线(0.25,0.1,0.25,1.0)ease-in由慢到快，等同于贝塞尔曲线(0.42,0,1.0,1.0)ease-out由快到慢，等同于贝塞尔曲线(0,0,0.58,1.0)ease-in-out由慢到快再到慢，等同于贝塞尔曲线(0.42,0,0.58,1.0)CSS3过渡动手实践demo3input{width:200px;height:30px;line-height:30px;border-radius:8px;border:1.5pxsolid#31b2e0;outline:none;transition:all1sease-in-out;}input:focus{width:300px;box-shadow:005pxrgb(176,232,102);}<inputtype="text"placeholder="请输入用户名">PART0303CSS3动画CSS3动画使用CSS3可以设置关键帧动画，需要两个步骤使用@keyframes规则创建动画步骤1使用animation属性为元素添加动画步骤2CSS3动画创建动画基本语法格式@keyframes动画名称{关键帧选择器{CSS样式;}}动画名称：表示当前动画的名称，它将作为引用动画时的唯一标识，不能为空。关键帧选择器：指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同，表示动画的开始，to和100%效果相同，表示动画的结束。CSS样式：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。@keyframesopacityAnimation{from{opacity:0;}to{opacity:1;}}例CSS3动画animation属性基本语法格式选择器{animation：[动画名称]||[持续时间]||[过渡类型]||[延迟]||[动画播放次数]||[动画方向]||[动画样式应用模式]}动画名称（animation-name）：用来设置对象所应用的动画名称，默认值为none。持续时间（animation-duration）：用来设置对象动画的持续时间，默认值为0。过渡类型（animation-timing-function）：用来设置对象动画的过渡类型，默认值为ease；延迟（animation-delay）：用来设置对象动画开始前的延迟时间，默认值为0。动画播放次数（animation-iteration-count）：用来设置对象动画的循环次数。取值为数字或infinite，默认值为1。动画方向（animation-direction）用来设置对象动画在循环中是否反向运动。normal：正常方向，alternate：正向与反向交替，默认值为normal。.flower{animation-name:animation1}.box{animation:opacityAnimation4slinearinfinite;}CSS3动画属性名描述none默认值，不设置对象动画之外的状态。在动画执行之前和之后不会应用动画中的任何样式到目标元素forwards设置对象动画播放后状态为动画结束时的状态。在动画结束后元素将应用动画结束时属性值backwards设置对象动画播放前的状态为动画开始时的状态。在animation-delay定义的延迟期间应用动画的起始关键帧中定义的属性值both设置对象状态为动画结束和开始的状态。在动画结束后元素将应用动画结束时属性值，在animation-delay定义的延迟期间应用动画的起始关键帧中定义的属性值动画样式应用模式（animation-fill-mode）：用来设置当动画不播放时（动画完成时，或当动画有一个延迟未开始播放时）要应用到元素的样式。@keyframesanimation1{from{border-radius:0;}to{border-radius:50%;}}.box1{width:100px;height:100px;background-color:orange;animation:animation15s;animation-fill-mode:forwards;}CSS3动画动手实践demo4body{margin:0;padding:0;}.box{width:300px;margin:10pxauto;}.pic{width:100%;display:block;animation:rotate4slinearinfinite;}@keyframesrotate{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}} <divclass="box"><imgsrc="img/flower.png"class=”pic”></div>PART0404制作河南文化旅游网介绍栏目河南是中华民族文化发祥地之一。历史上曾有20多个王朝在此建都,境内著名的古都洛阳、开封和安阳,均为中国七大古都之列。河南具有丰富的文化史迹,文物古迹众多，如龙门石窟、少林寺、老君山等。下面我们要制作河南文化旅游网介绍栏目。制作河南文化旅游网介绍栏目网页整体布局<divclass="introduce"><divclass="caption"></div><divclass="mission"><divclass="mission-left"></div><divclass="mission-right"></div><divclass="clear"></div></div><divclass="more"><span>查看更多</span></div></div>制作河南文化旅游网介绍栏目网页布局<divclass="caption"><H2>河南文化</H2><hr><p>THECULTUREOFHENAN</p></div><divclass="mission"><divclass="mission-left"><imgsrc="img/longmen.jpg"class="pic1"/><imgsrc="img/shaolin.jpg"class="pic2"/></div><divclass="mission-right"><h3>河南介绍</h3><p>河南是中华民族与华夏文明的发源地...</p></div><divclass="clear"></div></div>制作河南文化旅游网介绍栏目网页基础样式*{padding:0;margin:0;}.clear{clear:both;}.introduce{

width:1100px;margin:10pxauto;padding:20px;padding-bottom:10px;background-color:#f7f7f7;}制作河南文化旅游网介绍栏目网页基础样式<linkrel="stylesheet"href="css/main.css">制作河南文化旅游网介绍栏目网页标题样式.captionh2{margin-bottom:20px;font-size:30px;text-align:center;}.captionhr{background-color:#FF8C00;width:20px;height:3px;margin:0auto;border:none;}.captionp{margin-top:5px;color:#DDDDDD;text-align:center;}制作河南文化旅游网介绍栏目网页左右栏目样式.mission{margin-top:20px;

width:100%;

overflow:hidden;}.mission>*{box-sizing:border-box;

width:45%;

margin:10px15px;}.missionh3{color:#FF8C00;}.missionp{line-height:30px;

text-indent:2em;

color:#3F444E;}.mission-left{position:relative;

float:left;}.mission-left.pic1{width:86%;

margin-left:70px;

transform:skewX(10deg);}.mission-left.pic2{position:absolute;

width:40%;

left:10px;

bottom:-30px;

border-radius:10px;

opacity:.8;}.mission-right{float:right;}制作河南文化旅游网介绍栏目底部“查看更多”样式.more{position:relative;height:50px;animation:show-more1sease2sboth;}.more>span{padding:10px20px;border:1pxsolid#FF8C00;position:absolute;right:300px;border-radius:10px;transition:all1s;}.more>span:hover{background-color:#ecdd99;}制作河南文化旅游网介绍栏目网页动画设置/*定义标题动画*/.caption{animation:show-caption1sease;}@keyframesshow-caption{from{opacity:0;transform:rotate(0deg);}20%{transform:rotate(-3deg);}80%{transform:rotate(3deg);}to{opacity:100%;transform:rotate(0