来划我啊

<!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. openstack horizon 学习(1) 总览

    关于Horizon的设计理念: 来自官网(http://docs.openstack.org/developer/horizon/intro.html): Horizon holds several ...

  2. 在MAC端查看win7

    在MAC端查看win7,在finder中打开网络,输入win7地址,填入用户名和密码,就可以了

  3. [Codeforces Round511C] Enlarge GCD

    [题目链接] https://codeforces.com/contest/1047/problem/C [算法] 首先求出n个数的最大公约数g , 将每个数除以g , 那么 , 问题就转化为在n个数 ...

  4. flask request 获取json内容2种方式

    # -*- coding: utf-8 -*-from flask import request, jsonify, json, Moduleimport loggingfrom web.utils. ...

  5. libpcap 中调用ctime()时警告提示：

    warning: format ‘%s’ expects argument of type ‘char *’, but argument 2 has type ‘int’ [-Wformat=]    ...

  6. bzoj 1705: [Usaco2007 Nov]Telephone Wire 架设电话线【dp】

    i的初始化写成2了于是成功查错2h--怕不是个傻子 设f[i][j]为第i根高为j,转移是 \[ f[i][j]=min(f[i-1][k]+abs(k-j)*c+(j-h[i])^2)(j>= ...

  7. 洛谷P4158 [SCOI2009]粉刷匠

    传送门 设$dp[i][j][k][0/1]$表示在涂点$(i,j)$,涂了$k$次,当前点的颜色是否对,最多能刷对多少个格子 首先换行的时候肯定得多刷一次 然后是如果和前一个格子颜色相同,那么当前点 ...

  8. golang——database/sql包学习

    1.database/sql包 sql包提供了保证SQL或类SQL数据库的泛用接口. 使用sql包时必须注入(至少)一个数据库驱动. (1)获取mysql driver:go get -v githu ...

  9. react key的作用

    react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的. 简单来说,react利用key ...

  10. BFS POJ 2251 Dungeon Master

    题目传送门 /* BFS:这题很有意思,像是地下城,图是立体的,可以从上张图到下一张图的对应位置,那么也就是三维搜索,多了z坐标轴 */ #include <cstdio> #includ ...