找回密码
 立即注册

QQ登录

只需一步,快速开始

不知不觉已经深更半夜了,肉肉还在为网站的微调而发愁
肉肉带来一个即将用于本站注册及登入页面的Css3 按钮动态变色特效
首先我们在现有的CSS文件内加入必备的属性代码
代码如下:

@keyframes bBottom {
  50% {
    border-bottom: 1px solid #a6c1ee;
  }
}

@keyframes btnAnimate {
  50% {
    background-position: 200%;
  }
}   


然后我们再在按钮的DIV 的 class 对应CSS 内加入我们的颜色
我们自己使用的颜色如下:

background: linear-gradient(to right, #fbc2eb, #a6c1ee, #fbc2eb);


然后在 CSS新建一个 :hover  (:hover 是建立在我们这按钮的class下的)
具体代码如下:

/* 假设我们的按钮 class 为 .yuez 
那么我们新建的 :hover 就应该是如下*/

.yuez:hover{ animation: btnAnimate 1s infinite;}


没找到合适带GIF动图工具 就直接上传静态效果图了 以后会弄个动态效果图方便大家查看是否需要这个动态

20200819003732.png


分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 立即注册