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

最新推荐文章于 2022-06-15 17:58:39 发布

小猪弟

最新推荐文章于 2022-06-15 17:58:39 发布

阅读量238

点赞数

分类专栏： CSS 文章标签： filter CSS3 calc 过渡 transition

本文链接：https://blog.csdn.net/u011863822/article/details/123629938

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

滤镜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>

在这里插入图片描述

小猪弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础： css3新特性体验一滤镜和过渡

滤镜filterfilter CSS属性性将模糊或者颜色便宜等图形效果应用于元素。格式：filter: 函数()函数有很多的如果有兴趣可以看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Functions演示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试文档&lt
复制链接

扫一扫