IFE_01_mouseBlur

最新推荐文章于 2021-01-11 16:00:40 发布

原创最新推荐文章于 2021-01-11 16:00:40 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IFE

IFE 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用CSS实现动画与渐变效果的方法，包括如何制作平滑的图片模糊动画、文字颜色渐变及边框动画。通过具体代码示例展示了如何使用CSS3的特性，如@keyframes、-webkit-background-clip等，来创建吸引人的视觉效果。

总结：

缺点：
- css animation实现起来略有卡顿，除非增加足够多的帧数，或者利用requestAnimationFrame进行计算
- 可以看到text_wrap下面又包了层<p> 标签，主要是因为border和text的动画次数不同，这点没有想到更好的方法
文字渐变色：
- 使用CSS渐变【repeating-xx-gradient可以做出酷炫的效果】
- 渐变是<image> 类型的，所以像是color类的属性是无法使用渐变的

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: radial-gradient(circle at 20%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);

毛玻璃效果

-webkit-filter: blur(5px);
    filter: blur(5px);

全部代码

<!DOCTYPE html>
<html>
<head>
    <title>mouse_blur</title>
    <meta charset="utf-8">
    <style type="text/css">
        .food_pic{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 550px;
            height: 550px;
            background: url(food.jpg) no-repeat;
            animation: .5s img_blur 1s ease-in-out forwards;
        }
        .text_wrap{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 100px;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            font: bold 30px '微软雅黑';
            animation: 2s border_delay 2s ease-in-out forwards;
        }
        .text_wrap p{
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: 1s text_anim 2s ease-in-out infinite alternate-reverse;
        }
        .text_wrap:before, .text_wrap:after{
            position: absolute;
            left: 0;
            display: block;
            content: '';
            width: 100%;
            height: 3px;
            animation: 2s border_anim 2s ease-in-out forwards;
        }
        .text_wrap:before{
            top: 0;
        }
        .text_wrap:after{
            bottom: 0;
        }
        @keyframes img_blur{
            100% {
                -webkit-filter: blur(5px);
                        filter: blur(5px);
            }
        }
        @keyframes text_anim{
            0% {
                background-image: radial-gradient(circle at 20%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);
            }
            25% {
                background-image: radial-gradient(circle at 30%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);
            }
            50% {
                background-image: radial-gradient(circle at 45%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);
            }
            50% {
                background-image: radial-gradient(circle at 55%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);
            }
            100% {
                background-image: radial-gradient(circle at 70%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);
            }
        }
        @keyframes border_anim{
            0% {
                background: linear-gradient(90deg, rgba(0,0,0,0), #fff, rgba(0,0,0,0));
            }
            50% {
                background: linear-gradient(90deg, rgba(0,0,0,0), #fff 25%, #fff 75%, rgba(0,0,0,0));
            }
            100% {
                background: #fff;
            }
        }
        @keyframes border_delay{
            100% {
                border-right: 3px solid #fff;
                border-left: 3px solid #fff;
            }
        }
    </style>
</head>
<body>
    <div class="food_pic"></div>
    <div class="text_wrap"><p>来吃面包圈~~</p></div>
</body>
</html>