使用 css 实现震波效果

使用 css 实现震波效果_第1张图片


<html>
<head>
    <style type="text/css">
        .wave0 {
            animation: scale0 1s;
            -webkit-animation:scale0 1s; 
            animation-iteration-count:infinite;
            -webkit-animation-iteration-count:infinite; 
            animation-timing-function:linear;
            -webkit-animation-timing-function:linear;/* Safari and Chrome */
        }

        .wave1 {
            animation: scale1 1s;
            -webkit-animation:scale1 1s; 
            animation-iteration-count:infinite;
            -webkit-animation-iteration-count:infinite; 
            animation-timing-function:linear;
            -webkit-animation-timing-function:linear; /* Safari and Chrome */
        }

        .wave2 {
            animation: scale2 1s;
            -webkit-animation:scale2 1s; 
            animation-iteration-count:infinite;
            -webkit-animation-iteration-count:infinite; 
            animation-timing-function:linear;
            -webkit-animation-timing-function:linear; /* Safari and Chrome */
        }

        /*  #ff0000 #ff0000d6 #ff0000a6 #ff000087*/
        @keyframes scale0
        {
            from {transform:scale(2);opacity: 0.8}
            to { transform:scale(4);opacity: 0.5}
        }

        @-webkit-keyframes scale0 /*Safari and Chrome*/
        {
            from {transform:scale(2);opacity: 0.8}
            to { transform:scale(4);opacity: 0.5}
        }


        @keyframes scale1
        {
            from {transform:scale(4);opacity: 0.5}
            to { transform:scale(6); opacity: 0.3}
        }

        @-webkit-keyframes scale1 /*Safari and Chrome*/
        {
            from {transform:scale(4);opacity: 0.5}
            to { transform:scale(6); opacity: 0.3}
        }

        @keyframes scale2
        {
            from {transform:scale(6);opacity: 0.3}
            to { transform:scale(7);  opacity: 0.0}
        }

        @-webkit-keyframes scale2 /*Safari and Chrome*/
        {
            from {transform:scale(6);opacity: 0.3}
            to { transform:scale(7);  opacity: 0.0}
        }

        .dot {
            float: left;
            width: 6px;
            height: 6px;
            border-radius:3px;
        }

        .red .dot{
            background-color: red;
        }

        .dot_left {
            margin-left: -6px;
        }

    style>
head>
<body style="padding:200px">
    <div class="red"  style="position:relative;top:300px;left:10px;">
        <div class="dot wave2" style="z-index: 5;">div>
        <div class="dot wave1 dot_left" style="z-index: 8;">div>
        <div class="dot wave0 dot_left" style="z-index: 9;">div>
        <div class="dot dot_left" style="z-index: 10; transform:scale(2)">div>
    div>

    <div class="red"  style="position:relative;top:300px;left:100px;">
        <div class="dot wave2" style="z-index: 5;">div>
        <div class="dot wave1 dot_left" style="z-index: 8;">div>
        <div class="dot wave0 dot_left" style="z-index: 9;">div>
        <div class="dot dot_left" style="z-index: 10; transform:scale(2)">div>
    div>


body>
html>

你可能感兴趣的:(技术杂文,css,震动波纹)