拥有以前的两章，小伙子伴们对按键飘浮动漫是不是又拥有新的了解呢？
前边两章关键是以情况下手，而此章关键是紧紧围绕外框动漫做实际效果。而且，此章节（按键组:趣味的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、 transition 和 animation 动漫，他们有哪些差别呢（想要知道回答的能看网编历史时间文章内容）？
5、CSS3 线形渐变色和轴向渐变色
6、相对性精准定位和肯定精准定位灵便应用
7、 transform 原素移动、形变、转动等
Copyright © 2002-2020 网站建设_创建网站_免费建站平台_智能建站_企业建网站 版权所有 （网站地图） 粤ICP备10235580号