来划我啊

<!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. 【bzoj3676】[Apio2014]回文串 —— 回文自动机的学习

    写题遇上一棘手的题,[Apio2014]回文串,一眼看过后缀数组+Manacher.然后就码码码...过是过了,然后看一下[Status],怎么慢这么多,不服..然后就搜了一下,发现一种新东西——回文 ...

  2. wxpc

  3. [DevExpress]DevExpress的安装与使用

    一.下载安装文件 依据自己的须要选择不同的版本号.下面为15.1 安装时选择自己须要的模块进行安装,之后进行激活,购买授权或者"其它方式". 二.安装完 在VSIDE工具栏会添加下 ...

  4. 解决vs2010无法找到System.Data.OracleClient的引用问题

    解决vs2010无法找到System.Data.OracleClient的引用问题 2012-2-19 09:12| 发布者: benben| 查看: 7627| 评论: 0   摘要: 在vs201 ...

  5. 6 WPF控件

    WPF控件分类: 内容控件 标题内容控件 文本控件 列表控件 基于范围的控件 日期控件 控件类 控件是与用户交互的元素.控件可以获得焦点,能接受键盘或鼠标的输入. 所有控件的基类是System.Win ...

  6. G. 铁路修复计划 最小生成树

    G. 铁路修复计划 二分答案,改变边的权值,找最小生成树即可. 类似的思想还可以用在单度限制最小生成树和最优比例生成树上. #include<iostream> #include<c ...

  7. 编译Ruby2.0 问题解决

    compiling readline.creadline.c: In function ‘Init_readline’:readline.c:1886:26: error: ‘Function’ un ...

  8. bzoj 1585: [Usaco2009 Mar]Earthquake Damage 2 地震伤害【最小割】

    枚举建图.jpg 一开始建的图挂了,于是枚举了几种建图方式-- 因为要删点,所以拆点,连接(i,i',1),对于原来图上的边(u,v),连接(u',v,inf),(v',u,inf),然后连接(s,i ...

  9. bzoj 1643: [Usaco2007 Oct]Bessie's Secret Pasture 贝茜的秘密草坪【枚举】

    4维枚举平方小于10000的数,相加等于n则ans++ #include<iostream> #include<cstdio> using namespace std; con ...

  10. 清北考前刷题da7下午好

    三向城 /* 原图一定是一棵完全二叉树. 根节点是x,左节点是x*2,右节点是x*2+1 转化为二进制往左右走就很明显了. */ #include<iostream> #include&l ...