1. CSS3 属性选择器
属性选择器的权重是10
2. CSS3结构伪类选择器
ul li:nth-child(2) {
background-color: pink;
}
-----------------------------------------------------------------
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
注意：E: nth-child(内容)：
1）内容为数字：指的是第几个标签
2）内容为 even：奇数 ； odd：偶数
3）内容公式：从0开始
4）第0个元素和超出的元素 的个数不计
-nth-child() 和 nth-of-type() 的区别：
-nth-child()选择父元素里的 第n个孩子，他不管里面的孩子是否同一类型。 nth-of-type() 有类型要求。
ul里面 我们只允许放li标签，所以他们这两个类选择器作用一样。
3. 伪元素选择器
4. CSS3 2D转换
转换（transform）：实现图片位置的偏移
语法：
transform:translate(x, y);或者分开写
transform:translateX(n);
transform:translateY(n);
注意：
定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%, 50%)
对行内标签没有效果。
使盒子移动有三种方法：margin 定位 转换
父盒子内的盒子相对于父盒子水平垂直居中
<!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>
.one {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
margin: auto;
}
.one .tow {
width: 100px;
height: 100px;
background-color: rgb(109, 50, 50);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div class="one">
<div class="tow"></div>
</div>
</body>
</html>
2D转换之旋转rotate
2D 旋转是让元素在2维平面内顺时针或者逆时针进行旋转
transform:rotate(30deg);
img {
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid pink;
transition: all 6s; /*过渡*/
}
img:hover {
transform: rotate(60deg); /*偏移*/
}
使用tranform:rotate()还可以制作下拉图标
方法：在一个盒子内加一个伪元素，伪元素这个黑子只留右边和底边，然后旋转45度 在调样式即可。
<!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 {
width: 210px;
height: 30px;
border: 1px solid #000;
position: relative;
}
div::after {
content: "";
width: 12px;
height: 12px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
position: absolute;
top: 5px;
right: 12px;
transition: all 0.3s;
}
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2D转换中心点transform-origin默认中心旋转（即50%）；
语法：transform-origin:x y;
注意后面的参数x和y用空格隔开
x y 默认转换的中心点是元素的中心点（50%， 50%）
还可以给x y 设置像素或者方位名词（top bottom left right center）
2D 转换值缩放scale
语法：transform:scale(x, y)//里面写的数字，不跟单位，就是倍数的意思；大于1 放大 小于1 缩小
scale优势：不影响其他盒子， 而且可以设置缩放的中心
2D转换综合写法
格式：transform:translate() rotate() scale()…等
上面属性的顺序会影响转换效果（先旋转会改变坐标轴的方向）
同时有位移和其他属性的时候，位移要写在最前面
5. CSS 3D动画
5.1 动画
动画的基本使用步骤：
1）先定义动画；
> 语法:
@keyframes 变量名name {
0%{....}
100%{....}
} ```
> 2）使用动画
语法：
/*动画名词*/
animation-name:变量名name;
/持续时间*/
animation-duration: n s;
动画序列： 0%是动画的开始，100%是动画的完成，这样的 规则就是动画序列；
动画序列中间添加各个时间段：25% 50% 等，动画里面的百分比就是总的时间的划分。
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 200px);
}
75% {
transform: translate(0, 200px);
}
100% {
transform: translate(0, 0);
}
}
动画常用属性：
name 和 duration一定要写。
小熊动起来代码：
<!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 {
background-color: #ccc;
}
div {
/* 1）根据图片上熊的个数来设置父盒子的宽高； */
overflow: hidden;
position: absolute;
width: 200px;
height: 120px;
background: url("images/bear.png") no-repeat;
/* 3）使用动画，由于简写 所以注意各个位置是什么； */
animation: bear .5s steps(8) infinite, move 3s forwards;
/*5）引用动画*/
}
/* 2）定义动画序列，初始位置设定图片从最左开始、终点位置应该要回到初始位置，所以设置为图片的长度的负值； */
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
/* 4）为使熊走一段路程，然后停止在原地做动作，需要重新设置一个新的动画函数； */
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
}
}
</style>
</head>
<body>
<div></div>
<!-- 小熊动起来的思路： -->
</body>
</html>
6.CSS 3D转换
3D位移：translate3d
语法：transform:translate3d(x, y, z)
xyz不能省略，如果没有则为0 它们的单位都是px.
透视 perspective
注意：透视写到被观察的父盒子上面；
translageZ(数值) 正数越来越大，负数越来越小，它也是可以起到透视的效果，只是主要在子盒子上设置。
3D旋转 rotate3d
左手准则判断 X：手背朝着自己，四指伸直，拇指与四指垂直，其他四指弯曲，弯曲的方向为旋转的正方向。
Y：手背向自己，四指向右弯曲，拇指朝下，四指弯曲的方向为旋转的正方向。
3D呈现transform-style
代码：
<!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>
.box {
width: 300px;
height: 300px;
background-color: #ccc;
position: relative;
margin: 20px auto;
perspective: 200px;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateX(180deg);
transition: all 10s;
}
.box .one {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 34%;
left: 33%;
}
.box .tow {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 34%;
left: 33%;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="tow"></div>
</div>
</body>
</html>
7. 浏览器私有前缀
浏览器私有前缀是为了兼容老版写法，比较新的版本的浏览器无需添加。
综合案例：旋转木马
<!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: 1000px;
}
section {
position: relative;
width: 300px;
height: 400px;
margin: 100px auto;
transform-style: preserve-3d;
animation: rotas 4s linear infinite;
}
section:hover {
animation-play-state: paused;
}
@keyframes rotas {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
section div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("images/circle0.jpg") no-repeat;
}
section div:nth-child(1) {
transform: rotateY(0deg) translateZ(300px);
}
section div:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<!-- 旋转木马思路：
1）准备一个盒子，里面放六个小盒子；
2）大盒子设置宽高，小盒子相对于大盒子设置定位问题，并且设置背景图片；
3）六张图片分别旋转不一样的角度，360/6=60；由于一开始图片都是在坐标轴原点，所以需要设置往前（也就是z轴）一定的距离，注意每个盒子往前走的距离要保持一致；
4）前面做完后，由于子元素默认不开启3d立体空间，所以需要在父盒子添加 transform-style: preserve-3d；还需要添加透视；
5）为了显示出动画的效果，需要添加动画，实现动画效果。 -->
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
扫一扫
1938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
