文章目录
第四周
1.精灵图
1.2精灵图( sprites )的使用
使用精灵图核心:
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到-张大图片中。
2.这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position。
4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
5.因为-般情况下都是往上往左移动,所以数值题值。
千万注意网页中的坐标: x轴右边走是正值,左边走题值，y轴同理。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>利用精灵图拼出自己名字</title>
<style>
span {
display: inline-block;
}
.B {
width: 102px;
height: 109px;
background: url(images/abcd.jpg) -121px -11px;
}
.E {
width: 98px;
height: 109px;
background: url(images/abcd.jpg) no-repeat -483px -8px;
}
.L {
width: 98px;
height: 112px;
background: url(images/abcd.jpg) no-repeat -5px -276px;
}
.L1 {
width: 98px;
height: 112px;
background: url(images/abcd.jpg) no-repeat -5px -276px;
}
.A {
width: 110px;
height: 110px;
background: url(images/abcd.jpg) no-repeat 0 -8px;
}
</style>
</head>
<body>
<span class="B"></span>
<span class="E"></span>
<span class="L"></span>
<span class="L1"></span>
<span class="A"></span>
</body
2.字体图标
表现的是图片，实际是文字
超好用的字体图标网站
3.CSS三角
网页中常见一-些三E角形,使用CSS直接画出来就可以,不必做成图片或者字体图标。
-张图，你就知道CSS三角是怎么来的了,做法如下:
div {
width: 0;
height: 0;
line- -height: 0;
font-size: 0;
border: 50px solid transparent;
border- left-color: pank;
}
就会得到一个 这个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS 三角制作</title>
<style>
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
</head>
<body>
<div class="jd">
<span></span>
</div>
</body>
</html>
4.CSS用户界面样式
4.1鼠标样式cursor
li {cursor: pointer; }
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户界面样式-鼠标样式</title>
</head>
<body>
<ul>
<li style="cursor: default;">我是默认的小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor: text;">我是鼠标文本样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
</body>
</html>
4.2轮廓线outline
给表单添加outline:0;或者outline: none;样式之后,就可以去掉默认的蓝色边框。input {outline: none; }
4.3防止拖拽文本域resize
but实际开发中,我们文本域右下角是不可以拖拽的。加上了这个textarea{ resize: none; }就可以实现无法拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户界面样式-表单轮廓和防止拖拽文本域</title>
<style>
input, textarea {
/* 取消表单轮廓 */
outline: none;
}
textarea {
/* 防止拖拽文本域 */
resize: none;
}
</style>
</head>
<body>
<!-- 1. 取消表单轮廓 -->
<input type="text">
<!-- 2. 防止拖拽文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
5. vertical-align属性应用
只有行内元素，行内块元素才有这个属性，块元素是没有的
5.1图片、表单和文字对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>利用vertical-align实现图片文字垂直居中对齐</title>
<style>
img {
/* vertical-align: bottom; */
/* 让图片和文字垂直居中 */
vertical-align: middle;
/* vertical-align: top; */
}
textarea {
vertical-align: middle;
}
</style>
</head>
<body>
<img src="images/ldh.jpg" alt=""> pink老师是刘德华
<br>
<textarea name="" id="" cols="30" rows="10"></textarea> 请您留言
</body>
</html>
5.2解决图片底部默认空白缝隙问题
bug :图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。
主要解决方法有两种:
1.给图片添加vertical-align:middle | top| bottom等。 (提倡使用的)
2.把图片转换为块级元素display: block;
6.溢出的文字省略号显示
1.单行文本溢出显示省略号
必须满足三个条件
1.先强制一行内显示文本
white- space: nowrap;
(默认normal 自动换行)
2.超出的部分隐藏
overflow: hidden;
3.文字用省略号替代超出的部分
text-overflow: ellipsis;
2.多行文本溢出显示省略号
多行文本溢出显示省略号,有较大兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webkit内核)
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
7.常见布局技巧
1. margin负值运用
为了避免这种情况，我们需巧妙运用margin的负值
给每个盒子一个margin-left:-1px；让每个边框右边的边框压过它
<title>margin负值的巧妙运用</title>
<style>
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
/* ul li:hover {
1. 如果盒子没有定位，则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;
} */
ul li:hover {
/* 2.如果li都有定位，则利用 z-index提高层级 */
z-index: 1;
border: 1px solid blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
CSS三角强化
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
border-width: 100px 50px 0 0 ;
可得到右边那个蓝色的直角三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS三角强化的巧妙运用</title>
<style>
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大 */
/* border-top: 100px solid transparent;
border-right: 50px solid skyblue; */
/* 左边和下边的边框宽度设置为0 */
/* border-bottom: 0 solid blue;
border-left: 0 solid green; */
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
border-width: 100px 50px 0 0 ;
}
.price {
width: 160px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color:red;
text-align: center;
color: #fff;
font-weight: 700;
margin-right: 8px;
}
.miaosha i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="miaosha">
¥1650
<i></i>
</span>
<span class="origin">¥5650</span>
</div>
</body>
</html>
注意子绝父相
以及如果给大盒子中的一个小盒子加了float:left;右边那一部分会自动环绕(。。。。。我这该死的贫乏的表达能力）
8. CSS初始化
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化
简单理解: CSS初始化是指重设浏览器的样式。 (也称为CSS reset )
每个网页都必须首先进行CSS初始化
这里我们以京东css初始化代码为例。
Unicode编码字体:
把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释( SS代码时候出现乱码
的问题。
比如:
黑体\9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
CSS3的新特性
属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有att 属性的E元素 |
| E[att=“val”] | 选择具有att 属性且属性值等于val的E元素 |
| E[att^=“val”] | 匹配具有att属性且值以val开头的E元素 |
| E[att$=“val”] | 匹配具有att属性且值以val结尾的E元素 |
| E[att*=“val”] | 匹配具有att属性且值中含有val的E元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增属性选择器</title>
<style>
/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
/* input[value] {
color:pink;
} */
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {
color: red;
}
/* 首先是section 然后具有class属性 data结尾 */
section[class$=data] {
color: blue;
}
div.icon2 {
color: skyblue;
}
/* 类选择器和属性选择器 伪类选择器 权重都是 10 */
</style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" value="请输入用户名">
<input type="text"> -->
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
</body>
</html>
2.3结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中最后一一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个. |
| E:nth-of-type(n) | 指定类型E的第n个 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增结构伪类选择器</title>
<style>
/* 1. 选择ul里面的第一个孩子 小li */
ul li:first-child {
background-color: pink;
}
/* 2. 选择ul里面的最后一个孩子 小li */
ul li:last-child {
background-color: pink;
}
/* 3. 选择ul里面的第2个孩子 小li */
ul li:nth-child(2) {
background-color: skyblue;
}
/* 第6个孩子 */
ul li:nth-child(6) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
</body>
</html>
nth-child(n)选择某个父元素的一个或多个特定的子元素
● n可以是数字.关键字和公式
● n如果是数字,就是选择第n个子元素，里面数字从1开始…
● n可以是关键字: even偶数, odd奇数
● n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增选择器nth-type-of</title>
<style>
ul li:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(even) {
background-color: skyblue;
}
/* nth-child 会把所有的盒子都排列序号 */
/* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1) {
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
<!-- 区别 -->
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
</html>
区别:
- nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E , 然后再根据E找第n个孩子
小结
● 结构伪类选择器般用于选择父级里面的第几个孩子
● nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
● nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E , 然后再根据E找第n个孩子
● 关于nth-child(n)我们要知道n是从0开始计算的,要记住常用的公式
● 如果是无序列表,我们肯定用nth-child更多 类选择器、属性选择器、伪类选择器,权重为10。
2.4伪元素选择器(重点)
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意:
●before和after创建一个元素 ，但是属于行内元素
●新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
●语法: element::before {}
before和after 必须有content属性
●before在父元素内容的前面创建元素, after 在父元素内容的后面插入元素
●伪元素选择器和标签选择器一 样，权重为1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪元素选择器before和after</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before 权重是2 */
/* div标签选择器，权重为1 before伪元素，权重也为1 */
div::before {
/* before元素为行内元素，要想加宽高，可以加浮动，也可以改变其display */
/* 这个content是必须要写的 */
/* display: inline-block; */
content: '我';
/* width: 30px;
height: 40px;
background-color: purple; */
}
div::after {
content: '小猪佩奇';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>
2.5 CSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box、border-box ,这样我们
计算盒子大小的方式就发生了改变。
可以分成两种情况:
- box-sizing: content-box子大小为width + padding + border ( 以前默认的)
- box-sizing: border-box盒子大小为width
如果盒子模型我们改为了box-sizing: border-box， 那padding和border就不会撑大盒子了(前提padding
和border不会超过width宽度)
2.6 CSS3其他特性(了解)
滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter:函数();
例如: filter: blur(5px); blur模糊处理 数值越大越模糊
CSS3 2D转换
转换( transform )是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
转换( transform )你可以简单理解为变形
2D转换之移动translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
1.语法
transform: translate(x,y);或者分开写
transform:
translatelaX(n) ;
transform: translateY(n) ;
2.重点
● 定义2D转换中的移动,沿着X和Y轴移动元素
● translate最大的优点:不会影响到其他元素的位置
一个盒子动了，不会影响另外一个盒子
● translate中的百分比单位是相对于自身元素的translate:(50%,50%);
● 对行内标签没有效果
<!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>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 即使y轴不移动也不能省略，要写为0 */
transform: translate(100px,0);
/* 等效写法 transform: translateX(100px); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
要想让盒子垂直居中，可以用定位和translate配合着做
<!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>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin: 0 auto;
position: relative;
height: 500px;
width: 500px;
background-color: pink;
}
p {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
background-color: rgb(141, 193, 241);
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
2D转换之旋转rotate
1.语法
trans form:rotate (度数)
2.重点
● rotate里面跟度数，单位是deg比如rotate(45deg)
● 角度为正时,顺时针,负时,为逆时针
● 默认旋转的中心点是元素的中心点
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
css小三角制作 不用字体图标也能完成
<!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>Document</title>
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 2px solid #ccc;
}
div::after {
position: absolute;
content: '';
top: 8px;
right: 10px;
height: 10px;
width: 10px;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
transform: rotate(45deg);
transition: all .2s;
}
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2D转换中心点transform-origin
我们可以设置元素转换的中心点
1.语法
transform-origin: X y;
2.重点
● 注意后面的参数x和y用空格隔开
●xy 默认转换的中心点是元素的中心点(50% 50%)
●还可以给xy 设置像素或者方位名词( top bottom left right center )
4.5 2D转换之缩放scale
缩放,顾名思义,可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
1.语法
transform:scale(x,y);
2.注意
● 注意其中的x和y用逗号分隔
● transform:scale(1,1) : 宽和高都放大一倍,相对于没有放大
● transform:scale(2,2) : 宽和高都放大了2倍
● transform:scale(2) : 只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2)
● transform:scale(0.5,0.5) :缩小
● scale缩放最大的优势 :可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
以前的盒子我们缩放往往是采用改变其width和height，然后会发现
效果是这样的
其bottom-top是稳定不变的，而且还会影响后边的盒子。而scale就不会有这样的担忧，这就是他的优势。而且scale还可以设置缩放中心点。
2D转换总结
- 转换transform我们简单理解就是变形有2D和3D之分
- 我们暂且学了三个分别是位移旋转和缩放 2D移动translate(x,
y)最大的优势是不影响其他盒子 ，里面参数用% ,是相对于自身宽度和高度来计算的 - 可以分开写比如translateX(x)和translateY(y)
- 2D旋转rotate(度数)可以实现旋转元素 度数的单位是deg
- 2D缩放sacle(x,y) 里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子
- 设置转换中心点transform-origin:xy;参数可以百分比、 像素或者是方位名词
- 当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前
5.CSS3动画
5.1动画的基本使用
制作动画分为两步:
1.先定义动画
2.再使用(调用)动画
1.用keyframes定义动画(类似定义类选择器)
@keyframes动画名称{
0%{
width: 100px;
}
100%{
width: 200px;
}
}
2.元素使用动画
div {
width: 200px;
height: 200px;
background -color: aqua;
margin: 100px auto;
/* 调用动画 */
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;
动画序列
- 0%是动画的开始, 100% 是动画的完成。这样的规则就是动画序列。
- 在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间,或用关键词"from"和"to" ,等同于0%和100%。
<!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>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画 */
animation-name: move;
animation-duration: 2s;
}
@keyframes move {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(500px);
}
50% {
transform: translate(500px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
做完这个练习我发现translate()里面的并非位移量，而是坐标。
5.2动画常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性。 |
| animation-name | 规定@keyframes动画的名称。( 必须的) |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒， 默认是0。( 必须的) |
| animation-timing-function | 规定动画的速度曲线,默认是"ease" 。 |
| animation-delay | 规定动画何时开始,默认是0。 |
| animation-iteration-count | 规定动画被播放的次数,默认是1，还有infinite |
| animation-direction | 规定动画是否在下一-周期逆向播放,默认是"normal ",alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是"running ，还有"pause"。 |
| animation-fill-mode | 规定动画结束后状态,保持forwards回到起始backwards |
<!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>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 1s;
/* 重复次数 */
animation-iteration-count: infinite;
/* 是否反方向播放 默认的是normal 如果想要反方向，就写alternate*/
animation-direction: alternate;
/* 动画结束后的状态 默认的是backwards */
animation-fill-mode: backwards;
}
@keyframes move {
0% {
transform: translate(0);
}
100% {
transform: translate(1300px,0);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.3动画简写属性
animation ：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;
- 简写属性里面不包含animation-play-state
- 暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用
- 想要动画走回来,而不是直接跳回来: animation-direction : alternate
- 盒子动画结束后,停在结束位置: animation-fill-mode : forwards
感觉简写。。好麻烦。。。。。。
十三、速度曲线细节
- 速度曲线细节
animation-timing-function: 规定动画的速度曲线，默认是ease
- 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
overflow: hidden;
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/* 让我们的文字强制一行内显示 */
white-space: nowrap;
/* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
animation: w 4s steps(10) forwards;
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div>世纪佳缘我在这里等你</div>
</body>
</html>
CSS3 3D转换
cHTML5 第三天
一、 认识 3D 转换
-
3D的特点- 近大远小
- 物体和面遮挡不可见
-
三维坐标系
-
x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
-
y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
-
z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值
-
二、3D 转换
-
3D转换知识要点3D位移：translate3d(x, y, z)3D旋转：rotate3d(x, y, z)- 透视：
perspctive 3D呈现transfrom-style
-
3D移动translate3d3D移动就是在2D移动的基础上多加了一个可以移动的方向，就是 z 轴方向transform: translateX(100px)：仅仅是在 x 轴上移动transform: translateY(100px)：仅仅是在 y 轴上移动transform: translateZ(100px)：仅仅是在 z 轴上移动transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离- 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充
-
语法
transform: translate3d(x, y, z) -
代码演示
transform: translate3d(100px, 100px, 100px) /* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */ transform: translate3d(100px, 100px, 0)
三、透视 perspective
-
知识点讲解
- 如果想要网页产生
3D效果需要透视(理解成3D物体投影的2D平面上) - 实际上模仿人类的视觉位置，可视为安排一直眼睛去看
- 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素
- 如果想要网页产生
-
知识要点
-
透视需要写在被视察元素的父盒子上面
-
注意下方图片
-
d：就是视距，视距就是指人的眼睛到屏幕的距离
-
z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大
-
-
-
代码演示
body { perspective: 1000px; }
四、 translateZ
translateZ与perspecitve的区别perspecitve给父级进行设置，translateZ给 子元素进行设置不同的大小
五、3D 旋转rotateX
3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转
-
语法
transform: rotateX(45deg)– 沿着 x 轴正方向旋转 45 度transform: rotateY(45deg)– 沿着 y 轴正方向旋转 45 度transform: rotateZ(45deg)– 沿着 z 轴正方向旋转 45 度transform: rotate3d(x, y, z, 45deg)– 沿着自定义轴旋转 45 deg 为角度
-
代码案例
div { perspective: 300px; } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotateX(-45deg) } -
左手准则
-
左手的手拇指指向 x 轴的正方向
-
其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向
-
手指的弯曲方向就是 rotateX为正时的方向
六、3D 旋转 rotateY
-
代码演示
div { perspective: 500px; } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotateY(180deg) } -
左手准则
-
左手的拇指指向 y 轴的正方向
-
其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)
-
七、 3D 旋转 rotateZ
-
代码演示
div { perspective: 500px; } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotateZ(180deg) } -
rotate3dtransform: rotate3d(x, y, z, deg)– 沿着自定义轴旋转 deg 为角度- x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
transform: rotate3d(1, 1, 0, 180deg)– 沿着对角线旋转 45degtransform: rotate3d(1, 0, 0, 180deg)– 沿着 x 轴旋转 45deg
-
代码演示
div { perspective: 500px; } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotate3d(1, 1, 0, 180deg) }八、
3D呈现transform-style-
transform-style-
☆☆☆☆☆
-
控制子元素是否开启三维立体环境
-
transform-style: flat代表子元素不开启3D立体空间，默认的 -
transform-style: preserve-3d子元素开启立体空间 -
代码写给父级，但是影响的是子盒子
-
-
代码演示
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
浏览器私有前缀
第五周
calc函数:
calc()此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% - 80px);
括号里面可以使用+ - * /来进行计算。
2.7CSS3过渡(重点)
过渡( transition)是CSS3中具有颠覆性的特征之一, 我们可以在不使用Flash 动画或JavaScript的情况下,元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画:是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持( ie9以下版本)但是不会影响
页面布局。
我们现在经常和:hover一起搭配使用。
小米logo渐变效果练习
<!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>小米logo练习</title>
<style>
* {
padding: 0;
margin: 0;
}
.mi {
position: relative;
height: 111px;
width: 111px;
margin: 100px auto;
overflow: hidden;
}
.milogo {
width: 100%;
position: absolute;
top: 0;
right: 0;
transition: all .2s;
}
.mihome {
position: absolute;
top: 0;
right: -111px;
transition: all .2s;
}
.mi:hover .mihome {
right: 0;
}
.mi:hover .milogo {
right: 111px;
}
</style>
</head>
<body>
<div class="mi">
<div class="milogo"><img src="images/mi.logo.png" alt=""></div>
<div class="mihome"><img src="images/mi.home.png" alt=""></div>
</div>
</body>
</html>
常用模块类名命名
扫一扫
7786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
