首页 > 作文

纯CSS3实现鼠标滑过按钮动画第二节

更新时间:2023-04-03 19:25:18 阅读: 评论:0

有了之前的两章,小伙伴们对按钮悬浮动画是否又有了新的认识呢?

前面两章主要是从背景着手,而本章主要是围绕边框动画做效果。并且,本章节(按钮组:有趣的css按钮动画,带你进入css世界)也就到此结束了,本章结尾会对前3小节进行一定的总结。

下面继续本小节的主题,请先看一下效果示例:

看过前两小节的小伙伴,可能不需要看下面的源码,就知道如何实现了,大家可以先自己动手试试,然后再回头来看看。或许实现方式不一样,但只要能实现,都是好方法。

下面对示例讲解

示例一

<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);}

解析:

1、示例五,与示例四只有2点区别, :hover 时,使其伪类旋转180°,同时改变边框颜色

bo女人颂rder-color: #f13f84;transform: rotatey(180deg);

示例六

<button class="btn-6">  <span>按钮六</span></button><style>.../* 这里省略上方的公共样式 */.btn-6{  overflow: hidden;}.btn-6:before, .btn-6:after, .btn-6 span:before, .btn-6 span:after{  background: linear-gradient(to right, rgba(0,0,0,0), #f13f84);  transition: all 2s;}.btn-6:before, .btn-6:after{  width: 100%;  height: 1px;}.btn-6:before {  top: 0;  left: -100%;}.btn-6:after {  bottom: 0;  right: -100%;}.btn-6 span:before, .btn-6 span:after{  width: 1px;  height: 100%;}.btn-6 span:before {  bottom: -100%;  left: 0;}.btn-6 span:after {  top: -100%;  right: 0;}.btn-6:hover:before{  animation: topa 1s linear infinite;  animation-delay: .5s;}@keyframes topa{  100%{    left: 100%;  }}.btn-6:hover span:after{  animation: righta 1s linear infinite;  animation-delay: 1s;}@keyframes righta{  100%{    top: 100%;  }}.btn-6:hover:after{  animation: bottoma 1s linear infinite;  animation-delay: 1.5s;}@keyframes bottoma{  100%{    right: 100%;  }}.btn-6:hover span:before {  animation: lefta 1s linear infinite;  animation-delay: 2s;}@keyframes lefta{  100%{    bottom: 100%;  }}

解析:

1、示例六,可以说和示例三有一点点相似之处吧,升级版

2、也是通过四个伪类,分别分布在按钮的上右下左位置,上下的伪类高度是1px,宽是100%,左右的伪类宽度是1px,高是100%,同时设置背景为线性渐变 linear-gradient

3、 :hover 时,上方伪类从左边-100%的位置,向左边100%的位置运动;右边伪类从上方-100%的位置,向上方100%的位置运动;下发伪类从右边-100%的位置,向右边100%的位置运动;左边伪类从下方-100%的位置,向下方100%的位置运动。然后设置延时执行动画,即可。

需要注意的是延时执行动画(animation-delay)时间,一定要调整好,否则看起来就没有流畅,衔接会出现问题。

示例七

<button class="btn-7">  <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">    <rect class="outline" height="100%" width="100%" />    <div class="text">按钮七</div>  </svg></button><style>.../* 这里省略上方的公共样式 */.btn-7{  position: relative;  color: #f13f84;  text-decoration: none;  width: 250px;  height: 50px;  margin: 50px auto;  overflow: hidden;}.btn-7 .outline {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  stroke: #f13f84;  stroke-width: 2px;  fill: transparent;  stroke-dasharray: 100 500;  stroke-dashofft: 225;  transition: all .5s;  box-sizing: border-box;}.btn-7 .text {  position: rela金融女tive;  top: -35px;  line-height: 1;  letter-spacing: 1px;  text-transform: upperca;}.btn-7:hover .outline{  stroke-dasharray: 600 0;  stroke-dashofft: 475;}

解析:

1、示例七,是一种全选的方式,svg

2、svg 元素描述

<text> 元素用于定义文本

<rect> 定义为矩形形状(圆形 <circle> 、椭圆 <ellip> 、线 <line> 、折线 <polyline> 、多边形 <polygon> 、路径 <path>

3、svg 属性描述

stroke 定义一条线,文本或元素轮廓颜色

stroke-width 属性定义了一条线,文本或元素轮廓厚度

stroke-dasharray 属性用来设置描边的点划线的图案范式。就是设置实线和虚线的宽度。即有或者没有线段的长度。

stroke-dashofft 则指定了dash模式到路径开始的距离

具体,后面也提供专门章节讲述

总结

本章节(按钮组:有趣的css按钮动画,带你进入css世界)到此就结束了,首先谢谢大家的支持。

通过本章节,小伙伴们都学到了什么?

1、思想,每个小节,示例都是从易至难,循序渐进;

2、css 伪类元素 :before:after 的运用

3、html元素的布局,元素水平垂直居中

4、 transitionanimation 动画,它们有什么区别呢(想知道答案的可以看www.887551.com历史文章)?

5、css3 线性渐变和径向渐变

6、相对定位和绝对定位灵活运用

7、 transform 元素移动、变形、旋转等

到此这篇关于纯css3实现鼠标滑过按钮动画第二节的文章就介绍到这了,更多相关css3 鼠标滑过按钮动画内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!

本文发布于:2023-04-03 19:25:15,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/055eb70492bc121f6ab40478e27431c5.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:纯CSS3实现鼠标滑过按钮动画第二节.doc

本文 PDF 下载地址:纯CSS3实现鼠标滑过按钮动画第二节.pdf

标签:示例   按钮   位置   动画
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图