css3实现过渡

作者: 局外人12 | 来源:发表于2017-11-22 12:37 被阅读77次

            很多时候页面需要添加一下动效使它变得更加生动近人,让用户更愿意使用。此时,我们就可以使用css3的一些特效来实现。CSS3的过渡是指元素从一种样式逐渐改变为另一种的效果,要实现这一点,必须规定两项内容:1、规定希望把效果添加到哪个CSS属性上;2、规定效果的时长。而这个特效我们可以通过改变一些元素来完成,比如说形状、颜色、位置或者位移。我们来看一下效果:

    过渡效果

    他们是怎么实现的呢?代码如下:

    html代码

    主要还是通过css样式来实现的这些过渡效果

    通过改变形状实现过渡 通过改变位移实现过渡 通过改变位置实现过渡 通过改变颜色实现过渡

    为了让图片效果更加美观,我们可以在最外层添加阴影光圈,鼠标放置时显示:

    阴影光圈

    我们还可以通过改变图片的另一些特性来实现过渡效果,比如:

    Blur:-webkit-filter: blur(4px);  模糊度;

    Sepia:-webkit-filter: sepia(100%); 褐色;

    Invert:-webkit-filter: invert(0.1); 反色;

    Saturate:-webkit-filter: saturate(60%); 饱和度;

    brightness:-webkit-filter: brightness(60%); 亮度。

    相关文章

      网友评论

        本文标题:css3实现过渡

        本文链接:https://www.haomeiwen.com/subject/napnvxtx.html