来划我啊

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .button {

                 display: block;

                 position: relative;

                 background:#00B16A;

                 color: #fff;

                 width: 160px;

                 height: 50px;

                 line-height: 50px;

                 text-align: center;

                 font-family: 'Ubuntu', sans-serif;

                 font-size: 15px;

                 font-weight: bold;

                 text-decoration: none;

                 margin: 50px auto 0;

                 border-radius: 2px;

                 overflow: hidden;

                 -webkit-transition: all 0.15s ease-out;

                 transition: all 0.15s ease-out;

                }

                .button:before {

                     content: ' ';

                     position: absolute;

                     background: #fff;

                     width: 25px;

                     height: 50px;

                     top: 0;

                     left: -45px;

                     opacity: 0.3;

                     -webkit-transition: all 0.6s ease-out;

                     transition: all 0.6s ease-out;

                     -webkit-transform: skewX(-25deg);

                             transform: skewX(-25deg);

                }

                .button:hover {

                     background: #26C281;

                }

                .button:hover:before {

                     width: 45px;

                     left: 205px;

                }

        </style>

    </head>

    <body>

        <a class="button" href="#">来划我啊</a>

    </body>

</html>

css 实现鼠标滑过流光效果的更多相关文章

  1. CSS控制鼠标滑过时的效果

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...

  2. css实现鼠标悬浮字体流光背景模糊效果

    原文地址:→看过来 写在前面 有的时候感觉写点小玩意儿挺开心的,还能实践很多的小知识点,所以这次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额. 效果图 源码地址→传送门 预览地址→传送门 小知识 ...

  3. HTML+CSS实现鼠标点上去动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. css实现鼠标滑过出现从中间向两边扩散的下划线

    这个效果一开始我是在华为商城页面上看到的,刚开始还以为挺复杂,实现的时候还有点没头绪.不过,还好有百度,借此记录一下我在导航条上应用的实现方法. 主要是借助了伪元素,代码如下: <div cla ...

  5. CSS控制当鼠标滑过时更换图片的效果

    鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

  6. CSS实例：鼠标滑过超级链接文字时改变背景颜色

    先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...

  7. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  8. 基于CSS3鼠标滑过放大突出效果

    还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...

  9. [JQuery代码]超酷鼠标滑过背景高亮效果

    1.效果及功能说明 鼠标滑过悬停特效,div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示,产品标题滑动显示或隐藏 2.实现原理 首先定义好一个重复实现效果的方法,然后定义光带出现速 ...

随机推荐

  1. TQ210--UBOOT移植笔记--添加自己的单板【学习笔记】

    在uboot的源码的根目录下的readme中有介绍如何在uboot中添加自己的单板: 一.在boards.cfg中添加自己的单板的信息,可以模仿smdkc100去添加自己的单板的信息 二.复制单板的配 ...

  2. ZOJ 1414:Number Steps

    Number Steps Time Limit: 2 Seconds      Memory Limit: 65536 KB Starting from point (0,0) on a plane, ...

  3. [ZJOI 2007] 矩阵游戏

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1059 [算法] 二分图最大匹配 时间复杂度 : O(N^3) [代码] #inclu ...

  4. json返序列化

    ASP.NET中JSON的序列化和反序列化 http://www.cnblogs.com/zhaozhan/archive/2011/01/09/1931340.html 迟来的Json反序列化 ht ...

  5. 在Android.mk文件中输出打印消息 （转载）

    转自:http://blog.csdn.net/xiaibiancheng/article/details/8479694 在进行Android NDK的开发当中有时想看看Android.mk文件当中 ...

  6. bzoj 1669: [Usaco2006 Oct]Hungry Cows饥饿的奶牛【dp+树状数组+hash】

    最长上升子序列.虽然数据可以直接n方但是另写了个nlogn的 转移:f[i]=max(f[j]+1)(a[j]<a[i]) O(n^2) #include<iostream> #in ...

  7. 【工具】---- json-server基本使用

    一.概念 在开发过程中,前端通常需要等待后端开发完接口后,再调用接口渲染相应的数据,这会影响开发效率.而json-server的作用就是为了解决前后端并行开发的痛点,在本地模拟后端接口用来测试前端效果 ...

  8. 贪心/思维题 UVA 11292 The Dragon of Loowater

    题目传送门 /* 题意:n个头,m个士兵,问能否砍掉n个头 贪心/思维题:两个数组升序排序,用最弱的士兵砍掉当前的头 */ #include <cstdio> #include <c ...

  9. Ajax动态加载数据

    前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) ...

  10. EasyUI系列学习(十一)-Accordion(分类)

    一.加载 1.class加载 <div class="easyui-accordion" style="width:300px;height:200px" ...