来划我啊

<!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. 20170623_oracle_优化与体系结构

    一般优化技巧 建议不用"*"代替所有列名 删除所有数据用TRUNCATE代替DELETE 用NOT EXISTS 代替NOT IN 用EXISTS代替IN 用EXISTS代替DIS ...

  2. Apache Ignite——集合分布式缓存、计算、存储的分布式框架

    Apache Ignite内存数据组织平台是一个高性能.集成化.混合式的企业级分布式架构解决方案,核心价值在于可以帮助我们实现分布式架构透明化,开发人员根本不知道分布式技术的存在,可以使分布式缓存.计 ...

  3. [loj6089]小Y的背包计数问题

    https://www.zybuluo.com/ysner/note/1285358 题面 小\(Y\)有一个大小为\(n\)的背包,并且小\(Y\)有\(n\)种物品. 对于第\(i\)种物品,共有 ...

  4. Eclipse 安装 Maven 插件的几种方法

    转自:https://blog.csdn.net/oqqHun123/article/details/79674994 昨天直接在机器上配置了Maven环境,今天顺便把Eclipse等IDE环境配置好 ...

  5. MvcPager 分页控件

    官方教程: http://www.webdiyer.com/mvcpager

  6. [ZJOI2006]GameZ游戏排名系统

    Description GameZ为他们最新推出的游戏开通了一个网站.世界各地的玩家都可以将自己的游戏得分上传到网站上.这样就可以看到自己在世界上的排名.得分越高,排名就越靠前.当两个玩家的名次相同时 ...

  7. KMP POJ 1961 Period

    题目传送门 /* 题意:求一个串重复出现(>1)的位置 KMP:这简直和POJ_2406没啥区别 */ /******************************************** ...

  8. hdu 4104 Discount

    http://acm.hdu.edu.cn/showproblem.php?pid=4104 一开始还以为这题是背包,然后优化下这个背包,但是一直都优化不出来. 然后题解是直接模拟而已,唉 先从小到大 ...

  9. nodejs安装node-rsa遇到的问题及解决

    nodejs第一次使用,故碰到一些小白问题: 1.使用 npm install node-rsa -S 2.封装rsa import NodeRSA from 'node-rsa'; const rs ...

  10. RabbitMQ二：AMQP协议

    参考这个:http://kb.cnblogs.com/page/73759/ 参考这个:http://www.cnblogs.com/charlesblc/p/6286875.html 写的挺好 Ra ...