html5 css3鼠标滑过效果,纯CSS3鼠标滑过按钮流光效果

这是一款效果非常炫酷的纯CSS3鼠标滑过按钮流光效果。当用户用鼠标滑过按钮的时候，一道流光会瞬间滑过按钮，就像玻璃的反光效果，非常漂亮。

使用方法

HTML结构

该效果中的按钮是一个超链接元素。

Link

CSS样式

将超链接元素制作为块级元素或内联块级元素，为它设置相对定位方式。并为按钮设置一个宽度和高度，背景颜色和前景颜色。为了让流光在按钮之外看不见，必须设置一个overflow:hidden;属性。最后为按钮的过渡动画设置0.15秒的ease-in效果。

.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-in;

transition: all 0.15s ease-in;

}

流光使用按钮的:before伪元素来制作，它使用绝对定位，它是一个白色的矩形，开始时位于按钮之外，由于按钮设置了overflow:hidden;属性，所以开始时它是不可见的。然后通过skewX()函数将它倾斜25度，并设置0.25秒的ease-out过渡动画效果。

.button:before {

content: ' ';

position: absolute;

background: #fff;

width: 25px;

height: 50px;

top: 0;

left: -45px;

opacity: 0.3;

-webkit-transition: all 0.25s ease-out;

transition: all 0.25s ease-out;

-webkit-transform: skewX(-25deg);

transform: skewX(-25deg);

}

在鼠标滑过按钮时，按钮的背景颜色发生变化。同时修改:before伪元素的宽度和left属性，使流光滑过按钮。

.button:hover {

background: #26C281;

}

.button:hover:before {

width: 45px;

left: 205px;

}

html5 css3鼠标滑过效果,纯CSS3鼠标滑过按钮流光效果相关推荐

html 栏目切换幻灯片效果,很酷的切换效果纯CSS3幻灯片实现
很酷的切换效果纯CSS3幻灯片实现 11月 18, 2013 评论 (4) Sponsor CSS3实现给我们带来太多惊喜,FLASH能实现的动画,很多CSS3也可以实现,正如今天为大家展示的纯HT ...
小y的放松时刻-0003：按钮流光效果
小y的放松时刻-0003:按钮流光效果内容简介原链接效果展示代码内容简介这是小y学习css.js的记录和分享. 绝大部分内容将会是非原创,侵删. 原链接 https://blog.csdn ...
html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 实现的代码. html代码: 复制代码代码如下: css3代 ...
html5云朵效果,纯CSS3打造逼真的多层云彩动画特效
这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效.该特效使用多张透明的云彩PNG图片作为背景图片,使用CSS animation动画来制作云彩水平飘动的动画效果. 使用方法 HTML结构该多层 ...
html炫酷的导航栏效果,纯CSS3创意导航菜单特效
这是一款非常有创意的纯CSS3导航菜单特效.该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单.该特效由進擊的燊提供. 使用方法 HTML结构该导航菜单使用一 ...
html桌面卡牌效果,纯CSS3超酷文章卡片UI设计效果
这是一款使用纯CSS3制作的超酷文章卡片UI设计效果.该文章卡片带有阴影效果,当鼠标滑过卡片时,文章的描述信息会以滑动动画的方式显示在卡片中. 使用方法 HTML结构一张卡片的HTML结构如下: 文 ...
html纯css页面滑动效果,纯css3滑动按钮动画效果
android系统的滑动按钮相信大家都使用过.这款插件就是使用纯css3制作出类似android系统的滑动按钮效果. HTML html代码十分简单.使用一个大的div作为包裹容器,给它一个class ...
html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件.该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS tran ...
html百叶窗切换效果,纯CSS3百叶窗式切换轮播图特效
这是一款使用纯CSS3制作的百叶窗式切换轮播图特效.该特效使用背景图片来制作,在轮播图切换时,通过一组div元素来制作百叶窗效果,非常的炫酷. 使用方法 HTML结构该轮播图特效中使用了6张背景图片 ...

html5 css3鼠标滑过效果,纯CSS3鼠标滑过按钮流光效果

html5 css3鼠标滑过效果,纯CSS3鼠标滑过按钮流光效果相关推荐

最新文章

热门文章