CSS3滤镜filter

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

<!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>图片模糊处理filter</title><style>img {/*给目标添加模糊效果*//* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */filter: blur(15px);}img:hover {filter: blur(0);}</style>
</head>
<body><img src="data:images/pink.jpg" alt="">
</body>
</html>

结果：

CSS3过渡（重点）

transition: 需要过度的属性话费的时间运动曲线何时开始;

谁过过渡谁加

属性：想要变化的CSS属性，宽度高度颜色以及内外边距都可以。如果想要所有属性都有过度，填写all即可。
花费时间：单位是秒（必须写单位）。
运动曲线：默认为ease（可以省略）
何时开始：单位是秒（必须写单位），可以谁延迟触发时间，默认为0s（可以省略）

<!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>CSS3过渡练习-进度条</title><style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in {width: 50%;height: 100%;background-color: red;/*给bar_in类中，所有属性添加过渡*//* 谁做过渡给谁加 */transition: all .7s;}.bar:hover .bar_in {width: 100%;}</style>
</head>
<body><div class="bar"><div class="bar_in"></div></div>
</body>
</html>

H5C3基础学习总结之（毛玻璃）滤镜及动画过渡相关推荐

H5C3基础学习总结之CSS四种定位模式
定位组成定位 = 定位模式 + 边偏移定位模式适用于制定一个元素在文档中的定位方式.边偏移则决定了该元素的最终位置. 定位模式定位模式决定元素的定位方式,通过position属性来设置: 值语 ...
【UI界面设计】PS基础学习笔记
[UI界面设计]PS基础学习笔记一.概述 1.行业规范: 2.介绍二.PS入门 1.安装 2.基本介绍 3.新建项目 4.PS的基本使用流程 5.项目保存 6.抠图 7.修图 8.修人像图 9.如 ...
沉睡者IT：零基础学习短视频与+玩转抖音快手
零基础学习短视频与+玩转抖音快手一.正常活跃账号新号前期别刷粉.别刷赞.别刷任何量,千万别刷!养成一个良好的习惯,去观看作品, 把内容好的作品点赞收藏评论. 权重权重是一个内在的数值,查看方式是 ...
教你如何零基础学习视频剪辑，干货满满
5000字长文预警!!! 软件推荐+专业术语解析+视频素材网站分享教你如何零基础学习视频剪辑,干货满满那么在推荐视频剪辑软件之前,首先你应该明确自己的制作视频的目的. 是想成为专业剪辑师,从事专业 ...
FPGA基础学习与方向
问:本人零基础,想学FPGA,求有经验的人说说,我应该从哪入手,应该看什么教程,应该用什么学习板和开发板,看什么书等,希望有经验的好心人能够给我一些引导. 如果想速成,那就上网看视频吧,这样主要是面对 ...
【转】oracle PLSQL基础学习
[转]oracle PLSQL基础学习 --oracle 练习: /**************************************************PL/SQL编程基础****** ...
python创建对象的格式为_Python入门基础学习(面向对象)
python基础学习笔记(四) 面向对象的三个基本特征: 封装:把客观事物抽象并封装成对象,即将属性,方法和事件等集合在一个整体内继承:允许使用现有类的功能并在无须重新改写原来的类情况下,对这些功能 ...
虚幻引擎虚拟现实开发基础学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了 ...
动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals
如何分类--动画产业基础大小解压后:6.2G 含课程素材 1920X1080 mp4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 信息: 绘画技巧.解剖学.角色设计.透视和整体讲故事--这门 ...

H5C3基础学习总结之（毛玻璃）滤镜及动画过渡

CSS3滤镜filter

CSS3过渡（重点）

H5C3基础学习总结之（毛玻璃）滤镜及动画过渡相关推荐

最新文章

热门文章

H5C3基础学习总结之（毛玻璃）滤镜及动画过渡

CSS3滤镜filter

CSS3过渡 （重点）

H5C3基础学习总结之（毛玻璃）滤镜及动画过渡相关推荐

最新文章

热门文章

CSS3过渡（重点）