CSS实现太阳出来特效

2018-02-27 11:07:11来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

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  x1="-5" x2="5"></line>        <clipPath >            <rect x="-200" y="-150" width="400" height="150"></rect>        </clipPath>    </defs>    <line  x1="-76" x2="76"></line>    <text text-anchor="middle" y="45">sunrise</text>    <g  clip-path="url(#cp)">        <g >            <circle  r="50"></circle>            <g >                <circle r="3" cx="-13"></circle>                <circle r="3" cx="13"></circle>            </g>            <g >                <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>

 

 

 

 

 

 

 

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台