简单的纯CSS3图片和HTML元素发光特效

当前位置:主页 > CSS3库 > CSS3动画 > 简单的纯CSS3图片和HTML元素发光特效
简单的纯CSS3图片和HTML元素发光特效
分享:

    插件介绍

    这是一款简单的纯CSS3图片和HTML元素发光特效。该特效可以在鼠标滑过PNG图片或HTML元素时,使它们产生漂亮的发光效果。应用范围可以是div盒子,文字,png图片,按钮和输入框等。

    浏览器兼容性

    浏览器兼容性
    时间:2017-02-24
    阅读:
麦子学院
简要教程

这是一款简单的纯CSS3图片和HTML元素发光特效。该特效可以在鼠标滑过PNG图片或HTML元素时,使它们产生漂亮的发光效果。应用范围可以是div盒子,文字,png图片,按钮和输入框等。

使用方法

在页面中引入glowing.css文件。

<script src="path/to/glowing.css"></script>
                
HTML结构

在你需要使用发光效果的元素上添加glowing class类,然后选择一种颜色,例如:

<img src="img/facebook.png" class="glowing darkblue"/>
                

可用的颜色class有:

  • red
  • orange
  • yellow
  • green
  • cyan
  • lightblue
  • blue
  • darkblue
  • indigo
  • purple
  • magenta
  • pink

另外,glowing.css还提供了下面几个class类来增强动画效果。

  • and;链接符,必须写。
  • quickly:加快动画速度。
  • rotating:旋转效果。
  • zooming:缩放效果。
  • disco:迪斯科效果。

glowing.css发光特效的github地址为:https://github.com/topex-psy/Glowing.css

网友评论