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.实现原理 首先定义好一个重复实现效果的方法,然后定义光带出现速 ...
随机推荐
- 2016/2/21 JavaScript简介
1,javaScript 是什么? 是脚本语言,需要有宿主文件,它的宿主文件是HTML文件.2,它与Java什么关系? 没有什么直接的关系,Java是Sun公司(被Oracle收购了), netspa ...
- Cholesky分解 平方根法
一种矩阵运算方法,又叫Cholesky分解.所谓平方根法,就是利用对称正定矩阵的三角分解得到的求解对称正定方程组的一种有效方法.它是把一个对称正定的矩阵表示成一个下三角矩阵L和其转置的乘积的分解.它要 ...
- 关于Web API中使用ajax发送请求方式的问题
参见以下文章 http://www.west-wind.com/weblog/posts/2012/May/08/Passing-multiple-POST-parameters-to-Web-API ...
- bzoj4264
哈希 cf原题...没见过的话真想不出来 将邻接表排序哈希,判断是否相同,但是会漏掉两点相邻的情况,于是再把自己加入自己的邻接表,然后再哈希判断. #include<bits/stdc++.h& ...
- iptables的介绍
iptables介绍 iptables 1)iptables程序工作在内核的TCP/IP网络协议栈框架netfilter上,通过网络过滤可以实现入侵检测以及入侵防御功能,而不是单个协议当中. 2)ip ...
- 2019 第三届强网杯线上赛部分web复现
0x00前言 周末打了强网杯,队伍只做得出来6道签到题,web有三道我仔细研究了但是没有最终做出来,赛后有在群里看到其他师傅提供了writeup和环境复现的docker环境,于是跟着学习一波并记录下来 ...
- CSS布局大全
前几天面试,问我某布局感觉回答不是很OK所以研究了一下各种布局. 一.单列布局 1.普通布局(头部.内容.底部) <div class="container"> < ...
- $割点割顶tarjan$
原题 #include <bits/stdc++.h> using namespace std; typedef long long LL; inline LL read () { LL ...
- c语言小项目-使用mysql数据库的图书管理系统
VS2013通过MySQL方式连接到MySQL MySQL官网上C++的API有两个.一个是很成熟的mysql++,另一个是MySQL Connector/C++,近两年才出的,模仿JDBC做的,封装 ...
- hash+set Codeforces Round #291 (Div. 2) C. Watto and Mechanism
题目传送门 /* hash+set:首先把各个字符串的哈希值保存在set容器里,然后对于查询的每一个字符串的每一位进行枚举 用set的find函数查找是否存在替换后的字符串,理解后并不难.另外,我想用 ...