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="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>