手写的几个鼠标移上按钮的特效

<template><div class="btns"><button class="btn1">按钮一 <span class="mask mask1"></span></button><button class="btn2">按钮二 <span class="mask mask2"></span></button><button class="btn3">按钮三 <span class="mask mask3"></span></button><button class="btn4">按钮四 <span class="mask mask4"></span></button></div>
</template><script>
export default {};
</script><style scoped>
.btns {margin-top: 10%;text-align: center;
}
.btn1 {position: relative;border: 1px solid #2c6fad;padding: 10px 20px 10px 20px;border-radius: 10px;cursor: pointer;background-color: #2c6fad;color: #fff;
}
.btn2 {position: relative;border: 1px solid #2c6fad;padding: 10px 20px 10px 20px;border-radius: 10px;cursor: pointer;background-color: #2c6fad;color: #fff;
}
.btn3 {position: relative;border: 1px solid #2c6fad;padding: 10px 20px 10px 20px;border-radius: 10px;cursor: pointer;background-color: #2c6fad;color: #fff;
}
.btn4 {position: relative;border: 1px solid #2c6fad;padding: 10px 20px 10px 20px;border-radius: 10px;cursor: pointer;background-color: #2c6fad;color: #fff;
}
.mask {position: absolute;display: block; /* 可以设置span宽高 */height: 100%;background-color: #fff;opacity: 1;
}
.mask1 {top: 0;right: 0;
}
.mask2 {top: 0;left: 0;border-top-right-radius: 40px;
}
.mask3 {top: 50%;left: 50%;width: 0;height: 0;border-radius: 50%;
}
.mask4 {width: 100%;height: 0;left: 0;bottom: 0;
}
.btn1:hover .mask {animation-name: btn-animation-one;animation-duration: 0.5s;
}.btn2:hover .mask {animation-name: btn-animation-one;animation-duration: 0.5s;
}
.btn3:hover .mask {animation-name: btn-animation-two;animation-duration: 0.5s;
}
.btn4:hover .mask {animation-name: btn-animation-three;animation-duration: 0.5s;
}@keyframes btn-animation-one {from {width: 0;opacity: 1;}to {width: 100%;opacity: 0;}
}
@keyframes btn-animation-two {from {width: 1px;height: 1px;opacity: 1;transform: scale(0);}to {width: 1px;height: 1px;opacity: 0;transform: scale(100);}
}
@keyframes btn-animation-three {from {height: 0;opacity: 1;}to {height: 100%;opacity: 0;}
}
</style>

手写的几个鼠标移上按钮的特效相关推荐

css划上去变长,Css3如何实现鼠标移上变长特效？（图文+视频）
本篇文章主要给大家介绍用css3实现鼠标移入变长效果的方法. 在前端页面设计中,css的功能是异常强大的,只要运用好它,你能实现很多网站各种精彩的动态效果.那么在之前的文章中也给大家分享介绍了一些用c ...
Vue 框架-02-事件：点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({//注意代码格式//el:eleme ...
CSS图片阴影+鼠标移上图片放大、变形
在做图片卡片列表的时候我们经常用到图片的呼吸灯效果,实现图片的阴影效果.放大.动态展示代码: li img { display: block; width: 140px; height: 140px ...
现在出纳记账手写还是用计算机,出纳会计记账（银行存款日记账，现金帐）必须是用手写的吗？能否电脑上有什么软体直接电脑输入呢？...
出纳会计记账(银行存款日记账,现金帐)必须是用手写的吗?能否电脑上有什么软体直接电脑输入呢?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶 ...
鼠标悬浮鼠标移上移出事件时改变背景颜色
效果首先给一个 class="liStyle" <li class="liStyle" @mouseover="mouseover(index ...
js 隔行变色+鼠标移上换色+鼠标离开颜色恢复+鼠标点击弹出点击的是第几行是什么颜色
隔行变色: 先获取要操作的HTML标签 var oLis = document.querySelectorAll('li') 循环HTML标签 for (var i = 0; i < oLis. ...
手写数字识别之鼠标事件的利用
鼠标事件利用鼠标写出的数字也和手写数字有着粗细不匀的相同点,并且测试更简单,所以先试用鼠标事件对识别结果进行测试. static void on_Mouse(int event, int x, in ...
word手写字体以假乱真_学会Word上下标，搞定公式输入
点击"蓝字"关注我们在Word文档输入时,你是否会遇到需要插入上下标的文本呢,像这样,这样,这样的.我们在Word文档中的数学公式.化学符号等经常需要为文本设置上标.下标符号.W ...
lzma打包exe_【原创】手写PE文件，打造史上最小LZMA解压DLL
因程序需求,需要在VB中调用LZMA解压数据,经过N天研究出此成果- 什么是LZMA:LZMA应该是目前世界上数一数二的压缩算法--压缩时相同的时间得到压缩比最高,解压时速度极快且几乎不占内存.如果你 ...

手写的几个鼠标移上按钮的特效

手写的几个鼠标移上按钮的特效相关推荐

最新文章

热门文章