鼠标滑过按钮流光按钮 阅:41
  1. 改了评论列表和评论表单
  2. 把翻页改加载文章

记录一下流光按钮,演示如底部的加载文章按钮

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

<a class="button" href="#">加载更多</a>

将超链接元素制作为块级元素或内联块级元素,为它设置相对定位方式。并为按钮设置一个宽度和高度,背景颜色和前景颜色。为了让流光在按钮之外看不见,必须设置一个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;
}    

     
文章数

50篇

评论数

99

分类数

7

页面数

7

标签


typecho 笔记 主题 小说 功能 Eliauk 字体 故事 pjax ajax lazyload jsDelivr 自适应 分页样式 以德服人 郭德纲 相声 温柔文案 扁食 表情 相册 源码 美化 英语 流光按钮