伪类选择器
伪类选择器
:hover 悬停
:link 当时写不出来 没有访问过的链接
:active 当我们鼠标点击时
:visited 点击之后的
这四种伪类选择器都是以:开头 而且都是用于a标签的
hover 是适用于所有元素
伪类选择器是可以单独使用的 只是我们一般不会单独使用
nth-child
找一个元素并且这个元素是第一个子元素
元素名:first-child
找到最后一个子元素
元素名:last-child
找到第几个子元素 写的数字是几就代表第几个子元素
元素名:nth-child(3)
找到所有的这个元素
元素名:nth-child(n)
从第八个开始设置样式
li:nth-child(n+8)
找到所有4的倍数的li元素
li:nth-child(4n)
找到所有的偶数行
li:nth-child(even)
找到所有的奇数行
li:nth-child(odd)
nth-of-type
nth-of-type 用法和nth-child一模一样 只是找的元素不一样
他只是用来找到第几个 并不要求在父元素中也是第几个子元素
伪元素选择器
伪元素选择器
伪元素选择器 使用两个冒号开头
伪元素默认是行内元素 而且要使用伪元素 就必须要有content属性
::before
::after
找到所有的占位符
::placeholder 获取到的 本质是文本 所以只有针对文本的样式适用,对于元素的样式 是不适用的
找到首字母
::first-letter
找到第一行 无论屏幕大小怎么变 都是选中第一行
::first-line
设置选中的行的样式
::selection
transition(过渡)
定义: 让元素在变化的时候 有动画效果 (过渡)
参数:
参数1 表示的是 参与过渡的属性 all 代表所有的属性都参与过渡 一般都是写的all
参数2 表示的是动画持续的时间
参数3 表示的是动画延迟的时间
参数4 表示的是动画运动方式
linear 匀速
steps() 分步的 表示这个动画需要几步完成 默认缓速
注意点 参数的顺序可以随便写 但是谢谢的时间一定是动画时间 后写的是延迟时间
盒子阴影
box-shadow
参数1 是这个盒子阴影的水平位置
参数2 是这个盒子阴影的垂直位置
参数3 是阴影的模糊度
参数4 是这个阴影的宽度
参数5 阴影的颜色
参数6 是决定阴影是外扩还是内聚 默认是外扩的阴影
inset代表内聚的阴影
盒子阴影可以写多个 这多个阴影之间使用逗号隔开 而且先写的优先级更高 可以直接覆盖后面的dom元素都可以加盒子阴影
盒子模型
box-sizing
这个属性会用来设置盒子的边框以及边距是外扩还是内聚
默认值
content-box
默认情况下 盒子是外扩 外扩会使盒子整体呈现出来的效果变大 可能会影响布局
常用值
内聚的属性值 border-box
文字阴影
text-shadow
参数1 文字阴影的水平位置
参数2 文字阴影的垂直位置
参数3 模糊度
参数4 阴影的颜色
文字阴影也可以有多个 多个文字阴影之间使用逗号隔开
先写的优先级更高
背景属性
background 参数
参数1:背景图片的路径
参数2:表示的是是否平铺
repeat 允许背景图片平铺 是默认值
no-repeat 不允许平铺
repeat-x 沿x轴平铺
repeat-y 沿y轴平铺
参数3:表示的是图片的位置
有两个值 第一个值表示水平位置的 第二个值表示垂直位置
参数3的值可以给多种数据
方位值 水平 left center right
垂直 top center bottom
具体的像素值 水平方向 代表距离盒子左边是多少像素
垂直方向 代表距离盒子上面是多少像素
给百分比 给百分比的意思是 图片对应的百分比数与盒子对应的百分比数重合
参数4: 注意点 要加参数4就必须在参数3后面加一个 /
参数4表示的是背景图片的大小
给具体的像素值 表示的是背景图片的大小
给百分比 指的是相对于盒子的百分比 100%就是铺满盒子
给特殊单词
cover 会使得图片有部分没有显示 表示的是图片必须覆盖盒子 缩放后 图片一点大于或者等于 盒子
contain 背景图片 图片同比方法 图片不会变形 表示盒子必须包含这个背景图片 缩放后 图片一定小于或者等于盒子
如果有多涨图片作为背景图片 那么最先写的 优先级要高于后写的
参数5:背景颜色
background 是一个复合属性(继承属性) 就是说它是由多个子属性组成的
background-color
background-image
background-repeat
background-repeat-x
background-repeat-y
background-position
background-size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 623px;
height: 417px;
/* border:1px solid black */
margin: 50px auto;
background: url(img/bg1.png) no-repeat left top,
url(img/bg2.png) no-repeat right top,
url(img/bg3.png) no-repeat right bottom,
url(img/bg4.png) no-repeat left bottom,
url(img/095658-1562983018e455.jpg) no-repeat 113px 86px/367px 257px
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
渐变
线性渐变
线性渐变 linear-gradient
参数1:渐变的方向 指的是最终在哪个方向
后面参数的颜色 至少是两个颜色
线性渐变 专门做渐变颜色 这种渐变背景色 浏览器是当作背景图片来解析的 所以要使用background-image来设置
向右上角渐变
background-image:linear-gradient(to right top,red,yellow);
background-image:linear-gradient(30deg ,red,yellow);
这两行代码是等同的
background-image:linear-gradient(to right,red,yellow);
background-image:linear-gradient(90deg,red,yellow);
第一个颜色后面的百分比 表示纯色从什么位置结束(也就是渐变开始的位置)
后面的颜色再写百分比 代表的是从什么位置开始 如果想要纯色结束 那么就再写一个相同的颜色 再加一个百分比
background-image:linear-gradient(to right,red 30%,yellow 30%,yellow 60%,green);
渐变属性 浏览器作为背景图片来解析 那么所有背景图片能用的属性 他都可以用
background:linear-gradient(to right,red,yellow) repeat left top/100px 100px;
线性渐变按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input{
height: 100px;
width: 200px;
background-image: linear-gradient(to top,red,orange);
outline-style: none;
border-radius: 30px;
border: none;
font-size: 30px;
color: #fff;
}
</style>
</head>
<body>
<input type="button" name="" id="" value="点击注册" />
</body>
</html>
径向渐变
径向渐变和线性渐变用法一模一样
参数1:指的是径向渐变的圆的半径 和圆心的位置
参数后面接的是颜色 至少有两种 而且作为填充色的都是最后一种颜色
background-image:radial-gradient(100px at center,green,yellow,red);
background-image:radial-gradient(100px at left top,green,yellow,red);
background-image:radial-gradient(100px at center,green 30%,yellow,red);
径向渐变案例小太阳
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
overflow: hidden;
}
body{
background-image:radial-gradient(300px at right top,red 30%,orange,skyblue);
}
</style>
</head>
<body>
</body>
</html>
animation动画
如果一个动画动起来 animation调用只需要剧本名字和动画时间 就可以
参数1 剧本名
animation-name 规定需要绑定到选择器的 keyframe 名称。。
参数2 剧本动画时间
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
参数3 动画延迟时间
animation-delay 规定在动画开始之前的延迟。
参数4 运动曲线 匀速linear 分布steps()
animation-timing-function 规定动画的速度曲线。
参数5 动画运动的次数 数字写的是几 就是几次 infinite无限
animation-iteration-count 规定动画应该播放的次数。
参数6 定义动画结束后 是否就保持在动画结束时的状态 使用forwards 就是表示保持最后的动画效果 不写就表示不保持
animation-fill-mode
参数7 定义动画复原时是否也使用动画效果 alternate 就表示动画复原时也使用动画 不加就没有
animation-direction 规定是否应该轮流反向播放动画。
参数8 定义动画在页面加载时 是暂停还是播放 running 播放(默认状态) paused(暂停)
animation-play-state
这些参数不需要记顺序 但是时间先写的一定是动画时间 后写的是延迟时间
百分比动画
与from-to的区别
from-to是能让所有的动画同时进行
百分比动画 可以实现先做什么在做什么
每一个百分比的()里面写的都是动画的最终状态 而且他们的效果是始终相对于原始状态的 因此 如果我们想要动画从上一个动画的接着进行 那么最好把前面的属性都复制一遍
百分比动画没有到100% 还有剩下的时间 如果不写 那么就默认是用来恢复原状
翻书案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: black;
perspective: 800px;
}
ul{
list-style: none;
padding: 0;
width: 250px;
height: 300px;
border: 1px solid darkgray;
position: relative;
margin: 200px auto;
transform-style: preserve-3d;
}
li{
width: 100%;
height: 100%;
border: 1px solid black;
background-color: white;
transform-origin: left;
position: absolute;
}
ul:hover{
transition: all 1s;
transform: rotateX(45deg);
}
ul:hover li:nth-child(1){
transition: all 1s 1s;
transform: rotateY(-180deg);
}
ul:hover li:nth-child(2){
transition: all 1s 2s;
transform: rotateY(-175deg);
}
ul:hover li:nth-child(3){
transition: all 1s 3s;
transform: rotateY(-170deg);
}
ul:hover li:nth-child(4){
transition: all 1s 4s;
transform: rotateY(-165deg);
}
ul:hover li:nth-child(5){
transition: all 1s 5s;
transform: rotateY(-160deg);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
心跳案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: black;
}
.heart{
width: 350px;
height: 300px;
margin: 100px auto;
position: relative;
}
.left,.right{
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
position: absolute;
}
.right{
right: 0;
}
.heart{
animation: heartMove .9s infinite;
}
.heart>div{
box-shadow: 0px 0px 20px red;
}
.bottom{
width: 205px;
height: 192px;
background-color: red;
transform: rotate(45deg);
position: absolute;
bottom: 29px;
left: 67px;
}
@keyframes heartMove{
from{}
to{
transform: scale(1.5);
}
}
</style>
</head>
<body>
<div class="heart">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>