HTML基础

标签

1.文本格式化，图片，音频，视频，链接标签

列表（有序，无序，自定义）

表格

1.表格（基本使用）

2.表格（合并单元格）

表单

1.input基本使用

2.表单占位符，单选框，上传文件，表单域标签，按钮，下拉菜单，文本域，label

3.有语义的标签

字符实体

CSS基础

文本样式

1.文字粗细，倾斜，字体，font属性

2.文本缩进，水平对齐方式，文本修饰，行高

选择器

1.子代选择器，交集选择器

2.选择器（hover伪类）

背景

1.背景色，背景图，背景平铺，背景位置

2.背景复合属性

标签嵌套

优先级

盒子模型

1.盒子边框

2.盒子模型内边距和外边距

3.內减模式

4.清除默认内外边距

5.版心居中

6.外边距问题（合并现象）

7.外边距问题（塌陷现象）

8.行内元素的内外边距问题

选择器

1.结构伪类

2.伪元素

标准流

浮动

1.浮动的特点

2.浮动的影响和清除浮动的目的

3.清除浮动-直接设置父元素高度

4.清除浮动-额外标签法

5.清除浮动-单伪元素消除法

6.清除浮动-双伪元素消除法

7.清除浮动-给父元素加overflow : hidden

定位

1.相对定位

2.绝对定位

3.子绝父相

4.绝对定位居中

5.固定定位

6.定位层级关系

光标

圆角边框

1.基本使用

2.正圆和胶囊状

溢出隐藏

元素隐藏效果

透明度opacity

CSS精灵图

1.精灵图

2.背景图缩放

垂直对齐

1.文字对齐问题

2.垂直对齐方式

盒子阴影

过渡

HTML骨架

SEO三大标签

字体图标基本使用

平面转换

1.位移

2.绝对定位元素居中

3.旋转

4.转换原点

5.多重转换效果

6.缩放

7.渐变

空间转换

1.空间位移

2.透视

3.旋转

4.立体呈现

动画

1.动画实现步骤

2.animation复合属性

3.animation拆分写法

4.精灵动画

HTML基础

    <b>加粗</b><strong>加粗</strong><u>下划线</u><ins>下划线</ins><i>倾斜</i><em>倾斜</em><s>删除</s><del>删除</del><!-- alt：替换文本，当图片不显示就显示 --><img src="图片1.jpg" alt="这是阿丽塔"
title="这是title文字，鼠标悬停时显示" width="400" height=""><!-- 显示播放控件controls，自动播放autoplay，循环播放loop --><audio src="./蓝心羽 - 阿拉斯加海湾.flac" controls autoplay loop></audio><!-- 自动播放autoplay（谷歌浏览器中需配合muted实现静音播放） --><video src="../../../../迅雷下载/蜘蛛侠/1080p.HDTC中英双字[66影视www.66Ys.Co].mp4"width="400" controls autoplay muted loop></video><!-- 跳转地址href,target的取值_self默认值关闭当前网页跳转到目标网页，
取值为_blank不会关闭当前网页 --><a href="https://www.bilibili.com/" target="_blank">跳转到b站</a><br><a href="./10-音频标签.html" target="">点我啊，点了就去10-音频标签</a><!-- 当开发网站初期，我们不知道跳转链接地址，href的值写#（空链接） --><br><a href="#">空链接，不知道跳哪</a>

列表（有序，无序，自定义）

    <!-- 有序列表u1只包含li标签，li标签可以包含任何内容 --><ul><strong>水果列表</strong><li>榴莲</li><li>苹果</li><li>火龙果</li><!-- 无序列表ol只包含li标签 --><ol><strong>排行榜</strong><li>张三：100</li><li>李四：99</li></ol><!--自定义列表 dl只允许包含dt/dd标签，dt表示题目，dd表示自定义列表针对于题目的每一项内容 --><dl><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd></dl>

表格

1.表格（基本使用）

    <!-- table包含tr:行，tr包含td:单元格 --><!-- border边框宽度，width表格宽度 --><!-- 表头th，caption表格标题标签写在table标签内 --><table border="1" width="600" height="400"><caption><strong>学生成绩单</strong></caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody><tr><td>张三</td><td>100分</td><td>真棒第一名</td></tr><tr><td>张三</td><td>100分</td><td>真棒第一名</td></tr></tbody><tfoot><tr><td>张三</td><td>100分</td><td>真棒第一名</td></tr></tfoot></table>

2.表格（合并单元格）

   <!-- 跨行合并rowspan，左上原则跨列合并colspan --><table border="1"><caption><strong>学生成绩单</strong></caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody><tr><td>张三</td><td rowspan="2">10分</td><td>真棒第2名</td></tr><tr><td>张三</td><td>真棒第一名</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="2">1分</td></tr></tfoot></table>

表单

1.input基本使用

    文本框：<input type="text"><br><br>密码框：<input type="password"><br><br>单选框：<input type="radio"><br><br>多选框：<input type="checkbox"><br><br>文件选择：<input type="file">

2.表单占位符，单选框，上传文件，表单域标签，按钮，下拉菜单，文本域，label

  <!-- 占位符 --><input type="text" placeholder="请输入用户名"><input type="password" placeholder="请输入密码"><!-- 单选框：属性name成一组；属性checked默认选中 -->性别：<input type="radio" name="sex" checked>男 <input type="radio" name="sex">女<!-- 上传文件 --><input type="file" multiple><!-- 表单域标签：form --><form action="">用户名：<input type="text"><br><br>密码：<input type="password"><br><br><!-- submit提交按钮；reset重置按钮 ；button普通按钮 --><input type="submit" value="提交注册"><input type="reset"><input type="button" value="普通按钮"><!-- 属性 xx="xxx" --><!-- 谷歌默认button是提交按钮 --><button>我是按钮</button><button type="submit">提交按钮</button><button type="reset">重置按钮</button><button type="button">普通按钮，没有任何功能</button><!-- 下拉菜单：默认选中属性selected --><select><option>北京</option><option>广州</option><option selected>珠海</option><option >深圳</option></select><!-- 文本域 --><textarea cols="60" rows="30"></textarea><!-- label -->性别：<!-- 第一种方法 --><input type="radio" name="sex" id="nan"><label for="nan">男</label><!-- 第二种方法 --><label><input type="radio" name="sex">女</label>

3.有语义的标签

    <header>网页头部</header><nav>网页导航</nav><footer>网页底部</footer><aside>侧边栏</aside><section>网页区块</section><article>网页文章</article>

字符实体

    <!--网页不认识多个空格，只认识一个，要用空格实体名称：&nbsp；  -->这是HTML文档，现在要&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学习字符实体。

CSS基础

文本样式

1.文字粗细，倾斜，字体，font属性

      div{/* 加粗 */font-weight: 700;}/* 变细 */h1{font-weight: 400;}div{/* 倾斜 */font-style: italic;}em{/* 正常不倾斜 */font-style: normal;}div{/* font-family: 宋体; *//* 如果电脑用户电脑没安装微软雅黑，就往后类推，最后按任意一种无衬线字体系列显示 */font-family: 微软雅黑，黑体，sans-serif;}p{/* font-size: ;font-style；font-weight；font-family ; *//* font:style weight size family； */font-style: normal;font:italic 700 66px 宋体;/* font: 100px 微软雅黑; *//* 一个属性冒号后面书写多个值的写法--复合属性，只能省略前两个 */}

2.文本缩进，水平对齐方式，文本修饰，行高

            /* 文本缩进 */ p{/* text-indent: 50px; *//* 首行缩进2个字，默认字号：16px；32 *//* em：一个字的大小 */text-indent: 2em;}/* 水平对齐方式 */h1{/* text-align: left; *//* text-align: right; */text-align: center;}body{text-align: right;}/* 文本修饰 */div{/* 下划线 */text-decoration: underline;}p{/* 删除线 */text-decoration: line-through;}h2{/* 上划线 */text-decoration: overline;}a{/* 无装饰线，可以去掉a标签的下划线 */text-decoration: none;}/* 行高 */p{/* line-height: 50px; *//* 自己字号的1.5倍 */line-height: 1.5;/* 首行缩进 */text-indent: 2em;/* 66px 宋体 倾斜 加粗 行高是2倍 */font: italic 700 66px/2 宋体;}

选择器

1.子代选择器，交集选择器

        /* 空格隔开的是后代，儿子和孙子。。 *//* div a{color: red;} *//* 只想选中儿子a *//* div的儿子a文字颜色是红色 */div>a{color: red;}p>a{color: black;}/* 必须是p标签且带box类 用交集选择器*/p.box{color: red;}

2.选择器（hover伪类）

        /* 悬停的时候文字颜色是红色 */a:hover{color: red;background-color: green;}div:hover{color: red;}<!-- 任何标签都可以添加伪类，任何标签都可以悬停 -->

背景

1.背景色，背景图，背景平铺，背景位置

        div{/* background-color: pink;background-color: #ccc; *//* 红绿蓝三原色，a是透明度0-1 */background-color:rgba(0, 0,0, 0.5);width: 400px;height: 400px;margin: 0 auto;}div{width: 400px;height: 400px;background-color: pink;background-image: url(./微信图片_20220310221115.png);}div{width: 400px;height: 400px;background-color: pink;background-image: url(./微信图片_20220310221115.png);background-repeat: no-repeat;/* 不平铺no-repeat；按x轴平铺repeat-x; */}div{width: 400px;height: 400px;background-color: pink;background-image: url(./微信图片_20220310221115.png);background-repeat: no-repeat;/* background-position: right 0; *//* background-position: right bottom; *//* background-position: center center;background-position: 50px 0;background-position: 50px 100px; */background-position: -50px 100px;}

2.背景复合属性

        div{width: 400px;height: 400px;/* 不分先后顺序 */background: redurl(./微信图片_20220310221115.png) no-repeat center bottom;/* 背景图位置如果是英文单词可以颠倒顺序；是背景图位置数值则不行 */}

标签嵌套

    <!-- p和h标题不能相互嵌套 --><!-- <p><h1>一级标题</h1></p> --><!-- p里面不能包含div --><!-- <p><div>divdiv</div></p> --><!-- a标签不能嵌套a标签，可以嵌套其他元素 -->

优先级

        /* 优先级：行内式<!important */#box{color: orange;}.box{color: blue;}div{color: green !important;}body{color:red;}/* !important不要给继承的添加，自己有就无法继承父类样式 */

盒子模型

1.盒子边框

        div{width: 200px;height: 200px;background-color: pink;/* border：粗细 线条形式 颜色；不分顺序  *//* solid:实线 *//* border: 1px solid #000; *//* dashed:虚线 *//* border: 5px dashed #000; *//* dotted:点线 *//* border: 5px dotted #000; *//* 某个方向边框:border+方向词 */border-right: 5px dotted #000;border-left: 5px solid #000;border-top: 5px solid #000;border-bottom: 5px solid #000;}

2.盒子模型内边距和外边距

        div{width: 300px;height: 300px;background-color: pink;/* 添加了四个方向的内边距 */padding: 50px;/* padding属性可当做复合属性使用，表示单独设置某个方向的内边距 *//* padding最多取四个值 *//* 四值：上 右 下 左 */padding: 10px 20px 40px 80px;/* 三值：上 左右 下 *//* padding: 10px 40px 80px; */ /* 两值：上下  左右 *//* padding: 10px 80px; */}/* padding多值写法永远都是从上开始顺时针转一圈，如果数不够看对面 */div{width: 100px;height: 100px;background-color: pink;margin: 50px;}

3.內减模式

        div{width: 100px;height: 100px;background-color: pink;border: 10px solid #000;padding: 20px;/* 内减模式 *//* 变成css3的盒子模型，好处：加了border和padding不需要手动减法 */box-sizing: border-box;}

4.清除默认内外边距

        *{margin: 0;padding: 0;}

5.版心居中

        div{width: 1000px;height: 300px;background-color: pink;margin: 0 auto;/* 左右：auto自适应 */}<!-- 版心 ：网页的有效内容 --><!-- 版心居中 -->

6.外边距问题（合并现象）

/* 垂直布局的块级元素上下margin会合并，取一边最大值：合并现象 */div{width: 100px;height: 100px;background-color: pink;}.one{margin-bottom: 60px;}.two{margin-top: 50px;}

7.外边距问题（塌陷现象）

8.行内元素的内外边距问题

    <!-- 行内元素 内外边距 margin padding --><!-- 如果想要通过margin或padding改变行内标签的位置，无法生效 --><!-- 行内标签的margin-top或bottom不生效 --><!-- 行内标签的padding-top或bottom不生效 -->span{/* margin: 100px; *//* padding: 100px; */line-height: 100px;}

选择器

1.结构伪类

        /* 选中第一个 */li:first-child{background-color: green;}/* 找最后一个 */li:last-child{background-color: green;}/* 任意一个 */li:nth-child(5){background-color: green;}/* 倒数第几个 */li:nth-last-child(2){background-color: blue;}/* 偶数 */li:nth-child(2n){} /*奇数 */li:nth-child(2n-1){}/* 前五个 */li:nth-child(-n+5){}/* 4的倍数 */li:nth-child(4n){background-color: green;}

2.伪元素

    <!-- 伪元素 通过css创建标签，装饰性的不重要的小图 --><!-- 找父级，在这个父级里面创建子集标签 --><!-- 老鼠爱大米 -->.father{width: 300px;height: 300px;background-color:pink;}.father::before{/* 内容 */content:'老鼠';color: green;width: 100px;height: 100px;background-color: blue;/* 默认是行内元素，宽高不生效，转块 */display: block;}.father::after{/* content属性必须要写，否则伪元素不生效 */content: '大米';}

标准流

浮动

1.浮动的特点

        /* 浮动的标签 顶对齐 *//* 浮动：在一行排列，宽高生效---浮动后的标签具备行内块的特点 */.one{width: 100px;height: 100px;background-color: pink;float: left;margin-top :50px ;}.two{width: 200px;height: 200px;background-color: blue;float: left;/* 因为有浮动，不能生效-盒子无法水平居中 */margin: 0 auto;

2.浮动的影响和清除浮动的目的

    <!-- 父子级标签，子级浮动，父级没有高度，后面的标准流会受子级影响 -->.top{margin: 0 auto;width: 1000px;/* 受浮动的影响 没有 height: 300px; */background-color: pink;}.bottom{height: 100px;background-color: green;}.left{float: left;width: 200px;height: 300px;background-color: orange;}.right{float: right;width: 790px;height: 300px;background-color: skyblue;}

3.清除浮动-直接设置父元素高度

4.清除浮动-额外标签法

5.清除浮动-单伪元素消除法

6.清除浮动-双伪元素消除法

7.清除浮动-给父元素加overflow : hidden

        .top{margin: 0 auto;width: 1000px;/* 受浮动的影响 没有 height: 300px; */background-color: pink;overflow: hidden;}.bottom{height: 100px;background-color: green;}.left{float: left;width: 200px;height: 300px;background-color: orange;}.right{float: right;width: 790px;height: 300px;background-color: skyblue;}

定位

1.相对定位

        /* 如果left和right都有，以left为准；有top和bottom则以top为准 */.box{position: relative;left: 100px;top: 200px;/* position:relative   相对定位1.占有原来的位置，没有脱标2.仍然具备标签原有的显示模式特点3.改变位置是参考自己原来的位置*/width: 200px;height: 200px;background-color: pink;}

2.绝对定位

        /* css书写：1.定位/浮动/display；2.盒子模型；3.文字属性 */.box{/* 绝对定位：先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位；有父级，但父级没有定位，以浏览器窗口为参照物进行定位 */position: absolute;left: 0;top: 0;/* 1.脱标，不占位2.改变标签的显示特点：具备了行内块的特点（一行共存，宽高生效）*/width: 200px;height: 200px;background-color: pink;}

3.子绝父相

        .father{position: relative;width: 400px;height: 400px;background-color: pink;}.son{/* 相对，绝对 *//* 父级相对定位；子级绝对定位--子绝父相 *//* position: relative;/* position: absolute; *//* right: 100px; */ width: 300px;height: 300px;background-color: skyblue;}.sun{position: absolute;/* left: 20px;top: 30px; */right: 20px;bottom: 50px;width: 200px;height: 200px;background-color: green;}/* 绝对定位查找父级的方式：就近找定位的父级，如逐层找不到就以浏览器窗口为参照进行定位 */

4.绝对定位居中

        .box{/* 绝对定位的盒子不能使用左右margin auto居中 */position: absolute;/* margin: 0 auto; *//* left:50%,整个盒子移动到浏览器中间偏右位置 */left:50%;/* 把盒子向左侧移动盒子的宽度一半 *//* margin-left: -150px; */top: 50%;/* margin-top: -150px; *//* 位移：自己宽度高度的一半 */transform: translate(-50%,-50%);width: 303px;height: 300px;background-color: pink;}

5.固定定位

        /* css书写：1.定位/浮动/display；2.盒子模型；3.文字属性 */.box{position: fixed;left: 0;top: 0;/* 固定定位1.脱标，不占位置2.改变位置参考浏览器窗口3.具备行内块特点 */width: 200px;height: 200px;background-color: pink;}

6.定位层级关系

        div{width: 200px;height: 200px;}.one{position: absolute;left: 20px;top: 50px;background-color: pink;z-index: 1;}.two{position: absolute;left: 50px;top: 100px;background-color: blue;}/* 默认情况下，定位的盒子 后来者居上， z-index:整数；取值越大，显示顺序越靠上；z-index的默认值为0注意：z-index必须配合定位才生效 */

光标

        div{width: 400px;height: 400px;background-color: pink;/* 属性名：cursor 属性值：pointer小手效果；text：工字型；move十字光标 *//* 手型 *//* cursor: pointer; *//* 工字型，表示可以复制 *//* cursor: text; *//* 十字型，表示可以移动 */cursor: move;}

圆角边框

1.基本使用

        .box{width: 200px;height: 200px;background-color: skyblue;margin: 50px auto;/* 一个值：表示4个角都是相同的 *//* border-radius: 10px; *//* 4值：左上 右上 右下 左下----由左上顺时针 *//* border-radius: 10px 20px 40px 80px; *//* border-radius: 10px 40px 80px; *//* 看对角 */border-radius: 10px 80px;}

2.正圆和胶囊状

        .one{width: 200px;height: 200px;background-color: skyblue;margin: 50px auto;/* border: radius 100px; *//* 正圆：50%取盒子的尺寸百分之五十 */border-radius: 50%;}/* 胶囊状：长方形，取值为高度的一半 */.two{width: 300px;height: 200px;background-color: blue;border-radius: 100px;}

溢出隐藏

        .box{width: 300px;height: 300px;background-color: skyblue;/* 溢出隐藏 *//* overflow: hidden; *//* 滚动：无论内容是否超出都显示滚动条 *//* overflow: scroll; *//* auto:根据内容是否超出判断是否显示滚动条 */overflow: auto;}

元素隐藏效果

        .one{/* 占位隐藏 *//* visibility: hidden; *//* *****不占位置 */display: none;background-color: pink;}

透明度opacity

        div{width: 800px;height: 800px;background-color: pink;/* 属性opacity取值0-1 */opacity: 0.5;}

CSS精灵图

1.精灵图

        /* 精灵图的标签都用行内标签span */span{display: inline-block;width: 18px;height: 24px;/* background-color:pink; */background-image: url(./images/taobao.png);/* 背景图位置属性：改变背景图的位置 *//* 水平方向位置 垂直方向位置 *//* 想要向左侧移动图片，位置取负； */background-position: -3px 0;}b{display: inline-block;width: 25px;height: 21px;background-image: url(./images/taobao.png);background-position: 0 -90px;}

2.背景图缩放

        .box{width: 400px;height: 300px;background-color: pink;background-image: url(./images/1.jpg);background-repeat: no-repeat;/* background-size: 300px; *//* background-size: 50%; *//* 如果图的宽度或高和盒子尺寸相同，则另一个方向停止缩放 */background-size: contain;/* 保证图的宽和高与盒子尺寸完全相同，导致图不完全 *//* background-size: cover; *//* 工作中，图的比例和盒子比例都是相同的，contain，cover效果相同 *//* 复合属性background: color image repeat position;*/}

垂直对齐

1.文字对齐问题

2.垂直对齐方式

盒子阴影

        .box{width: 200px;height: 200px;background-color: skyblue;box-shadow: 5px 10px 20px 10px green inset;/* 注意：外阴影不用写outset不然报错 *//* box-shadow: 5px 10px 20px 10px green outset; */}

过渡

        .box{/* 过渡配合hover使用,谁变化谁添加过渡属性 */width: 200px;height: 200px;background-color: pink;/* 宽度200变600，花费一秒钟 *//* transition: width  1s,background-color 1s; *//* 如果变化属性多直接写all，表示所有 */transition: all 1s;}.box:hover{width: 600px;background-color: red;}

HTML骨架

<!DOCTYPE html>
<!-- 文档类型声明告诉浏览器该网页的HTML版本 --><html lang="en">
<head><!-- charset="UTF-8"规定网页的字符编码 --><meta charset="UTF-8"><!-- ie（兼容性差）/edge --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 宽度=设备宽度：移动端网页的时候要用 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

SEO三大标签

    <!-- meta:desc --><meta name="description" content="bilibili是国内知名的视频弹幕网站，
这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。"><!-- meta：kw --><meta name="keywords" content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,
弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,D高燃"><title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title><!-- link:favicon 浏览器图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

字体图标基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体图标基本使用-类名</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>.iconfont{font-size: 60px;}</style>
</head>
<body><!-- 调用图标：先调用类名iconfont 在调用符号图标的类名 --><i class="iconfont icon-favorites-fill"></i>
</body>
</html>

平面转换

1.位移

        .father {width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {width: 200px;height: 100px;background-color: pink;/* 过渡 */transition: all 0.5s;}/* 鼠标移入到父盒子，son改变位置 */.father:hover .son {/* transform: translate(100px,50px); *//* 百分比：盒子自身尺寸的百分比 *//* transform: translate(100%,50%); *//* transform: translate(-100%,50%); *//* 只给出一个值表示x轴移动距离 *//* transform: translate(100px); */transform: translateY(100px);}

2.绝对定位元素居中

        .father {position: relative;width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {position: absolute;left: 50%;top: 50%;/* 绝对定位  居中第一种方法：自身宽高的一半 *//* margin-left: -100px;margin-top: -50px; *//* 第二种方法 */transform: translate(-50%,-50%);width: 203px;height: 100px;background-color: pink;          }

3.旋转

        img {width: 250px;/* 旋转一定要加过渡 */transition: all 2s;}img:hover{/* 顺时针 *//* transform: rotate(1900deg); *//* 逆 */transform: rotate(-190deg);}

4.转换原点

        img {width: 250px;border: 1px solid #000;transition: all 2s;/* 转换谁原点就在谁加 */transform-origin: right bottom;/* transform-origin: left bottom; */}img:hover {transform: rotate(360deg);}

5.多重转换效果

        .box {width: 800px;height: 200px;border: 1px solid #000;}img {width: 200px;transition: all 6s;}.box:hover img {/* 边走变转 *//* 多重转换 */transform: translate(600px) rotate(360deg);/* 不能先旋转，因为旋转会影响x和y轴，先转x和y轴会变，影响位移方向 *//* transform: rotate(360deg) translate(600px) ; *//* 层叠性导致下面代码后写有效 *//* transform: translate(600px);transform: rotate(360deg); */}

6.缩放

        .box {width: 300px;height: 210px;margin: 100px auto;background-color: pink;}.box img {width: 100%;transition: all 0.5s;}.box:hover img {/* width: 150%; *//* 放大倍数2倍 *//* transform: scale(2); *//* 缩小倍数为0.8 */transform: scale(0.8);}

7.渐变

        .box {width: 300px;height: 200px;/* background-image: linear-gradient(pink,green,red,black); */background-image: linear-gradient(/* 透明transparent */transparent,rgba(0,0,0,.6))}

空间转换

1.空间位移

    .box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover {transform: translate3d(50px,100px,200px);/* 层叠性 *//* transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px); */}

2.透视

    body {/* 透视属性，添加给在父级，一般在800到1200px */perspective: 1000px;}.box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;/* 过渡 */transition: all 0.5s;}.box:hover{/* 正数是向屏幕走来，近大感觉 */transform: translateZ(200px);/* transform: translateZ(-200px); */}

3.旋转

4.立体呈现

动画

1.动画实现步骤

        .box {width: 200px;height: 100px;background-color: pink;/* 使用动画 */animation: change 1s;}/* 定义动画：@keyframes 动画名字{} *//* 一. 定义动画：从200变大到600 *//* @keyframes change {from{width: 200px;}to{width: 600px;}}*//* 二. 定义动画：200 到 500*300 到 800*500 *//* 百分比指的是动画时长的占比 */@keyframes change {0%{width: 200px;}50%{width: 500px;height: 300px;}100%{width: 800px;height:500px}}

2.animation复合属性

        .box {width: 200px;height: 100px;background-color: pink;/* 复合属性animation：动画名字 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态*//* animation: change 1S linear; *//* 分步动画 *//* 3:重复3次播放 *//* animation: change 1s steps(3) 1s 3; *//* 无限循环infinite 动画方向alternate *//* animation: change 1s infinite alternate; *//* 默认值backwards 动画停留在最初的状态 *//* animation: change 1s backwards; *//* 动画停止在最后状态 */animation: change 1s forwards;}@keyframes change {from {width: 200px;}to {width: 600px;}}

3.animation拆分写法

        .box {width: 200px;height: 100px;background-color: pink;animation-name: change;/* 动画时长 */animation-duration: 1s;animation-iteration-count: infinite;}.box:hover {/* 鼠标移入的时候暂停动画 */animation-play-state: paused;}@keyframes change {from {width: 200px;}to {width: 600px;}}

4.精灵动画

    .box {/* 1680/12 :要保证显示区域的尺寸和一个精灵小图的尺寸相同*/width: 140px;height: 140px;/* border: 1px solid #000; */background-image: url(./images/bg.png);/* 12:精灵小图的个数 */animation: move 1s steps(12) infinite,run 5S forwards;}@keyframes move {/* 动画的开始状态和盒子的默认样式相同，可以省略开始状态 *//* from{background-position: 0 0;} */to{/* 1680：精灵图的宽度 */background-position: -1680px 0;}}/* 定义一个盒子移动的动画 */@keyframes run {/* 动画的开始状态和盒子的默认样式相同，可以省略开始状态 *//* from{transform: translateX(0);} */to{transform: translateX(800px);}}

HTML基础，CSS基础相关推荐

前端基础：html基础(css基础和JavaScript基础)/01/B/S网络结构，html文件结构，html标签格式，lt;bodygt;中的一些常用标记
前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...
Html5 学习笔记 --》html基础 css 基础
HTML5 功能 HTML5特点 <!DOCTYPE html> <html lang="zh-cn"> <head><meta char ...
HTML、css基础知识
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表学习目标理解 css的目的作用 css的三种引入方式应用 css三种引用方式的书写通 ...
html与css项目,项目六HTML与CSS基础.doc
项目六HTML与CSS基础.doc 项目六: HTML与CSS基础课题名称:6．2 CSS样式表的使用(一) 教学目标 1．知识与技能目标熟练掌握插入Div 标签和设置样式定义的方法:理解CSS样 ...
Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)
CSS语法基础一.单纯html控制样式的缺点二. CSS✪✪✪ CSS概述 CSS基础语法组成选择器标签选择器类选择器 id选择器通配选择器后代选择器插入样式表的三种方式行内样式 ...
CSS基础_Day04
CSS基础一.CSS继承 1.给 HTML 的 body 元素添加样式每一个 HTML 页面都有一个 body 元素. 我们可以通过设置 background-color 的属性值为黑色,来证明 ...
CSS基础_Day03
CSS基础一.给 div 元素添加背景色 background-color 属性可以设置元素的背景颜色. .green-background {background-color: green; } ...
CSS基础_Day02
CSS基础一.字体 1.更改元素的字体大小字体大小由font-size属性控制. <style>p{font-size:16px;}//设置p元素字体大小为16px </styl ...
CSS基础_Day01
CSS基础一.CSS简介 CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. CSS 的选择器区分大小写,因此要谨慎使用大写. 可以设置以下内容: ...
学习笔记（二）——CSS基础
文章目录一.什么是CSS 二.CSS基本使用 2.1.行内式(内联样式) 2.2.内部样式 2.3.外部样式 2.3.1.嵌入式 2.3.2.导入式三.选择器 3.1.基础选择器 3.1.1.标签 ...