CSS实现太阳出来特效

chenchun

2018-02-18

CSS实现太阳出来特效

<!DOCTYPE html>
<html>
<head>
    <style>html {
        text-align: center;
        background: #f4c042;
    }

    svg {
        width: 400px;
        height: 300px;
    }

    * {
        stroke: #765d20;
        stroke-linecap: round;
        vector-effec: non-scaling-stroke;
    }

    [id='line'] {
        stroke-width: 3;
    }

    text {
        font: .875em century gothic, verdana, sans-serif;
    }

    [id='mover'] {
        animation: sun-motion 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
    }

    [id='main'] {
        fill: transparent;
        stroke-width: 7;
    }

    [id='eyes'] {
        animation: eye-motion 5s ease-out infinite;
    }

    [id='eyes'] circle {
        fill: #765d20;
    }

    [id='ray'] {
        stroke-width: 4;
    }

    [id='rays'] {
        animation: rot 5s linear infinite;
    }

    @keyframes rot {
        to {
            transform: rotate(0.25turn);
        }
    }

    @keyframes eye-motion {
        0%, 20%, 49%, 100% {
            transform: translate(-13px);
        }
        21%, 25%, 29%, 47% {
            transform: translate(13px) scaleY(1);
        }
        27% {
            transform: translate(13px) scaleY(0);
        }
        48% {
            transform: translate(0);
        }
    }

    @keyframes sun-motion {
        0%, 99%, 100% {
            transform: translateY(-16px);
        }
        50% {
            transform: translateY(-29px);
        }
        52%, 98% {
            transform: translate(4px) scaleY(1.25);
        }
        53%, 97% {
            transform: translateY(23px);
        }
    }
    </style>
</head>
<body>
<svg viewBox="-200 -150 400 300">
    <defs>
        <line id="ray" x1="-5" x2="5"></line>
        <clipPath id="cp">
            <rect x="-200" y="-150" width="400" height="150"></rect>
        </clipPath>
    </defs>
    <line id="line" x1="-76" x2="76"></line>
    <text text-anchor="middle" y="45">sunrise</text>
    <g id="sun" clip-path="url(#cp)">
        <g id="mover">
            <circle id="main" r="50"></circle>
            <g id="eyes">
                <circle r="3" cx="-13"></circle>
                <circle r="3" cx="13"></circle>
            </g>
            <g id="rays">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
                     transform="rotate(315) translate(70)"></use>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
                     transform="rotate(270) translate(70)"></use>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
                     transform="rotate(225) translate(70)"></use>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
                     transform="rotate(180) translate(70)"></use>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
                     transform="rotate(135) translate(70)"></use>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
                     transform="rotate(90) translate(70)"></use>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
                     transform="rotate(45) translate(70)"></use>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
                     transform="rotate(0) translate(70)"></use>
            </g>
        </g>
    </g>
</svg>
<script type="text/javascript">/*Javascript代码片段*/</script>
</body>
</html>

css