css3总结

最新推荐文章于 2020-08-05 03:45:59 发布

wlxxxxx

最新推荐文章于 2020-08-05 03:45:59 发布

阅读量132

点赞数

文章标签： css3

原文链接：https://blog.csdn.net/czx1826488201/article/details/102783562?ops_request_misc=&request_id=&biz_id=102&utm_term=css3&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-102783562

版权

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>

   
   
   
   1
2
3
4
5
6
7
8
9
10
11

注意：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;
}

    <span class="token punctuation">.</span>one <span class="token punctuation">.</span>tow <span class="token punctuation">{</span>
        width<span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
        height<span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
        background<span class="token operator">-</span>color<span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">109</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        transform<span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        top<span class="token punctuation">:</span> <span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">;</span>
        left<span class="token punctuation">:</span> <span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>

</head>

</html>

2D转换之旋转rotate

2D 旋转是让元素在2维平面内顺时针或者逆时针进行旋转
transform:rotate(30deg);

img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid pink;
            transition: all 6s; /*过渡*/
        }
    img<span class="token punctuation">:</span>hover <span class="token punctuation">{</span>
        transform<span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">60</span>deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*偏移*/</span>
    <span class="token punctuation">}</span>

使用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<span class="token punctuation">:</span><span class="token punctuation">:</span>after <span class="token punctuation">{</span>
        content<span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
        width<span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
        height<span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
        border<span class="token operator">-</span>right<span class="token punctuation">:</span> <span class="token number">1</span>px solid #<span class="token number">000</span><span class="token punctuation">;</span>
        border<span class="token operator">-</span>bottom<span class="token punctuation">:</span> <span class="token number">1</span>px solid #<span class="token number">000</span><span class="token punctuation">;</span>
        transform<span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">45</span>deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
        position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        top<span class="token punctuation">:</span> <span class="token number">5</span>px<span class="token punctuation">;</span>
        right<span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
        transition<span class="token punctuation">:</span> all <span class="token number">0.3</span>s<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    div<span class="token punctuation">:</span>hover<span class="token punctuation">:</span><span class="token punctuation">:</span>after <span class="token punctuation">{</span>
        transform<span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">225</span>deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>

</head>

<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

</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()…等
上面属性的顺序会影响转换效果（先旋转会改变坐标轴的方向）

同时有位移和其他属性的时候，位移要写在最前面

 
 
 
 1

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);
            }
        }

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

动画常用属性：

name 和 duration一定要写。

小熊动起来代码：

<!DOCTYPE html>
<html lang="en">

    div <span class="token punctuation">{</span>
        <span class="token comment">/* 1）根据图片上熊的个数来设置父盒子的宽高；  */</span>
        overflow<span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
        position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        width<span class="token punctuation">:</span> <span class="token number">200</span>px<span class="token punctuation">;</span>
        height<span class="token punctuation">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
        background<span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"images/bear.png"</span><span class="token punctuation">)</span> no<span class="token operator">-</span>repeat<span class="token punctuation">;</span>
        <span class="token comment">/* 3）使用动画，由于简写 所以注意各个位置是什么； */</span>
        animation<span class="token punctuation">:</span> bear <span class="token number">.5</span>s <span class="token function">steps</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">)</span> infinite<span class="token punctuation">,</span> move <span class="token number">3</span>s forwards<span class="token punctuation">;</span>
        <span class="token comment">/*5）引用动画*/</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/* 2）定义动画序列，初始位置设定图片从最左开始、终点位置应该要回到初始位置，所以设置为图片的长度的负值； */</span>
    
    @keyframes bear <span class="token punctuation">{</span>
        <span class="token number">0</span><span class="token operator">%</span> <span class="token punctuation">{</span>
            background<span class="token operator">-</span>position<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token number">100</span><span class="token operator">%</span> <span class="token punctuation">{</span>
            background<span class="token operator">-</span>position<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">1600</span>px <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/* 4）为使熊走一段路程，然后停止在原地做动作，需要重新设置一个新的动画函数； */</span>
    
    @keyframes move <span class="token punctuation">{</span>
        <span class="token number">0</span><span class="token operator">%</span> <span class="token punctuation">{</span>
            left<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token number">100</span><span class="token operator">%</span> <span class="token punctuation">{</span>
            left<span class="token punctuation">:</span> <span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>

</head>

</body>

</html>

6.CSS 3D转换

在这里插入图片描述
3D位移：translate3d

语法：transform:translate3d(x, y, z)
xyz不能省略，如果没有则为0 它们的单位都是px.

 
 
 
 1
2

透视 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;
}

    <span class="token punctuation">.</span>box<span class="token punctuation">:</span>hover <span class="token punctuation">{</span>
        transform<span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span><span class="token number">180</span>deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
        transition<span class="token punctuation">:</span> all <span class="token number">10</span>s<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    <span class="token punctuation">.</span>box <span class="token punctuation">.</span>one <span class="token punctuation">{</span>
        width<span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
        height<span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
        background<span class="token operator">-</span>color<span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
        position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        top<span class="token punctuation">:</span> <span class="token number">34</span><span class="token operator">%</span><span class="token punctuation">;</span>
        left<span class="token punctuation">:</span> <span class="token number">33</span><span class="token operator">%</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    <span class="token punctuation">.</span>box <span class="token punctuation">.</span>tow <span class="token punctuation">{</span>
        width<span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
        height<span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
        background<span class="token operator">-</span>color<span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
        position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        top<span class="token punctuation">:</span> <span class="token number">34</span><span class="token operator">%</span><span class="token punctuation">;</span>
        left<span class="token punctuation">:</span> <span class="token number">33</span><span class="token operator">%</span><span class="token punctuation">;</span>
        transform<span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span><span class="token number">45</span>deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>

</head>

</html>

7. 浏览器私有前缀

浏览器私有前缀是为了兼容老版写法，比较新的版本的浏览器无需添加。
在这里插入图片描述
综合案例：旋转木马

<!DOCTYPE html>
<html lang="en">

    section <span class="token punctuation">{</span>
        position<span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
        width<span class="token punctuation">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
        height<span class="token punctuation">:</span> <span class="token number">400</span>px<span class="token punctuation">;</span>
        margin<span class="token punctuation">:</span> <span class="token number">100</span>px <span class="token keyword">auto</span><span class="token punctuation">;</span>
        transform<span class="token operator">-</span>style<span class="token punctuation">:</span> preserve<span class="token operator">-</span><span class="token number">3</span>d<span class="token punctuation">;</span>
        animation<span class="token punctuation">:</span> rotas <span class="token number">4</span>s linear infinite<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    section<span class="token punctuation">:</span>hover <span class="token punctuation">{</span>
        animation<span class="token operator">-</span>play<span class="token operator">-</span>state<span class="token punctuation">:</span> paused<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    @keyframes rotas <span class="token punctuation">{</span>
        <span class="token number">0</span><span class="token operator">%</span> <span class="token punctuation">{</span>
            transform<span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span><span class="token number">0</span>deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token number">100</span><span class="token operator">%</span> <span class="token punctuation">{</span>
            transform<span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span><span class="token number">360</span>deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    
    section div <span class="token punctuation">{</span>
        width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
        height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
        position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        top<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
        left<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
        background<span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string">"images/circle0.jpg"</span><span class="token punctuation">)</span> no<span class="token operator">-</span>repeat<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    section div<span class="token punctuation">:</span>nth<span class="token operator">-</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        transform<span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span><span class="token number">0</span>deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">300</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    section div<span class="token punctuation">:</span>nth<span class="token operator">-</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        transform<span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span><span class="token number">60</span>deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">300</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    section div<span class="token punctuation">:</span>nth<span class="token operator">-</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        transform<span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span><span class="token number">120</span>deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">300</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    section div<span class="token punctuation">:</span>nth<span class="token operator">-</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        transform<span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span><span class="token number">180</span>deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">300</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    section div<span class="token punctuation">:</span>nth<span class="token operator">-</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        transform<span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span><span class="token number">240</span>deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">300</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    section div<span class="token punctuation">:</span>nth<span class="token operator">-</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        transform<span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span><span class="token number">300</span>deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">300</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>

</head>

</html>

                                </div><div data-report-view="{&quot;mod&quot;:&quot;1585297308_001&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/czx1826488201/article/details/102783562&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}"><div></div></div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                                <div data-report-view="{&quot;mod&quot;:&quot;popu_387&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/czx1826488201/article/details/102783562&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}"></div>
                    
        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/czx1826488201">
                <img src="https://profile.csdnimg.cn/5/9/7/3_czx1826488201" class="avatar_pic" username="czx1826488201">
            </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit "><a href="https://blog.csdn.net/czx1826488201" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}" target="_blank">闲人散客</a></span>
                    <!-- 等级，level -->
                    <img class="identity-icon" src="https://csdnimg.cn/identity/vip.png">                        <img class="identity-icon" src="https://csdnimg.cn/identity/blog4.png">                                            </div>
                <div class="text"><span>原创文章 106</span><span>获赞 3</span><span>访问量 3426</span></div>
            </div>
                            <div class="right-message">
                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}">关注</a>
                                                            <a href="https://im.csdn.net/im/main.html?userName=czx1826488201" target="_blank" class="btn btn-sm bt-button personal-letter">私信
                    </a>
                                </div>
                        </div>
                    
    </div>