• 欢迎访问夜影小窝网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入夜影小窝 QQ群
  • Git主题现已支持滚动公告栏功能,兼容其他浏览器,看到的就是咯,在后台最新消息那里用li标签添加即可。
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏夜影小窝吧

(收藏)炫酷鼠标hover按钮动画特效

闲言碎语 yyhouse 3个月前 (06-08) 1407次浏览 已收录 0个评论 扫描二维码
文章目录
[隐藏]

这是一款炫酷的鼠标hover按钮CSS3动画特效。该按钮CSS3动画特效包括10种鼠标hover效果。按钮动画的制作通过CSS3 transition和keyframes帧动画完成。转载来自jQuery之家点击查看展示效果

(收藏)炫酷鼠标hover按钮动画特效

使用方法

在页面中引入style.css文件。

<link href="此路径为您自己存放文件的路径/style.css" rel="stylesheet">

HTML结构

每一种按钮动画都有它们各自的HTML结构,第一种鼠标hover按钮线条动画中,按钮的HTML结构如下:

<div id="first" class="buttonBox">
    <button>Button</button>
    <div class="border"></div>
    <div class="border"></div>
</div>

CSS样式

button{
  width:200px;
  height:80px;
  position:relative;
  background:rgba(255, 255, 255, .27);
  text-transform:uppercase;
  color:white;
  font-weight:700;
  letter-spacing:1px;
  border:none;
  font-size:15px;
  outline:none;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}                   

在第一种鼠标hover按钮线条动画中,按钮的线条动画通过:nth-of-type选择器来选择用于制作线条的div元素,并在鼠标hover时修改它们的宽度和高度,形成线条动画的效果。

.border{
    position:absolute;
    background:none;
    transition:all .5s ease-in-out;
}
 
#first>.border:nth-of-type(1){
  top:0;
  left:0;
  border-left:1px solid white;
  border-top:1px solid white;
  width:30px;
  height:30px;
}
 
#first>.border:nth-of-type(2){
  bottom:0;
  right:0;
  border-right:1px solid white;
  border-bottom:1px solid white;
  width:30px;
  height:30px;
}
 
#first:hover .border{
  width:205px;
  height:85px;
}                    

其它鼠标hover按钮动画特效请下载参考源代码,下载链接如下:

(收藏)炫酷鼠标hover按钮动画特效此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“夜影小窝”,获取验证码。在微信里搜索“夜影小窝”或者“yeyhouse”或者微信扫描右侧二维码都可以关注本站微信公众号。


转载请注明:来源于【夜影小窝】。文章标题:(收藏)炫酷鼠标hover按钮动画特效,文章链接:https://www.yeyhome.com/575.html
喜欢 (0)
[327982852@qq.com]
分享 (0)
yyhouse
关于作者:
90后,从事弱电安防智能化工程,包含监控系统,楼宇对讲系统,LED系统,广播音箱系统,停车场系统,楼宇对讲系统喜欢分享捣鼓有趣的代码。。。
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
×
订阅图标按钮