9.CSS3新加属性（滤镜|函数|过渡|2D/3D转换|动画）

已于 2023-02-12 13:34:23 修改
阅读量508 收藏 2
点赞数
分类专栏： html+CSS 文章标签： css3 css 3d
于 2023-02-12 13:25:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62061392/article/details/128993823
版权

文章目录


基础学习第九篇 ,这里是我的html+css专栏

图标变模糊 – CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

filter:   函数(); -->  例如： filter: blur(5px);  -->  blur模糊处理  数值越大越模糊

在这里插入图片描述

例子：

img {
/* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
    filter: blur(15px);
}
img:hover {
    filter: blur(0);
}

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

图片模糊处理

计算盒子宽度 – calc 函数

calc() 此CSS函数让你在声明CSS属性值时执行一些计算

width: calc(100% - 80px);
括号里面可以使用 + - *  / 来进行计算

例子：

.father {
    width: 300px;
    height: 200px;
    background-color: pink;
}
.son {
    /* width: 150px; */
    /* width: calc(150px + 30px); */
    width: calc(100% - 30px);
    height: 30px;
    background-color: skyblue;
}

 /* 需求我们的子盒子宽度永远比父盒子小30像素  */
<div class="father">
    <div class="son"></div>
</div>

CSS3 过渡（★★★）

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。

我们现在经常和 :hover 一起 搭配使用。

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
  • 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以
  • 花费时间： 单位是 秒（必须写单位） 比如 0.5s
  • 运动曲线： 默认是 ease （可以省略）
  • 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
  • 后面两个属性可以省略
  • 记住过渡的使用口诀： 谁做过渡给谁加

在这里插入图片描述

练习1：

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

div:hover {
    width: 400px;
    height: 200px;
    background-color: skyblue;
}

<div></div>

过渡效果1
过渡效果1

过渡效果2
在这里插入图片描述

练习2：进度条

.bar {
    width: 150px;
    height: 15px;
    border: 1px solid red;
    border-radius: 7px;
    padding: 1px;
}

.bar_in {
    width: 50%;
    height: 100%;
    background-color: red;
    /* 谁做过渡给谁加 */
    transition: all .7s;
}

.bar:hover .bar_in {
    width: 100%;
}

<div class="bar">
    <div class="bar_in"></div>
</div>

在这里插入图片描述

2D转换

移动translate
div {
    /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
    transform: translate(x, y);
    transform: translate(100px, 100px);
    /* 1. 如果只移动x坐标 */
    transform: translate(100px, 0);
    transform: translateX(100px);
    /* 2. 如果只移动y坐标 */
    transform: translate(0, 100px);
    transform: translateY(100px);
     /* 3.百分比是相对于自身宽高*/
    transform: translate(50%,50%);
}

  • 对行内标签没有效果

  • 百分比是相对于自身宽高

    • 扩展：让盒子水平垂直居中（定位+移动）

      .father {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
}

.son {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
     /* 旧方法，但是如果要换盒子就要对应去改   */
    /* margin-top: -100px;
    margin-left: -100px; */
    
    /*新方法： 盒子往上走自己高度的一半   */
    transform: translate(-50%, -50%);
}

  • 移动类似定位不影响其他盒子的位置

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UbIktWUe-1676177728032)(assets/1675909752409.png)]

旋转rotate
/* 正为顺时针，负为逆时针 */
transform: rotate(360deg);

设置旋转点
/* 1.可以跟方位名词 */
transform-origin: left bottom;
/* 2. 默认的是 50%  50%  等价于 center  center */
/* 3. 可以是px 像素 */
transform-origin: 50px 50px;

  • 默认旋转的中心点是元素的中心点

  • 案例：三角

    div {
    position: relative;
    width: 249px;
    height: 35px;
    border: 1px solid #000;
}

div::after {
    /* 在盒子后面画出三角 */
    content: "";
    position: absolute;
    top: 8px;
    right: 15px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
}

在这里插入图片描述

缩放scale

div:hover {
/* scale ：不会影响其他的盒子*/
    width: 300px;
    height: 300px;
    transform: scale(2);
    transform: scale(2, 1);
    transform: scale(0.5);
/*  而且可以设置缩放的中心点,默认盒子中心*/
    transform-origin: left bottom;
}

20-分页按钮案例：
在这里插入图片描述

  • 合写

    /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(180deg) scale(2);

动画

基本使用

步骤：

  1. 先定义动画
  2. 再调用动画
/*1.先定义动画 */
@keyframes move {
 /* 开始状态 */
 0% {
     transform: translateX(0px);
 }

 /* 结束状态 */
 100% {
     transform: translateX(1000px);
 }
}

div {
    /* 2. 再调用动画 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 2s;
}
动画序列
/* from to 等价于  0% 和  100%*/
@keyframes move {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(1000px, 0);
    }
} 

/* 动画序列 */
/* 1. 可以做多个状态的变化 keyframe 关键帧 */
/* 2. 里面的百分比要是整数 */
/* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */

@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(1000px, 0)
    }
    50% {
        transform: translate(1000px, 500px);
    }
    75% {
        transform: translate(0, 500px);
    }
    100% {
        transform: translate(0, 0);
    }
}

div {
    animation-name: move;
    animation-duration: 10s;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akDf5axg-1676178753283)(assets/1675913351225.png)]

常见属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fdNS7xA6-1676178753283)(assets/1675917847091.png)]

@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(1000px, 0);
    }
}

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 动画名称 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 2s;
    /* 运动曲线 */
    animation-timing-function: ease;
    /* 何时开始 */
    animation-delay: 1s;
    /* 重复次数  iteration-count(重复的次数) infinite(无限)  */
    animation-iteration-count: infinite;
    /* 是否反方向播放 normal/alternate（反方向） */
    animation-direction: alternate;
    /* 动画结束后的状态 backwards(回到起始状态)/forwards(停留在结束状态) */
    animation-fill-mode: forwards;

}

div:hover {
    /* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
    animation-play-state: paused;
}

简写

/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: move 2s linear 0s 1 alternate forwards;
/* 前面2个属性 name  duration 一定要写 */
速度曲线之 曲线步长Step()

animation-timing-function

在这里插入图片描述

打字机效果

div {
    overflow: hidden;
    font-size: 20px;
    width: 0;
    height: 30px;
    background-color: pink;
    /* 让我们的文字强制一行内显示 */
    white-space: nowrap;
    /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
    animation: w 4s steps(10) forwards;
}

@keyframes w {
    0% {
        width: 0;
    }

    100% {
        width: 200px;
    }
}

<div>世纪佳缘我在这里等你</div>

效果
在这里插入图片描述

奔跑的熊

div {
    position: absolute;
    width: 200px;
    height: 100px;
    background: url(media/bear.png) no-repeat;
    /* 我们元素可以添加多个动画， 用逗号分隔 */
    animation: bear_pos .4s steps(8) infinite, img_mov 3s forwards;
}

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

@keyframes img_move {
    0% {
        left: 0;
    }
    100% {
        left: 50%;
        /* margin-left: -100px; */
        transform: translateX(-50%);
    }
}

图片：
在这里插入图片描述
效果：
在这里插入图片描述

3D转换

三维坐标系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tz2Uojyw-1676178753286)(assets/1675920561226.png)]

3D移动translate3d

在2D移动的基础上加了一个z轴方向移动

translateZ(100px);
/*3D移动有简写的方法 | xyz是不能省略的，如果没有就写0*/
transform: translate3d(x,y,z);
透视perspective
  • 透视也称视距：眼睛到屏幕的距离
  • 越近成像越大，越远成像越小

在这里插入图片描述

在这里插入图片描述

3D旋转rotate3d

rotateX()

body {
    /* 透视 */
    perspective: 300px;
}

img {
    display: block;
    /* 过渡 */
    transition: all 1s;
}

img:hover {
    transform: rotateX(45deg);
}

效果：
在这里插入图片描述

如果分不清往哪里转：

在这里插入图片描述

rotateY()

img:hover {
    transform: rotateY(45deg);
}

在这里插入图片描述

在这里插入图片描述

合写

img:hover {
    /* 沿对角线旋转 */
    transform: rotate3d(1, 1, 0, 45deg);
}

在这里插入图片描述

3D呈现transform-style
  • 控制子元素是否开启三维立体环境
  • flat ：默认不开启
  • preserve-3d 子元素开启
  • 代码写在父级
案例1：

css

body {
    perspective: 500px;
}

.box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transition: all 2s;
    /* 让子元素保持3d立体空间环境 */
    transform-style: preserve-3d;
}

.box:hover {
    transform: rotateY(60deg);
}

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

.box div:last-child {
    background-color: purple;
    transform: rotateX(60deg);
}

html

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

在这里插入图片描述

案例2：

css

body {
    perspective: 400px;
}

.box {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    transition: all .4s;
    /* 让背面的紫色盒子保留立体空间 给父级添加的 */
    transform-style: preserve-3d;

}

.box:hover {
    transform: rotateY(180deg);
}

.front,
.back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 30px;
    color: #fff;
    text-align: center;
    line-height: 300px;
}

.front {
    background-color: pink;
    z-index: 1;
    /* 2022 */
    transform: translateZ(1px);
}

.back {
    background-color: purple;
    /* 像手机一样 背靠背 旋转 */
    transform: rotateY(180deg);
}

html

<div class="box">
    <div class="front">黑马程序员</div>
    <div class="back">pink老师这里等你</div>
</div>

在这里插入图片描述

如果你有不明白的,这里是我的html+css专栏

菜鸟黄某
关注
专栏目录
CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换
weixin_53155105的博客
08-03 591
CSS3 新增选择器 CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 注意：类选择器、属性选择器、伪类选择器，权重为 10 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点） 总结： 伪元素选择器（重点） 伪元素选择器可以帮助我们......
css3 y轴旋转 动画,CSS3过渡旋转透视2d3d动画等效果的实例代码
weixin_33116629的博客
08-03 1158
才发现原来CSS3这么好用…CSS3盒子模型CSS3中可以通过 box-sizing 来指定盒模型，有2个值，即可指定为 content-box、border-box，这样计算盒子大小的方式就发生了改变。box-sizing: content-box 盒子大小为 width+padding+border(默认)box-sizing: border-box 盒子大小为 width (前提paddin...
css 滤镜_动画CSS图像滤镜
cungui5726的博客
08-19 215
css 滤镜In recent articles I’ve shown how to create cross-browser image filter effects with CSS and SVG: converting color photographs to black and white and sepia-tone, as well as blurring them. The nex...
使用css3 滤镜， 令 div 隐藏元素 ，生成动画
weixin_42607969的博客
01-19 202
使用 CSS3 滤镜可以让 div 隐藏元素生成动画。可以使用 "opacity" 属性将其设置为 "0"，然后使用 "transition" 属性和 "transform" 属性创建动画。例如： div { opacity: 0; transition: opacity 2s; } div:hover { opacity: 1; } 这样，当鼠标悬停在 div 上时，...
css学习记录十三:css函数（二）：filter()滤镜函数
吮指原味鸡的博客
11-04 162
css学习记录十三:css函数（二）：filter滤镜函数一、filter()的作用二、写法 一、filter()的作用 filter CSS属性将模糊或颜色偏移等图形效果应用于元素 二、写法 filter: blur(5px); /*blur模糊处理 数值越大越模糊*/ ...
简单的图像滤镜运算法则
稻草人的高粱地
11-25 1066
简单的图像滤镜运算法则位图文件主要存储的是一个一个的像素，它是一个长乘宽的二维数组，每一个数组元素都是一个RGB struct，里面有3个Byte（字节），分别存储着RGB（即红绿蓝）三原色的值，从0到255，数字越大颜色越亮，（0，0，0）代表黑色，（255，255，255）代表白色。我们假设有一个非常小的位图图像（height=2，width=4），那么它在内存中最重要的部分（
CSS3过渡旋转透视2d3d动画等效果
MaNqo的博客
03-15 2230
才发现CSS3原来这么好用… CSS3盒子模型 CSS3中可以通过 box-sizing 来指定盒模型，有2个值，即可指定为 content-box、border-box，这样计算盒子大小的方式就发生了改变。 box-sizing: content-box 盒子大小为 width+padding+border(默认) box-sizing: border-box 盒子大小为 width (前提padding和border不会超过width宽度) * { margin: 0; pad.
【CSS】CSS3新特性-新增选择器-盒子模型-滤镜-过渡-2D-3D-透视-动画-浏览器私有前缀等
YK菌的博客
12-20 363
文章目录1. 现状2. 新增选择器2.1 属性选择器2.2 结构伪类选择器2.3 伪元素选择器（重点）使用场景2.3.1 伪元素字体图标2.3.2 仿土豆效果2.3.3 伪元素清除浮动3. 盒子模型4. 其他特性4.1 滤镜 filter4.2 calc函数4.3 过渡transition (重点)5. 2D转换5.1 translate 位移5.2 rotate 旋转5.3 2D转换中心点 transform-origin5.4 缩放scale5.5 2D转换综合性写法5.6总结6. 动画 animati
CSS 文字加阴影变3D效果演示
09-25
在这个CSS文字加阴影变3D效果演示的例子中，首先展现了CSS在处理文字效果方面的强大功能。CSS不仅能够给文字添加阴影效果，还能添加背景、改变文字颜色以及创建立体的3D效果。通过研究和实践这些示例，即便是初学者...
纯CSS3 3D网状球动画特效
06-24
CSS3中的`transform`属性允许我们对元素进行2D和3D的旋转、缩放、平移和倾斜。在3D空间中，我们可以使用`perspective`属性设置观察者的视点距离，以创建更逼真的深度感。`transform-style: preserve-3d;`则确保子...
CSS3盒模型与2D变形
yyy_wj的博客
07-09 212
1、CSS3盒模型 CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。 可以分成两种情况： 1、box-sizing: content-box 盒子大小为 width + padding + border， content-box:此值为其默认值，其让元素维持W3C的标准Box Mode 2...
腾讯移动前端一面（不会的题）
章鱼小丸子
03-31 496
我木有答上来的题整理 1.img放到div里面最下面有一个小白边，怎么去掉哪？ 我答的是float，他说也可以。把img设置成display：block即可。。。。。唉 2.css3的transform都有哪些呀？ 我木有记住过那么多。。然后我就萌比啦。 倾斜是：skew。倾斜是：skew。。（明明查api就有的哇） matrix(n
CSS3之2D与3D转换
夕山雨的博客
10-20 1632
在CSS3中新增了很多关于2D和3D转换的标准，它允许将页面元素在2D和3D空间内进行移动、缩放、旋转、扭曲等。所谓的2D转换，指的是元素可以在平面内进行位置或形状的转换，而3D转换指的是元素可以在三维空间（也就是立体空间）内进行位置或形状的转换。 我们先来看一下几个2D和3D转换的简单效果（文末附带相关代码，感兴趣的可以新建一个txt文件，将代码粘进去保存，然后将文件后缀改为html，双击运行即...
CSS3 2D转换&3D转换
江浙沪柯蓝
01-17 3604
1、transform属性方法 Transform 方法 2、2D转换 translate()方法 .div1 { width: 100px; height: 100px; background: #00ff21; transform: translate(100
CSS3基础之3D转换(2)，你必须知道的CSS盒模型
最新发布
2401_84097774的博客
04-03 940
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取/>正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取资料领取方式：点击这里前往免费获取。
CSS3的2D转换和3D转换，你了解了嘛？
wj624的博客
08-19 853
css3的2D转换和3D转换 CSS3大纲： 本次讲解css3带来了两种转换：2D转换和3D转换 1. 2D转换 转换( transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移(transform)、旋转(rotate)、缩放(scale)等效果 2D转换是改变标签在二维平面上的位置和形状的一种技术，要先学习二维坐标系。 1.1 2D转换之移动 transform ​ 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。 语法格式： transform: tra
CSS3 2D转换与3D的转换
m0_62337846的博客
03-20 307
2D 一、2D定义： 转换的效果是让某个元素改变形状，大小与位置 二、2D转换类型： 1、translate()，根据左(x轴)和顶部(y轴)位置给定的参数，从当前元素位置移动； translate值(50px，100px)是从左边元素位置移动50个像素，并从顶部向下移动100px像素。 2、rotate()方法，在一个给定度数顺时针旋转的元素，负值是允许的，这样是让元素逆时针旋转； rotate值(30deg)元素顺时针旋转30度。 3、scale()方法，该元素增加或减小
web前端（盒子模型、颜色渐变、css的继承性、浮动、2d转换、3d转换、过度、动画）
m0_74355247的博客
07-25 122
web前端（盒子模型、颜色渐变、css的继承性、浮动、2d转换、3d转换、过度、动画）
【视觉基础篇】12 # 如何使用滤镜函数实现美颜效果？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
10-26 1694
【跟月影学可视化】学习笔记。所谓像素化，就是把一个图像看成是由一组像素点组合而成的。每个像素点负责描述图像上的一个点，并且带有这个点的基本绘图信息。Canvas2D 以 4 个通道来存放每个像素点的颜色信息，每个通道是 8 个比特位，也就是 0~255 的十进制数值，4 个通道对应 RGBA 颜色的四个值。灰度化，在RGB模型中，如果R=G=B时，则彩色表示一种灰度颜色，其中R=G=B的值叫灰度值，因此，灰度图像每个像素只需一个字节存放灰度值（又称强度值、亮度值），灰度范围为0-255。灰度化图片：简单来说
HTML5+CSS3+JS前端开发学习笔记
CSS3的布局技巧，如浮动、行内块的运用、三角形制作、sprites技术和滤镜，以及过渡、2D和3D转换、动画等，为实现动态效果提供了理论支持。 JavaScript基础部分涵盖了运算符、类型转换、对象、JSON、函数、原型、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值