来划我啊

<!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. ramfs、rootfs和initramfs【转】

    ramfs, rootfs and initramfs October 17, 2005 Rob Landley <rob@landley.net> =================== ...

  2. 【HDU2037】今年暑假不AC

    http://acm.hdu.edu.cn/showproblem.php?pid=2037 “今年暑假不AC?”“是的.”“那你干什么呢?”“看世界杯呀,笨蛋!”“@#$%^&*%...” ...

  3. 怎么样关掉红米note开发者选项

    进 系统设置\应用 ,找到“设置”点进去,清一下数据,再打开“设置”查看,就没有“开发者选项”了

  4. Java中wait和sleep方法的区别

    1.两者的区别 这两个方法来自不同的类分别是Thread和Object 最主要是sleep方法没有释放锁,而wait方法释放了锁,使得其他线程可以使用同步控制块或者方法(锁代码块和方法锁). wait ...

  5. Eclipse使用Tomcat发布项目时出现YadisException异常解决方案

    调整使用Eclipse的JDK版本,大概JDK版本过低会出现这个org.openid4java.discovery.yadis.YadisException: 0x704: I/O transport ...

  6. P3222 [HNOI2012]射箭

    传送门 黄学长的代码好清楚啊--大概搞明白半平面交是个什么玩意儿了-- 设抛物线 \[y=ax^2+bx\] 则 \[y1<=ax1^2+bx1<=y2\] \[ax1^2+bx1> ...

  7. 基于ASP.Net Core开发一套通用后台框架记录-(总述)

    写在前面 本系列博客是本人在学习的过程中搭建学习的记录,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 前期我不会公开源码,我想是一点点敲代码,不然复制.粘贴那就没意思了. ...

  8. spring cloud config搭建说明例子（四）-补充配置文件

    服务端 ConfigServer pom.xml <dependency> <groupId>org.springframework.cloud</groupId> ...

  9. Asp.NET 知识点总结（一）

    1.简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有类,私有成员, 在类的内部才可以访问. protected : ...

  10. [BZOJ3224/Tyvj1728]普通平衡树

    本篇博客有详细题解,浅谈算法--splay