加入收藏 | 设为首页 | 会员中心 | 我要投稿 我爱制作网_沈阳站长网 （https://www.024zz.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

CSS3怎样做鼠标经过有按钮动画的效果？

发布时间：2022-11-18 10:56:57 所属栏目：语言 来源：
导读：　　 这篇文章给大家分享一个CSS3实现钮动画的效果的示例，实现效果是鼠标经过有按钮动画的效果。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。
　　 这篇文章给大家分享一个CSS3实现钮动画的效果的示例，实现效果是鼠标经过有按钮动画的效果。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。
　 
　　下面对示例讲解
　　
　　示例一
　　
　　<button class="btn-1">按钮一</button>
　　
　　<style>
　　button{
　　  position: relative;
　　  width: 100px;
　　  height: 40px;
　　  background: none;
　　  cursor: pointer;
　　  color: #fff;
　　  border: none;
　　  margin-right: 20px;
　　  margin-bottom: 20px;
　　}
　　button:before,
　　button:after{
　　  position: absolute;
　　  content: '';
　　  width: 100%;
　　  height: 100%;
　　  z-index: 10;
　　  transition: all .5s;
　　}
　　/* 按钮一 */
　　.btn-1:before, .btn-1:after{
　　  height: 2px;
　　  left: 50%;
　　  width: 0;
　　  background: #f13f84;
　　  transform: translateX(-50%);
　　}
　　.btn-1:before{
　　  top: 0;
　　}
　　.btn-1:after{
　　  bottom: 0;
　　}
　　.btn-1:hover:before,
　　.btn-1:hover:after{
　　  width: 100%;
　　}
　　</style>
　　
　　
　　解析：
　　
　　1、 :before top为0， :after bottom为0，高度 height: 2px ，而宽度为0，并且水平居中
　　
　　2、在绝对定位的作用下， :hover 改变 :before 、 :after 的宽度，即可形成上图效果
　　
　　示例二
　　
　　<button class="btn-2">按钮二</button>
　　
　　<style>
　　...
　　/* 这里省略上方的公共样式 */
　　.btn-2{
　　  background: #333;
　　  height: 36px;
　　}
　　.btn-2:before,
　　.btn-2:after{
　　  width: 10px;
　　  height: 10px;
　　  background: #f13f84;
　　  mix-blend-mode: hue;
　　}
　　.btn-2:before {
　　  left: -2px;
　　  top: -2px;
　　}
　　.btn-2:after {
　　  right: -2px;
　　  bottom: -2px;
　　}
　　.btn-2:hover:before,
　　.btn-2:hover:after{
　　  height: calc(100% + 4px);
　　  width: calc(100% + 4px);
　　}
　　</style>
　　
　　
　　解析：
　　
　　1、 :before 、 :after ，超出button 2px
　　
　　2、 :hover 时改变 :before 、 :after 宽高，这里宽高用到了 calc()
　　
　　calc() 函数用于动态计算长度值。
　　
　　● 需要注意的是，运算符前后都需要保留一个空格，例如： width: calc(100% - 10px) ；
　　
　　● 任何长度值都可以使用 calc() 函数进行计算；
　　
　　● calc() 函数支持 "+", "-", "*", "/" 运算；
　　
　　● calc() 函数使用标准的数学运算优先级规则；
　　
　　3、大家应该都留意到了上图中，特意操作了一个属性 mix-blend-mode ，它在这里的作用让button的背景显示出来覆盖在 :before 、 :after 背景色的上方。
　　
　　css3 mix-blend-mode 语法
　　
　　mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
　　
　　hue 色相模式 “色相”模式只用“混合色”颜色的色相值进行着色，而使饱和度和亮度值保持不变。
　　
　　这里就不具体讲述 mix-blend-mode ，希望后面能用一章来专门讲解。
　　
　　示例三
　　
　　<button class="btn-3">
　　  <span>按钮三</span>
　　</button>
　　
　　<style>
　　...
　　/* 这里省略上方的公共样式 */
　　button span:before,
　　button span:after{
　　  position: absolute;
　　  content: '';
　　  width: 100%;
　　  height: 100%;
　　  z-index: 10;
　　  transition: all .5s;
　　}
　　.btn-3{
　　  background: #333;
　　  height: 36px;
　　}
　　.btn-3:before,
　　.btn-3:after,
　　.btn-3 span:before,
　　.btn-3 span:after{
　　  width: 10px;
　　  height: 10px;
　　  background: #f13f84;
　　  mix-blend-mode: hue;
　　}
　　.btn-3:before {
　　  left: -2px;
　　  top: -2px;
　　}
　　.btn-3:after {
　　  right: -2px;
　　  top: -2px;
　　}
　　.btn-3 span:before {
　　  left: -2px;
　　  bottom: -2px;
　　}
　　.btn-3 span:after {
　　  right: -2px;
　　  bottom: -2px;
　　}
　　.btn-3:hover:before,
　　.btn-3:hover:after,
　　.btn-3:hover span:before,
　　.btn-3:hover span:after {
　　  height: 60%;
　　  width: 60%;
　　}
　　
　　
　　解析：
　　
　　1、示例三就是示例二的升级版，用span的伪类来完善按钮的四只角
　　
　　2、 :hover 时改变四个伪类的宽高即可。
　　
　　示例四
　　
　　<button class="btn-4">按钮四</button>
　　
　　<style>
　　...
　　/* 这里省略上方的公共样式 */
　　.btn-4{
　　  height: 34px;
　　  border: 1px solid #f13f84;
　　}
　　.btn-4:before,
　　.btn-4:after{
　　  width: 10px;
　　  height: 10px;
　　  border-style: solid;
　　  border-color: #f13f84;
　　}
　　.btn-4:before {
　　  left: -4px;
　　  top: -4px;
　　  border-width: 1px 0 0 1px;
　　}
　　.btn-4:after {
　　  right: -4px;
　　  bottom: -4px;
　　  border-width: 0 1px 1px 0;
　　}
　　.btn-4:hover:before,
　　.btn-4:hover:after{
　　  height: calc(100% + 7px);
　　  width: calc(100% + 7px);
　　}
　　
　　解析：
　　
　　1、示例四是示例二的另外一种实现方式，不过区别是按钮加了一个边框
　　
　　2、 :before 、 :after 直接设置 border ，而不是用 background 来展示对角样式。
　　
　　width: 10px;
　　height: 10px;
　　border-style: solid;
　　border-color: #f13f84;
　　border-width: 1px 0 0 1px;
　　3、然后 :hover 时改变伪类宽高，即可
　　
　　示例五
　　
　　<button class="btn-5">按钮五</button>
　　
　　<style>
　　...
　　/* 这里省略上方的公共样式 */
　　.btn-5{
　　  background: #333;
　　  height: 34px;
　　  border: 1px solid #fff;
　　}
　　.btn-5:before,
　　.btn-5:after{
　　  width: 10px;
　　  height: 10px;
　　  border-style: solid;
　　  border-color: #fff;
　　}
　　.btn-5:before {
　　  left: -4px;
　　  top: -4px;
　　  border-width: 1px 0 0 1px;
　　}
　　.btn-5:after {
　　  right: -4px;
　　  bottom: -4px;
　　  border-width: 0 1px 1px 0;
　　}
　　.btn-5:hover{
　　  border-color: #f13f84;
　　}
　　.btn-5:hover:before,
　　.btn-5:hover:after{
　　  height: calc(100% + 7px);
　　  width: calc(100% + 7px);
　　  border-color: #f13f84;
　　  transform: rotateY(180deg);
　　}
 

（编辑：我爱制作网_沈阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
      站长推荐
      热点阅读

      【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

      建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

      Copygight © 2016-2022 https://www.024zz.cn/ All Rights Reserved. 我爱制作网_沈阳站长网

      ICP备案：浙ICP备16034787号 浙公网安备 33038102330576号