首页 > 其他分享 >CSS的过渡和2D效果,滤镜效果

CSS的过渡和2D效果,滤镜效果

时间:2024-08-26 19:25:03浏览次数:15  
标签:效果 100% transition transform 2D width 滤镜 ease CSS

浏览器私有属性前缀

CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。 浏览器私有属性前缀是为了解决浏览器的兼容问题,当一个属性成为标准,并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候就不再使用了

常用的浏览器前缀

浏览器名称内核私有前缀
Chrome Safariwebkit-webkit-
Firefoxgecko-moz-
Operapresto-o-
IEtrient-ms-

过渡效果

CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。 CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

属性描述
transition简写属性,用于在一个属性中设置四个过渡属性
transition-property规定应用过渡的 CSS 属性的名称
transition-duration定义过渡效果花费的时间。默认是 0
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"
transition-delay规定过渡效果何时开始。默认是 0

注意:时间曲线可以有很多值

<style>
  div{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    /*鼠标离开时缓缓恢复*/
    transition:width 3s ease 0.12s;
  }
  div:hover{
    width: 500px;
    /* 过渡的属性 */
    /* transition-property: width;*/
    /*过渡的时间 */
    /* transition-duration: 3s; */
    /* 过渡的速度 */
    /*transition-timing-function: ease; */
    /*是否添加延迟 */
    /*transition-delay: 0; */
    /*合成 */
    transition:width 3s ease 0.12s;
  }
</style>
<div></div>
描述
linear规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值【立方贝塞尔曲线函数】
<style>
  div{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    /*鼠标离开时缓缓恢复*/
    transition:width 3s ease 0.12s;
  }
  div:hover{
    width: 500px;
    /* 过渡的属性 */
    /* transition-property: width;*/
    /*过渡的时间 */
    /* transition-duration: 3s; */
    /* 过渡的速度 */
    /*transition-timing-function: ease; */
    /*是否添加延迟 */
    /*transition-delay: 0; */
    /*合成 */
    transition:width 3s ease 0.12s;
  }
</style>
<div></div>

添加立方贝塞尔曲线函数效果 暂未添加案例效果

案例一:小米官网,鼠标悬浮从右侧显示导航效果

<style>
.banner{
    width: 1000px;
    background: url('../images/0.jpg') no-repeat ;
    background-size: 100%;
    background-clip: content-box;
    background-size: 100%;
    overflow: hidden;
    height: 400px;
}
.show{
    width: 0;
    float: right;
    margin-top: 300px;
    background: salmon;
    color: #fff;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding:0 10px;
    margin-right:-20px;
    transition: all 3s ease 0.12s;
}
.banner:hover .show{
    width: 300px;
    transition: all 3s ease 0.12s;
}
</style>
<div class="banner">
    <div class="show">这是一段被隐藏的文本</div>
</div>

2D效果

平移

语法:translate(X,Y),既可以为正值,也可以为负值(向下、向右为正方向)

注意:尽量不要对元素本身设置当前这个属性,否则图片会一直跳,原因:悬浮时图片的位置发生了改变

案例一:鼠标悬浮向右平移元素

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        transition: all 2s;
    }
    button:hover+div{
        transform: translate(300px,0);
    }
</style>
<button>鼠标悬浮</button>
<div></div>
旋转

语法:transform:rotate(角度) 角度:单位deg 正值:顺时针旋转 负值:逆时针旋转

注意:inline行级元素是不能直接旋转的

案例一:div旋转360度

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        transition: all 2s;
    }
    button:hover+div{
        /* 旋转 */
        transform: rotate(360deg)
    }
</style>
<button>鼠标悬浮</button>
<div></div>
缩放

语法:transform:scale(x,y) x:表示x轴的缩放比例 y:表示y轴的缩放比例 x,y 值分别为原有元素宽高的倍数。 1为不缩放,大于1放大,小于1缩小

当为负值时,将会沿x轴或y轴进行翻转 当括号内两个数相同时,可以只写一个值代替。 如果只想扩大x轴或者y轴,那么属性为scaleX(n)和scaleY(n) transform-origin 影响变换方向。

案例一:鼠标悬浮放大图片

<style>
    img{
        transition: all 2s;
    }
    button:hover+img{
        /* 旋转 */
        transform: scale(0.5);
    }
</style>
<button>鼠标悬浮</button>
<img src="../images/1.jpg" alt="">

 案例二:鼠标悬浮放大心形

<style>
    .love {
    position: absolute;
    background-color: rgb(207, 105, 112);
    width: 250px;
    height: 250px;
    /* 元素居中显示 */
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: rotate(-45deg);
    transition: all 2s;
}
.love::before {
    content: "";
    position: absolute;
    background-color: rgb(207, 105, 112);
    border-radius: 50%;
    width: 250px;
    height: 250px;
    top: -125px;
    left: 0px;
}
.love::after {
    content: "";
    position: absolute;
    background-color: rgb(207, 105, 112);
    border-radius: 50%;
    width: 250px;
    height: 250px;
    left: 125px;
    top: 0px;
}
.love:hover{
    transform:rotate(-45deg) scale(1.3);
}
</style>
<div class="love"></div>

 案例三:鼠标悬浮反转图片

<style>
    img{
        width: 400px;
    }
    img:hover{
        transform: scale(-1);
    }
</style>
<img src="../images/0.jpg" alt="">
倾斜

语法:transform:skew(x-angle,y-angle)

该元素会以横向(X轴)和垂直(Y轴)为参考确定角度; 如果只想沿x轴或者y轴进行倾斜,那么属性为skewX(n)和skewY(n)

旋转中心点

任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。 在没有transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、缩放,扭曲等操作都是以元素自己中心位置进行变形。 如果实现过渡动画,则变换中心点应该在元素初始CSS

 案例一:元素按照左上角的定点旋转

<style>
    img{
        width: 400px;
        /* 过渡效果 
/
        transition: all 2s;
*        /*
 旋转中心点 */
        transform-origin: right bottom;
    }
    img:hover{
        transform: rotate(360deg);

    }
</style>
<img src="../images/0.jpg" alt="">

滤镜效果:

  filter(滤镜) 属性:

        定义:filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

        注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。

 none: 默认值,没有效果。

blur(px) :给图像设置高斯模糊。值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。

 brightness(%) :给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。

contrast(%):调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。

grayscale(%):将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

hue-rotate(deg):给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。

色环:

saturate(%):转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。

sepia(%):将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

invert(%):反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。

标签:效果,100%,transition,transform,2D,width,滤镜,ease,CSS
From: https://blog.csdn.net/weixin_71949204/article/details/141437569

相关文章

  • 【CSS】从零开始学CSS第二篇:字体属性、文本属性、引入方式
    目录CSS字体属性1.1字体系列1.2字体大小1.3字体粗细1.4文字样式1.5字体复合属性1.6字体属性总结CSS文本属性2.1文本颜色2.2对齐文本2.3装饰文本2.4文本缩进2.5行间距2.6文本属性总结 CSS引入方式3.1CSS的三种样式表3.2内部样式表3.3行内......
  • CSS处理font-weight不生效问题
    如何解决Android系统中文字体字重问题翻找了几天资料,发现NotoSansSC字体能支持中文/数字/英文字体100,300,400,500,700,900的字重,具体如下图所示:<linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:300,400,500,600,700"></link>.t......
  • 【MATLAB源码-第149期】基于MATLAB的2ASK,2FSK,2PSK,2DPSK等相干解调仿真,输出各节点波
    操作环境:MATLAB2022a1、算法描述2ASK(二进制幅移键控)、2FSK(二进制频移键控)、2PSK(二进制相移键控)和2DPSK(二进制差分相移键控)是数字调制技术中的基本调制方式,它们在无线通信、数据传输等领域有着广泛的应用。相干解调是这些调制方式中一个重要的解调技术,它要求接收端的本地振......
  • CSS3新特性
    一、圆角1、border-radius属性(圆角)通过​border-radius​属性可以给任何元素设置​“圆角”​。如果你在​border-radius属性中只指定​一个值​,那么将生成​4个圆角​。但是,如果你要在四个角上​一一指定​,可以使用以下规则:​四个值​: 第一个值为​左上角​,第二个值......
  • HTML+CSS+JS 实现淘宝首页官网
    效果展示:完整代码:HTML部分:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport&q......
  • HTML+CSS 公司官网首页 浮动布局!!
    网页展示: HTML部分:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conte......
  • CSS (常用样式) 笔记05
    一.字体相关1.color:设置字体颜色2.font复合属性:①font-size设置字体大小②font-weight设置字体粗细③font-style设置字体风格e.gitalic斜体normal正常3.文本:①text-decoration设置文本下划线(通常使用none值来消除超链接a的下划线)②text-align规定文本水平对......
  • 剪映国际版(CapCut) 软件安装包下载及安装教程!国际版剪映可免费使用所有的特效、转场、
    软件介绍剪映国际版(CapCut)是一款功能强大且完全免费的视频剪辑应用程序,国际版的界面和国内版的界面基本一样,但是相比国内版,国际版剪映可免费使用所有的特效、转场、滤镜等功能,并且无广告。软件:剪映国际版语言:简体中文大小:550M安装环境:Windows7及以上, 32/64位操作系统......
  • 重塑列表美学:CSS `list-style` 属性的魔法
    重塑列表美学:CSSlist-style属性的魔法摘要CSS的list-style属性是控制列表项标记样式的强大工具。通过这个属性,开发者可以轻松改变无序列表和有序列表的外观,包括标记的类型、位置以及图像。本文将深入探讨list-style属性的各个方面,并提供丰富的代码示例,展示如何使用......
  • CSS定位指南:深入解析position属性的奥秘
    标题:CSS定位指南:深入解析position属性的奥秘CSS中的position属性是控制元素布局的强大工具,它决定了元素在页面上的定位方式。通过不同的值,position属性可以创建静态、相对、绝对、固定或粘性定位效果。本文将深入探讨position属性的不同值及其使用场景,并通过代码示例展示如......