纯CSS3完成电脑鼠标◎滑过按键动漫第二节

日期:2020-12-14 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

拥有以前的两章,小伙子伴们对按键飘浮动漫是不是又拥有新的了解呢?

前边两章关键是以情况下手,而此章关键是紧紧围绕外框动漫做实际效果。而且,此章节(按键组:趣味的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°,同时更改外框色调

border-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-dashoffset: 225;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-7 .text {
  position: relative;
  top: -35px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.btn-7:hover .outline{
  stroke-dasharray: 600 0;
  stroke-dashoffset: 475;
}

分析:

1、实例七,是一种全选的方法,svg

2、svg 原素叙述

<text> 原素用以界定文字

<rect> 界定为矩形框样子(圆形 <circle> 、椭圆 <ellipse> 、线 <line> 、折线 <polyline> 、多边合作形 <polygon> 、相对路径 <path>

3、svg 特性叙述

stroke 界定一根线,文字或原素轮廊色调

stroke-width 特性界定了一根线,文字或原素轮廊薄厚

stroke-dasharray 特性用于设定描边的点画线的图案设计现代性。便是设定实线和虚线的总宽。既有或是沒有直线的长短。

stroke-dashoffset 则特定了dash方式到相对路径刚开始的间距

实际,后边也出示专业章节目录叙述

小结

此章节(按键组:趣味的CSS按键动漫,陪你进到CSS全球)到此就完毕了,最先感谢大伙儿的适用。

根据此章节,小伙子伴们都学得了甚么?

1、观念,每一个小标题,实例全是从易至难,由浅入深;

2、CSS 伪类原素 :before:after 的应用

3、html原素的合理布局,原素水准竖直垂直居中

4、 transitionanimation 动漫,他们有哪些差别呢(想要知道回答的能看网编历史时间文章内容)?

5、CSS3 线形渐变色和轴向渐变色

6、相对性精准定位和肯定精准定位灵便应用

7、 transform 原素移动、形变、转动等

到此这篇有关纯CSS3完成电脑鼠标滑过按键动漫第二节的文章内容就详细介绍到这了,大量有关css3 电脑鼠标滑过按键动漫內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!