css 实现鼠标滑过流光效果
<!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 实现鼠标滑过流光效果的更多相关文章
- CSS控制鼠标滑过时的效果
用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...
- css实现鼠标悬浮字体流光背景模糊效果
原文地址:→看过来 写在前面 有的时候感觉写点小玩意儿挺开心的,还能实践很多的小知识点,所以这次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额. 效果图 源码地址→传送门 预览地址→传送门 小知识 ...
- HTML+CSS实现鼠标点上去动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css实现鼠标滑过出现从中间向两边扩散的下划线
这个效果一开始我是在华为商城页面上看到的,刚开始还以为挺复杂,实现的时候还有点没头绪.不过,还好有百度,借此记录一下我在导航条上应用的实现方法. 主要是借助了伪元素,代码如下: <div cla ...
- CSS控制当鼠标滑过时更换图片的效果
鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- CSS实例：鼠标滑过超级链接文字时改变背景颜色
先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...
- 不可思议的纯 CSS 实现鼠标跟随效果
直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...
- 基于CSS3鼠标滑过放大突出效果
还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...
- [JQuery代码]超酷鼠标滑过背景高亮效果
1.效果及功能说明 鼠标滑过悬停特效,div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示,产品标题滑动显示或隐藏 2.实现原理 首先定义好一个重复实现效果的方法,然后定义光带出现速 ...
随机推荐
- Codeforces Round #322 (Div. 2) D. Three Logos 模拟
D. Three Logos Three companies decided to order a ...
- Google's Hybrid Approach to Research
文档地址:戳我 总结: (i) aims to generate scientific and engineering advances in fields of import to Google, ...
- Robot Framework快捷键图标制作 去掉cmd命令窗口
安装好Robot Framework之后,通过 C:\Python27\Scripts\ride.py 启动时会带上一个命令行窗口: 怎样让启动的界面后面不带这个命令行窗口,且图片以机器人显示? 方法 ...
- Android6.0源码分析之录音功能（一）【转】
本文转载自:http://blog.csdn.net/zrf1335348191/article/details/54949549 从现在开始一周时间研究录音,下周出来一个完整的博客,监督,激励!!! ...
- SQL SERVER 安装软件 及导入项目流程
1.安装sqlsever2000及以上 数据库 (在百度上找安装文档) 创建账户 密码 2.解压SQL2000-KB884525-SP4-x86-CHS.EXE补丁 之后安装补丁 ,在安装补丁是会用到 ...
- luogu3941入阵曲
https://www.zybuluo.com/ysner/note/1301562 题面 统计在给出的\(n*m\)矩阵中,有多少个不同的子矩形中的数字之和是\(k\)的倍数? 解析 切不掉这道题是 ...
- gitweb
1. 简介 Gitweb提供了git版本库的图形化web浏览功能.可以到网站http://git.kernel.org/体验下效果,如下图所示. Gitweb界面 它既可以通过配置架设于web服务器上 ...
- Java IO 字节流与字符流 （五）
Java的IO流分为字符流(Reader,Writer)和字节流(InputStream,OutputStream),字节流顾名思义字节流就是将文件的内容读取到字节数组,然后再输出到另一个文件中.而字 ...
- CentOS查看CPU、内存、网络流量和磁盘 I/O【详细】
安装 yum install -y sysstat sar -d 1 1 rrqm/s: 每秒进行 merge 的读操作数目.即 delta(rmerge)/swrqm/s: 每秒进行 merge 的 ...
- IDEA中 Spark 读Hbase 报错处理：
SLF4J: Actual binding is of type [org.slf4j.impl.Log4jLoggerFactory] // :: ERROR RecoverableZooKeepe ...