CSS3替换GIF波纹效果贼爽

CSS实现波纹效果


写在前面:非专业前端,个人爱好,代码风格伤了你还望见谅


话不多说直接上效果

HTML的骨架代码

初步静态代码展示


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水波效果title>
head>
<body>
    <div class="wave_wrapper">
        <span class="wave_scale">

        span>
        <span class="wave_scale delay">

        span>
    div>
body>
html>

但是这个时候在页面上看不到任何效果

  • 为div追加简单的标志性效果背景颜色
.wave_wrapper {
    margin: 20% auto;
    width: 800px;
    height: 800px;
    background-color: rgb(248, 41, 171);
}

CSS3替换GIF波纹效果贼爽_第1张图片

美化现有的波纹中心

  • 旋转中心div 圆角效果
.wave_wrapper {
    margin: 20% auto;
    width: 800px;
    height: 800px;
    background-color: rgb(248, 41, 171);
    transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
    border-radius: 20%;
}

CSS3替换GIF波纹效果贼爽_第2张图片

中心点扩散块

span {
            position: absolute;
            width: 50%;
            height: 50%;
            top: 25%;
            left: 25%;
            border: 0.2rem solid rgba(248, 41, 171, 0.28);
            border-radius: 50%;
            z-index: -1;
        }

CSS3替换GIF波纹效果贼爽_第3张图片

为中心点添加扩散效果

span.wave_scale {
    animation: wave_scale 3s linear infinite;
    -webkit-animation: wave_scale 3s linear infinite;
}
@keyframes wave_scale {
    from {
        transform: translate3d(-41px, -41px, 0px) scale(1, 1);
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }
    to {
        transform: translate3d(-41px, -41px, 0px) scale(10, 10);
        -webkit-transform: scale(5, 5);
        opacity: 0;
    }
}
@-webkit-keyframes wave_scale {
    from {
        transform: translate3d(-41px, -41px, 0px) scale(1, 1);
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }
    to {
        transform: translate3d(-41px, -41px, 0px) scale(10, 10);
        -webkit-transform: scale(5, 5);
        opacity: 0;
    }
}

CSS3替换GIF波纹效果贼爽_第4张图片

效果修饰

  • 为了看起来更加美观这边将第二部分的水波延迟加载一部分
span.wave_scale.delay {
    animation: wave_scale 3s linear infinite 0.3s;
    -webkit-animation: wave_scale 3s linear infinite 0.3s;
}

最终效果:


源代码获取(WX代号WAVE_001)
CSS3替换GIF波纹效果贼爽_第5张图片

你可能感兴趣的:(html,css)