选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

用SVG实现的图形鼠标经过特效

本次分享的HTML5代码是用SVG实现的图形鼠标经过特效,鼠标经过能产生弹性动画,让人眼前一亮的效果,总共实现了3种特效,每一种都很特别,而且很百搭,适用于各种电商网站或购物分享平台,里面有一些技术亮点,例如:SVG直接嵌入HTML。

在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中,本案例就是利用这特性实现的

把 SVG 直接嵌入 HTML 页面中的代码




  



SVG 的优势

与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

用SVG实现的图形鼠标经过特效

鼠标经过效果展示

实现的效果有3种,效果如下:

用SVG实现的图形鼠标经过特效

用SVG实现的图形鼠标经过特效

用SVG实现的图形鼠标经过特效

 

下载信息

格式: HTML+JS
文件大小: 157KB
下载地址:http://pan.baidu.com/s/1gd1eAhP

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。