H5C3的一些属性
H5C3的一些属性
- 伪类选择器
- 伪元素选择器
- transition(过渡)
- 盒子阴影
- 盒子模型
- 文字阴影
- 背景属性
- 渐变
- animation动画
- 百分比动画
伪类选择器
伪类选择器
: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>