零起点HTML5+CSS3+JavaScript+jQuery前端开发案例式教程PPT课件（共14章）07html+css创建变形动画.pptVIP

第6章 html+css创建变形动画 6.1 html5新增结构元素 HTML5保留了以前绝大部分标签，废弃了部分元素。以前的HTML页面只能用元素作为结构元素，阅读代码带来了一些困扰，因此，在HTML5中增加了大量的结构元素， 6.2 css3新增transform 设置元素的变形。 6.3创建变形动画 6.3.1 框架分析 6.3创建变形动画 6.3.1 框架分析 大框 6.3.2 框架对应html代码 ① ② 6.3.2 框架对应html代码 img src=images/js1.jpg p哈士/p span西伯利亚雪橇犬/span img src=images/js2.jpg p秋田/p span狐狸犬种/span img src=images/js4.jpg p柴犬/p span狩猎犬讲师/span img src=images/js3.jpg p爱斯基摩犬/p span极地雪橇犬/span ③ 6.3.3 框架对应css样式分析 大框 /*设置大框的背景颜色、宽度 1200px，外边距上下10 px左右居中、内边距上下10px*/ .box{ background-color: #eee; width: 1200px; margin:10px auto; padding:10px 0; } ① 6.3.3 框架对应css样式分析 /*清设置ul为弹性布局、设置列表项的水平对齐方式*/ ul{ display: flex; justify-content: space-between; } /*设置每个列表项背景颜色、宽度、边框倒圆角、居中对齐、溢出部分隐藏、每个列表项宽度会自动伸缩，设置 外边距*/ li{ background-color: #fff; width: 200px; /* li倒圆角15px，文本居中对齐，溢出隐藏、自适应为1、外边距20px */ border-radius:15px ; text-align:center ; overflow: hidden; flex:1; margin:20px; } ② 6.3.3 框架对应css样式分析 /*设置为块状元素，外边距上下30px 左右居中、边框倒圆角、图片的过渡效果为0.8秒*/ img{ display: block; margin:30px auto; border-radius:50% ;transition:.8s; } /*设置高度、行高、底部边框线、加粗、字颜色*/ p{ height: 60px;line-height: 60px; border-bottom:1px solid #ddd; font-weight: 600;color:#555; } /*设置为块级元素、宽度、高度、行高、设置文字的过渡效果为0.8秒*/ span{ display: block;width: 100%; height:50px;line-height: 50px; transition:.8s; } /* 鼠标经过列表项时，图片旋转360度，放大1.3倍，离开再旋转还原 */ li:hover img{ transform:rotate(360deg) scale(1.3);} /*鼠标经过列表项时，文字背景色变红色，并且字加粗，离开还原*/ li:hover span{ background-color: #f00;font-weight: 600; } ③ * * * * * * * *