CSS3基础

最新推荐文章于 2023-03-05 23:53:25 发布

小辉吖～

最新推荐文章于 2023-03-05 23:53:25 发布

阅读量282

点赞数 1

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_52845451/article/details/126632815

版权

CSS3新增选择器

属性选择器

权重为10，同类选择器，属性选择器，伪类选择器一样

E[key] 选择具有key属性的E元素

<head>	
	<style>
        /* 必须是input，而且里面必须有value这个属性 */
        input[value] {
            color: pink;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="" value="请输入">
    <br>
    <input type="text" name="" id="">
</body>

E[key = “value”] 选择具有key属性且属性值等于value的E元素

<head>	
	<style>
        /* 必须是input，而且里面必须有value这个属性 */
        input[type=search] {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="">
    <br>
    <input type="search" name="" id="">
</body>

E[key^ = “value”] 选择具有key属性且以value开头的E元素

<head>	
	<style>
        div[class^="icon"] {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="icon1">1</div>
    <div class="icon2">2</div>
    <div class="icon3">3</div>
    <div class="icon4">4</div>
</body>

E[key$ = “value”] 选择具有key属性且以value结尾的E元素

<head>	
	<style>
        /* 选择首先是div，然后 class=data 结尾的 */
        section[class$="data"] {
            color: skyblue;
        }
    </style>
</head>

<body>
    <section class="icon1-data">99</section>
    <section class="icon2-data">99</section>
    <section class="icon3-data">99</section>
</body>

E[key* = “value”] 选择具有key属性且值中含有value的E元素

<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>
        /* 选择首先是p，然后 class中含有p的 */
        p[class*="pp"] {
            color: red;
        }
    </style>
</head>

<body>
    <p class="pp-1">1000</p>
    <p class="pp-2">1000</p>
    <p class="pp-3">1000</p>
    <p class="4-pp">1000</p>
</body>

结构伪类选择器

权重为10，同类选择器，属性选择器，伪类选择器一样

E：first-child 选取第一个元素

li:first-child {
            color: red;
        }

E：last-child 选取最后一个元素

li:last-child {
            color: hotpink;
        }

E：nth-child(n) n可以是数字，可以是关键字，还可以是公式。

n 如果是数字，数字是几就选取第几个

li:nth-child(3) {
            color: skyblue;
        }

n 如果是odd，则选取奇数

li:nth-child(odd) {
            color: red;
        }

n 如果是even，则选取偶数

li:nth-child(even) {
            color: pink;
        }

如果是n，是选取全部

/* 从0开始，每次加1 */
li:nth-child(n) {
            color: powderblue;
        }

如果是 2n ，是选取所有偶数元素

li:nth-child(2n) {
            color: red;
        }

如果是 2n+1 ，是选取所有奇数

li:nth-child(2n + 1) {
            color: black;
        }

如果是？n ，几n就是几的倍数

li:nth-child(5n) {
            color: pink;
        }

如果是 n+? ,就是从第几个开始，包括第 n+？个，因为n是从0开始算的

li:nth-child(n + 3) {
            color: black;
        }

如果是 -n+? ,就是从第几个之前的，包括第 n+？个，因为n是从0开始算的

li:nth-child(-n + 3) {
            color: black;
        }

nth-child()与nth-of-type()的异同

同：

E：first-child 与 E：first-of-type 都是选取第一个元素

E：last-child 与 E：last-of-type 都是选取最后一个元素

E：nth-child(n) 与 E：nth-of-type(n) 都是选取第n个元素

其他使用也基本相同，里面也可以跟公式，关键字和数字

异：

nth-child() 执行过程是先排序，再指定类型

nth-of-type() 执行过程是先指定类型，再排序

<head>	
	<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>
        /* 同 */
        ul li:first-child {
            color: blanchedalmond;
        }

        ul li:last-of-type {
            color: blue;
        }

        /* 异 */
        /* nth-child 会把所有的孩子排列序号 */
        /* 1. 执行的时候先看 :nth-child(1)    2. 之后再看前面的 div */
        /* 这里执行第一步的时候，选取的是 p  执行第二步的时候，它要求的是 div。与前面的 p 不匹配，所以谁也没选取   */
        section div:nth-child(1) {
            color: brown;
        }

        /* nth-of-type 会把指定元素的盒子排列序号 */
        /* 1. 执行的时候先看指定的元素，进行排序    2. 之后再看看是第几个孩子 */
        /* 这里执行第一步的时候，先看指定的元素，选取的是 div，并排序  执行第二步的时候，看是第几个，是第一个，所以选取了熊大   */
        section div:nth-of-type(1) {
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

伪元素选择器

权重为1，同标签(元素)选择器一样

可以利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

::before 在元素内部的前面插入内容，必须有content属性

::after 在元素内部的后面插入内容，必须有content属性

一般都是配合字体图标使用

<head>	
	<link rel="stylesheet" href="./font/iconfont.css">
    <style>
        div::after {
            content: '\e600';
            /* 这个一定别忘了 */
            font-family: "iconfont";
        }
    </style>
</head>

<body>
    <div>这是个购物车</div>
</body>

css3盒子模型

box-sizing：content-box；盒子大小为 width+padding+border（以前默认的）

box-sizing：border-box；盒子大小为 width，你写的宽度是多少，他就是多少

* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        }

css3图片模糊

filter：函数()；

常用函数：blur(像素值) 像素值越大，图片就越模糊

<head>	
	<style>
        img {
            filter: blur(2px);
        }
    </style>
</head>

<body>
    <img src="./images/pink.jpg" alt="">
</body>

计算盒子宽度

calc() 此函数可以计算宽度（加减乘除都ok）

<head>	
	<style>
        /* 需求是子盒子永远比父盒子小30px */
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .son {
            width: calc(100% - 30px);
            height: 200px;
            background-color: powderblue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

过渡

从一个状态，到另一个状态，就是过渡。谁做过渡给谁加。经常和：hover 搭配使用

transition：要过渡的属性花费时间运动曲线何时开始；

属性：想要变化的css属性。宽度高度，背景颜色，内外边距都可以，如果是左右属性都变化，就写个all
花费时间：以秒为单位，必须写单位
运动曲线：默认是ease(可省略不写)。linear匀速，ease减速，ease-in加速，ease-out减速，ease-in-out是先加速后减速
何时开始：就是过渡效果什么时候开始，默认是0s(可省略不写)

<head>	
	<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* 加个过渡，效果更好 */
            transition: all 1s;
        }

        .box:hover {
            width: 300px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

注：如果想改变多个样式，在后面添加个逗号即可

<head>	
	<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* 加个过渡，效果更好,多个属性，d */
            transition: width 1s, height 1s;
            /* 最好这样写 */
            transition: all 1s;
        }

        .box:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

fvicon图标制作

制作favicon图标

把需要的图标切成png图片
把png图片转换为ico图标。需要借助第三方网站，例如比特虫

favicon图标放到网站的根目录下
HTML页面引入favicon图标

<link rel="shortcut icon" href="favicon.ico" />

如果想直接得到某个网站的favicon图标，可以在地址栏直接输入

https://www.jd.com/favicon.ico

网站TDK三大标签SEO优化

SEO(Search Engine Optimization)汉译为搜索引擎优化，是一种利用搜索引擎的规则特稿网站在有关搜索引擎上内自然排名的方式

页面必须有三个标签用来符合SEO优化： title description keywords

title网站标题：建议网站名(产品名) - 网站的介绍(尽量不超过30个汉字)

<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>

description网站说明：简要说明我们网站主要是做什么的，提倡是多采用 “ 我们是…” “我们提供…” “xxx网站作为…” “电话是：010…”之类的语句

<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>

keywords关键字：是页面关键词，是抖索引擎的关注点之一。最好限制6~8个关键词，中间用逗号隔开

<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>

2D转换

转换（transform）可以实现位移，旋转，缩放等效果

移动：translate
旋转：rotate
缩放：scale

2D转换是改变标签在平面上的位置和形状的一种技术。x轴向下是正，向上是负。y轴向下是正，向上是负

移动：translate

只移动x轴

transform: translateX(100px);

只移动y轴

transform: translateY(100px);

移动x轴和y轴

transform: translate(100px, 100px);

特性：

不会影响到其他元素的位置
对行内标签没有效果
x和y轴的移动可以用百分比，百分比和像素值都是相对于自身来移动的

让一个盒子垂直居中显示

<head>	
	<style>
        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

旋转：rotate

默认围绕z轴旋转

transform: rotate(45deg);

箭头实现案例

<head>	
	<style>
        .box {
            position: relative;
            width: 200px;
            height: 30px;
            margin: 100px auto;
            border: 1px solid black;
        }

        .box::after {
            content: "";
            /* 伪元素是行内元素,需要转换成块级才能设置宽高。这里有定位，所以也可以 */
            position: absolute;
            top: 9px;
            right: 10px;
            width: 8px;
            height: 8px;
            border: 1px solid black;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg);
            /* 谁做过渡给谁加 */
            transition: all .3s;
        }

        /* 鼠标经过，箭头朝上显示 */
        .box:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
</body>

设置元素转换中心点

transform-origin：x y;

x y 默认转换的中心点是（50% 50%）
可以是像素值，也可以是关键字（top left right bottom center）

旋转小案例（利用设置元素转换中心点和盒子垂直居中）

	
	<style>
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid black;
        }

        .box .little {
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: skyblue;

        }

        .box .little::after {
            content: "传媒";
            /* 伪元素是行内元素，设置宽高需要转成块元素 */
            display: block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: pink;
            /* 改变旋转中心点为左下 */
            transform-origin: left bottom;
            transform: rotate(90deg);
            /* 谁做过渡给谁加 */
            transition: all .3s;
        }

        /* 鼠标经过little的时候，把下面的传媒旋转回来 */
        .box .little:hover::after {
            transform: rotate(0);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="little">
        </div>
    </div>
</body>

缩放：scale

宽和高放大2倍，里面数字是几就是放大了几倍。如果是1的话，就是不放大。如果是0.几，就是缩小

transform: scale(2, 2);

只写一个参数，第二个参数相当于和第一个参数一样

transform: scale(2);

特征

不会影响其他盒子，而且可以设置缩放的中心点
里面写的是数字，不跟单位

图片放大效果（利用放大和过渡还有溢出隐藏）

<head>	
	<style>
        .box {
            overflow: hidden;
            width: 225px;
            height: 137px;
            margin: 100px auto;
        }

        .box img {
            width: 100%;
            height: 100%;
            /* 谁做过渡给谁加 */
            transition: all .2s;
        }

        /* 鼠标经过box的时，box里面的图片放大 */
        .box:hover img {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/scale.jpg" alt="">
    </div>
</body>

2D转换复合写法

transform：translate() rotate() scale() ;

transform: translate(100px, 100px) rotate(180deg);

其顺序会影响结果
当我们同时有位移和其他属性的时候，一定要先移动再其他

C3动画

动画（animation）可通过设置多个节点来控制一个或者一组动画

先定义动画（keyframes：关键帧）

@keyframes move {
			 /* 1. 定义一个动画  from和to等同于0%和100% */
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(1000px);
            }
        }

再调用动画（animation：动画）

.box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: move 3s;
        }

属性详解

animation-name 动画名字，必须要写
animation-duration 持续时间，必须要写
animation-timing-function 速度曲线(默认ease)
animation-delay 何时开始
animation-iteration-count 播放次数(默认是1，循环播放是infinite)
animation-direction 是否逆向播放(默认是normal，逆播放是alternate)
animation-fill-mode 结束状态(保持原位置是forwards，回到起始是backwards)
animation-play-state 规定动画是否正在运行或暂停(默认是running，暂停是pause)，常和hover连用

复合写法

animation: name duration timing-function delay iteration-count direction fill-mode;

速度曲线细节

animation-timing-function：默认是“ ease ”

ease 低速开始，然后加快，在结束前变慢
linear 匀速
ease-in 动画以低速开始
ease-in 动画以低速结束
ease-in-out 动画以低速开始和结束
steps( ) 指定了时间函数中的间隔数量（步长）

打字效果

<head>	
	<style>
        @keyframes move {
            0% {
                width: 0;
            }

            100% {
                width: 200px;
            }
        }

        .box {
            overflow: hidden;
            width: 20px;
            font-size: 20px;
            background-color: pink;
            animation: move 5s steps(10) forwards;
            /* 让文字强制一行 */
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div class="box">
        我在这里等着你回来呦
    </div>
</body>

奔跑的小熊

<head>	
	<style>
        @keyframes bear {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }

            100% {
            	/* 让熊跑到最中间 */
                left: 50%;
                transform: translate(-50%, 0);
            }
        }

        body {
            background-color: #ccc;
        }

        .box {
            position: absolute;
            top: 100px;
            width: 200px;
            height: 100px;
            background: url(./images/bear.png) no-repeat;
            animation: bear 1s steps(8) infinite, move 3s linear forwards;
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
</body>

3D转换

特点：

远小近大
物体后面遮挡不可见
z轴垂直屏幕，往自己这是正方向，反方向是负方向

3D位移

比2D位移多了一个可移动的z轴

transform: translateZ(100px);

完整写法，z轴不加透视是看不出变化的，如果没有就写0

transform: translate3d(100px, 100px, 100px);

透视perspective

如果要产生3D效果，就需要加透视，远小近大，透视的单位是px
透视要写到被观察元素的父元素上面

<head>	
	<style>
        body {
            /* 远小近大 */
            perspective: 500px;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* z轴不加透视是看不出变化的 */
            transform: translate3d(400px, 100px, 100px);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

如果透视固定的情况下，translateZ 越大(越往自己这来) 则元素看着就更大。反之则会看着更小

3D旋转

可以让元素在三位平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

旋转方向遵循左手法则，大拇指朝向正方向

围绕x轴旋转

transform: rotateX(45deg);

围绕y轴旋转

transform: rotateY(45deg);

围绕z轴旋转，跟2d看着是一样的！

transform: rotateZ(45deg);

复合写法（了解）那个方向旋转，就让那个方向为1

transform: rotate3d(1, 0, 0, 45deg);

这种是x和y对角线旋转

transform: rotate3d(1, 1, 0, 45deg);

3D呈现

transform-style：perserve-3d; 加个3D呈现,开启3D空间，产生立体的感觉
3D呈现要写到被观察元素的父元素上

< 
    <style>
        body {
            /* 加个透视，才能有3D效果 */
            perspective: 300px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* 加个3D呈现,开启3D空间，产生立体的感觉 */
            transform-style: preserve-3d;
            transition: all .5s;
        }

        .box::before {
            content: "";
            /* 伪元素是行内元素，加了定位，就可以设置宽高了 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        .box::after {
            content: "";
            /* 伪元素是行内元素，加了定位，就可以设置宽高了 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: skyblue;
            /* 围绕x轴旋转45度 */
            transform: rotateX(60deg);
        }

        .box:hover {
            /* 鼠标经过，围绕y轴旋转-45度 */
            transform: rotateY(-45deg);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

经典案例

两面翻转的盒子

<head>	
	<style>
        body {
            perspective: 400px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            margin: 100px auto;
            border-radius: 50%;
            transition: all 1s;
            transform-style: preserve-3d;
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: skyblue;
        }

        .box .before {
            background-color: pink;
            z-index: 1;
        }

        .box .after {
            /* 先围绕y轴旋转180度，跟前面的背靠背 */
            transform: rotateY(180deg);
        }

        .box:hover {
            /* 鼠标经过盒子的时候，让盒子围绕y轴旋转-180度 */
            transform: rotateY(-180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="before">前面</div>
        <div class="after">后面</div>
    </div>
</body>

3D导航栏

<head>	
	<style>
        .box {
            float: left;
            position: relative;
            width: 150px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 100px 10px;
            font-size: 18px;
            color: #fff;
            transition: all .4s;
            transform-style: preserve-3d;
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        .box .front {
            z-index: 1;
            transform: translateZ(40px);
        }

        .box .down {
            background-color: skyblue;
            /* 先往前趴下来-90度(即围绕x轴旋转-90度) */
            transform-origin: bottom;
            transform: rotateX(-90deg);
        }

        .box:hover {
            /* 鼠标经过盒子的时候，整个盒子围绕x轴旋转90度 */
            transform-origin: bottom;
            transform: rotateX(90deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">前面的</div>
        <div class="down">下面的</div>
    </div>
    <div class="box">
        <div class="front">前面的</div>
        <div class="down">下面的</div>
    </div>
    <div class="box">
        <div class="front">前面的</div>
        <div class="down">下面的</div>
    </div>
    <div class="box">
        <div class="front">前面的</div>
        <div class="down">下面的</div>
    </div>
</body>

旋转木马案例

<head>	
	<style>
        body {
            background-color: #ccc;
            perspective: 1000px;
        }

        @keyframes Rotate {
            0% {}

            100% {
                transform: rotateY(360deg);
            }
        }

        .box {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 200px auto;
            transform-style: preserve-3d;
            background: url(./images/8.webp) no-repeat;
            background-size: cover;
            animation: Rotate 10s linear infinite;
        }

        /* 鼠标经过就暂停 */
        .box:hover {
            animation-play-state: paused;
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .box div:first-child {
            transform: translateZ(300px);
            background: url(./images/1.jpg) no-repeat;
            background-size: cover;
        }

        .box div:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
            background: url(./images/7.webp) no-repeat;
            background-size: cover;
        }

        .box div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
            background: url(./images/3.jpg) no-repeat;
            background-size: cover;
        }

        .box div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
            background: url(./images/4.webp) no-repeat;
            background-size: cover;
        }

        .box div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
            background: url(./images/5.webp) no-repeat;
            background-size: cover;
        }

        .box div:last-child {
            transform: rotateY(-60deg) translateZ(300px);
            background: url(./images/6.jpeg) no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>
    <section class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

浏览器私有前缀

是为了照顾老版本的浏览器，新版本的就无需添加

-moz- 代表火狐浏览器的私有属性
-ms- 代表IE浏览器的私有属性（IE基本废除了，现在用的是Edge)
-webkit- 代表谷歌和苹果浏览器的私有属性
-o- 代表欧鹏浏览器的私有属性

推荐的写法

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

小辉吖～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3基础

Css3基础
复制链接

扫一扫