css3

最新推荐文章于 2024-07-05 14:51:32 发布

Yvettezhu

最新推荐文章于 2024-07-05 14:51:32 发布

阅读量197

点赞数

分类专栏：入门文章标签： css css3 html5

本文链接：https://blog.csdn.net/weixin_49547540/article/details/113793380

版权

入门专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

互联网竞争非常激烈，用户一天浏览那么多网页，想让用户记住，页面炫酷是个好方向。css3增加很多功能，很多可以用于网页美好。下面，我们就来一起看看~

一. 基础

1. 语法规则

有点类似正则表达式

2. 新选择器

属性选择器 element[attr*=val] ^$
伪类选择器（：） element:first-child (last)
element:nth-child(2n)
element:target结合锚点使用
伪元素选择器（::）before，after
selection选中
实现如下：

实现锚点跳转后，变换样式，比如背景颜色等
选中文本后，变化样式

    <a href="#txt1">段落1</a>
    <a href="#txt2">段落1</a>
    <a href="#txt3">段落1</a>
    <a href="#txt4">段落1</a>
    <p id="txt1">前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进行增删前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进行前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进行增删改查，展示。增删改查，展示。改查，展示。数据进行增删改查，展示。
        </p>
    <p id="txt2">前后端分离后，前端负责渲染html页面，后端返回前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进行前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进行增删改查，展示。增删改查，展示。前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进行增删改查，展示。前端所需的数据（json，xml）。

        后端开发的视图即为接口或API，前端可访问接口来对数据进行前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进行前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进行增删改查，展示。前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进行增删改查，展示。增删改查，展示。增删改查，展示。
        </p>
    <p id="txt3">前后端分离后，前端负责渲染html页面，后端返前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进v前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进行增删改查，展示。行增删改查，展示。回前端所需的数据（json，xml）。

        后端开发的视图即为接口或API，前端可访问接口来对数据进行增删改查，展示。
        </p>
    <p id="txt4">前后端分离后，前端负责渲染html页面，后端返前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进v前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。
        后端开发的视图即为接口或API，前端可访问接口来对数据进行增删改查，展示。行增删改查，展示。回前端所需的数据（json，xml）。

        后端开发的视图即为接口或API，前端可访问接口来对数据进行增删改查，展示。
        </p>

p::selection{
    background-color: crimson;
}
p:target{
    background-color: cyan;
}

3. 新盒模型

其实就是border-box

4. 新单位

二. 图形

颜色RGBA加多一个透明度，0完全透明，1完全不透
ps取颜色：吸管工具

1. 文本，边框，背景

1）文本阴影text-shadow（立体感）

x偏移 y偏移模糊度颜色，多个

一些设置可参考如下blog：
https://www.cnblogs.com/hanqishihu/p/6284717.html

2）text-overflow

超出一行后变为省略号

div{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

3）边框圆角border-radius

水平 / 垂直

4）边框阴影box-shadow

x偏移 y偏移模糊度扩展量颜色，

5）边框图片

border-image：

border-image-source：url（‘’）
边框切割线border-image-slice：top right bottom left（边框）
border-image-repeat：space；
strech拉伸
border-image-outset：

6）背景

在前面的先渲染，在前面

background：url(’’) cover,

从哪里开始显示：默认从padding开始显示
background-orign:content-box;
裁剪：background-clip

2. 渐变，过渡，2D3D变换，动画

1）线性渐变

linear-gradient (to right,color1,color2)
background:linear-gradient (to right,color1,color2);
background:linear-gradient (135deg,color1,color2);对角线

2）径向渐变

radial-gradient

3）线性渐变

repeat-linear-gradient

4）过渡

鼠标放上后，出现动画效果
.box{
width:100px；
transition: property（属性/all） time ease delay；
}
.box:hover{
width:200px；
}

也可以通过js触发事件，出现动画效果

5）2D transform

不会影响布局
放在盒子上，盒子移动(translate),缩放(scale)，旋转（rotate）,skew（倾斜）
变形原点：transform-origin: 0 0;
元素旋转后，坐标系会跟着旋转

.box:hover{
transform:translate(x,y)
}

6）3D transform

放在盒子上，盒子突出：
transform：perspective(1000px相机距离） translate3d(x偏移，y偏移，z偏移远近)

3D旋转：左手坐标系

父盒子
perspective：1000px；
transform-style:preserve-3d;
tranform:rotateX(10dege),

子盒子：6个面，position

翻转案例：旋转一正一负
背面不可见backface-visibility:hidden;

7）动画animate

相比与过渡，不需要事件触发，可以在网页加载后自动发生

且可以持续animation-iteration-count:infinite
暂停animation-play-state:paused(鼠标移上之后暂停)

动画结束后展示，显示最开始的状态backwards ，forwards结束时
animation-fill-mode:backwards;

@keyframes 动画名{
0
20%
100%
}
animation:动画名时间 ease infinite alternate；
来回无限播放

动画库：https://animate.style/
https://github.com/animate-css/animate.css

<!DOCTYPE html>
<html lang="en">
<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>
    <link rel="stylesheet" href="../css/animation.css">
    <link rel="stylesheet" href="../css/index3.css">
</head>
<body>
    <div class="title animate__animated animate__bounce animate__infinite">lookatme!</div>
</body>
</html>

.title{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-color: cyan;
}

3. 在线字体图标

@font-face 少用，一般直接用样式类

4. 渐进增强

渐进增强：在低版本浏览器有最基本的效果，新浏览器效果更炫

三.布局

1. 伸缩布局

2. 多列布局

3. 媒体查询@media

详细见布局的文章

四.兼容

前缀应用，浏览器兼容，有专门的工具，之后会在集成项目里详细将这块。

总结

css3增加了边框，动画等功能，还向游戏引擎靠近，调用硬件加速，功能增加的同时，还保证了效率。而且还有，sass和scss类似于编程语言来写css，减少大量重复工作。相对于用js写动画，更加便捷。

当然，css3存在兼容问题，特别是pc端（移动端对于css3很友好），之后会出专门一文讲兼容

Yvettezhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css3

文章目录前言一. 基础1. 语法规则2. 新选择器3. 新盒模型4. 新单位二. 图形1. 文本，边框，背景1）文本阴影text-shadow（立体感）2）text-overflow3）边框圆角border-radius4）边框阴影box-shadow5）边框图片6）背景2. 渐变，过渡，2D3D变换，动画1）线性渐变2）径向渐变3）线性渐变4）过渡5）2D transform6）3D transform7）动画animate3. 在线字体图标4. 渐进增强三.布局1. 伸缩布局2. 多列布局3. 媒体查询
复制链接

扫一扫