CSS3怎样做鼠标经过有按钮动画的效果？
发布时间：2021-12-31 21:51:20 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享一个CSS3实现钮动画的效果的示例，实现效果是鼠标经过有按钮动画的效果。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。 下面对示例讲解 示例一 button class=btn-1按钮
|
这篇文章给大家分享一个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); } （编辑：温州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
