利用HTML5实现SVG猫眼动画特效



8 30 11



特效描述:利用HTML5实现 SVG 猫眼动画特效,利用HTML5实现SVG猫眼动画特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/index.js"></script>

3. HTML代码

<style>
svg { background: #000 }
rect, [r], #m { fill: #fff }
</style>
<svg viewBox="-2000 -1000 4000 2000">
  <radialGradient id="r">
    <stop stop-color="#ff0" offset=".32"></stop>
    <stop stop-color="#fa0" offset=".83"></stop>
    <stop stop-color="#fa0" offset=".91"></stop>
    <stop stop-color="#000" offset=".95"></stop>
  </radialGradient>
  <filter id="f">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8"></feGaussianBlur>
  </filter>
  <mask id="m">
    <path d="M500 170c200 340 820 340 780 -290c-200 0 -600 -60 -780 290" filter="url(#f)"></path>
  </mask>
  <g id="g" mask="url(#m)" filter="url(#f)">
    <rect width="2000" height="2000"></rect>
    <ellipse cx="930" cy="-70" rx="420" ry="500" fill="url(#r)"></ellipse>
    <ellipse cx="950" cy="-20" rx="200" ry="260" transform="rotate(-9 950 -20)"></ellipse>
    <circle cx="860" cy="-20" r="14"></circle>
  </g>
  <use xlink:href="#g" transform="scale(-1 1)"></use>
</svg>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 全屏焦点图 h5弹窗动画 html5弹窗动画 全屏切换 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 图片全屏 h5图片动画 h5图标动画 html5图片动画 html5图标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到