CSS3之新特性_css3新增-CSDN博客

本文链接：https://blog.csdn.net/qq_38507937/article/details/113853896

本文详细介绍了CSS3中的滤镜、过渡、变换等特效技术，包括blur、calc、transition及其应用示例，如过渡动画和2D、3D转换效果。重点讲解了translate、rotate、scale的用法，并探讨了3D转换中的透视和旋转。同时，还提到了关键帧动画@keyframes的定义和使用，以及如何结合animation属性实现动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

filter 函数

函数类型eg

blur(5px);  /*模糊处理，数值越大模糊越明显*/
img {filter: blur(5px) } /*图片模糊处理*/
img:hover{filter: blur(0)} /*去除模糊*/

calc(100% -80px); /*（）里面可以使用+-*÷来计算*/
width : calc(100% -80px); /*孩子始终比父盒子小30px*/

过渡（transition）

过渡动画：可以从一个状态渐渐过渡到另外的一个状态
在这里插入图片描述
使用方式：哪个属性变化就加给谁
eg：下面为由普通的属性，过渡到hover的属性

 div {
     width: 200px;
     height: 100px;
     background-color: pink;
     /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
     /* transition: width .5s ease 0s, height .5s ease 1s; */
     /* 如果想要写多个属性，利用逗号进行分割 */
     /* transition: width .5s, height .5s; */
     /* 如果想要多个属性都变化，属性写all就可以了 */
     /* transition: height .5s ease 1s; */
     /* 谁做过渡，给谁加 */
     transition: all 0.5s;
 }
 div:hover {
     width: 400px;
     height: 200px;
     background-color: skyblue;
 }

进度条demo
在这里插入图片描述

<div class="scroll_bar"></div>

.scroll_bar {
    margin: 20px auto;
    height: 20px;
    width: 160px;
    padding: 1px;
    border: 2px solid red;
    border-radius: 11px;
}

.scroll_bar::after {
    display: block;
    content: '';
    height: 20px;
    width: 100px;
    border-radius: 10px;
    background: red;
    transition: width 0.5s;
}

.scroll_bar:hover::after {
    width: 160px;
}

2D转化效果(transform)

2D转化移动translate

语法：

tranform: translate(x, y)x是x轴移动的位置，y是y轴的移动位置
另外的写法tranlateX(Y

要点：

不影响文档中其他的元素位置
百分比是基于元素是自身的宽高
对行内样式不起作用

2D旋转 rotate

语法:

tranform: rotate(45deg) 正值顺时针，负值逆时针
transform-origin:x y;设置旋转的中心点（默认为50%,50%)可以给像素，和方位名词left,bottm（元素左下角)

样例

    <div class="fa"></div>

        .fa {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: hidden;
        }

        .fa::after {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            background-color: skyblue;
            transform-origin: left bottom;
            transform: rotate(180deg);
            transition: all 1s;
        }

        .fa:hover::after {
            transform: rotate(0deg);
        }

2D缩放之scale

语法 transform: scale(x,y);

细节

如果没有单位，表示x,y分别为宽度高度放大多少位。缩写：scale(x)同时缩放
不会影响其他盒子的位置（不会挤掉其他盒子
transform-origin:x y;设置缩放的中心点（默认为50%,50%)为中心点。可以给像素，和方位名词left,bottm（元素左下角)

2D转化综合写法

transform: translate() rotate() scale()
注意书写顺序，如果先旋转再平移，则会在旋转过程中发生角度的改变，从而平移的方向不确定，推荐先把位移写最前面

3D转化效果(transform)

3D比2D多了z轴，z轴为垂直于屏幕的一轴，如图
在这里插入图片描述

3D位移（translate3d）

z轴需要根据透视perspective才方便看到

语法：
在这里插入图片描述
透视的基本概念：

透视是被加载观察元素的父元素上的
所以d（通过perspective设定）固定时候，z越大，物体在人眼中就显得越大。
eg:perspective: 400px

3D旋转

3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或自定义轴进行旋转
在这里插入图片描述
rotate3d是按照x,y,z的向量方向进行旋转

旋转正方向：左手准则，拇指指向坐标轴的正方向，其余手指的指向

3D呈现(transform-style)

在这里插入图片描述

动画

简介：过渡加强版
使用：定义动画，使用动画

eg:

//1. 定义名字为move的动画, 0%为动画开始的状态，100%为结束的状态(称之为动画序列)
@keyframes move{
	0%{
	}
	100%{
	}
}

div{
	//2.使用动画名称
	animation-name: move;
	//3.动画持续时间
	animation-duration: 2s;
}