CSS基础： css3新特性体验一滤镜和过渡

本文主要是介绍CSS基础： css3新特性体验一滤镜和过渡，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

滤镜filter

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

格式：

filter: 函数()

函数有很多的如果有兴趣可以看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Functions

演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试文档</title><style>#j1{/*blur中数字越大越模糊 */filter: blur(4px);}</style>
</head>
<body>
<img  src="jpg/anhei.jpg" >
<hr>
<img id="j1" src="jpg/anhei.jpg">
</body>
</html>

在这里插入图片描述

calc函数

calc()函数让你在声明CSS属性值的时候执行一些运算。

演示：

/*子盒子为父盒子宽度一半 */width: calc(50%);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试文档</title><style>.d1{width: 100%;height: 600px;border:2px solid red;margin: 10px auto;}.d2{width: calc(50% + 50px);height: 200px;border:2px solid red;background:transparent;}</style>
</head>
<body>
<div class="d1"><div class="d2"></div></div>
</body>
</html>

在这里插入图片描述

拉动浏览器窗口，可以看出父类变大而子盒子也跟着变。

CSS3 的过渡

过渡（transition）是CSS中具有颠覆性的特征之一，让在网页开发的时候可以不用Flash动画或js的情况下，让一个元素从一种样式变换为另一种样式时元素添加效果。

过渡动画：是从一个状态，渐渐的过度到另一个状态。其经常于伪元素：hover一起搭配使用。

transition: 过渡的属性  时间  运动曲线  开始时间;

过度属性：想要变化的css属性，宽度，背景颜色以及内外边距等。如果需要所有的属性都变化，直接写一个all就可以了。
时间：单位是秒（必须写单位例如：1.5s），意思是变化从开始到结束的时间。
运动曲线：默认是ease（可以省略）

在这里插入图片描述

何时开始：单位秒（必须写单位）可以设置延迟触发时间默认是0s（可以省略）

注意：过渡的使用口诀--谁做过渡给谁加。

演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试文档</title><style>div{width: 200px;height: 200px;border:2px solid red;background:transparent;transition: width 1s ease 0s;}div:hover{width: 400px;}</style>
</head>
<body><div ></div></body>
</html>

在这里插入图片描述

这个自己演示一下，是动态变化的。

如果是多个属性呢？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试文档</title><style>div{width: 200px;height: 200px;border:2px solid red;background:transparent;transition: width 1s ease  0s;}div:hover{width: 400px;height: 400px;}</style>
</head>
<body><div ></div></body>
</html>

在这里插入图片描述

如果这样写，就是先变化一个高然后变化宽，无法同时变，这样的话如下写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试文档</title><style>div{width: 200px;height: 200px;border:2px solid red;background:transparent;transition: width 1s ease  0s,height 1s ease; /*如果都变可以简写为all 1s ease  0s */}div:hover{width: 400px;height: 400px;}</style>
</head>
<body><div ></div></body>
</html>