HTML5 幽灵按钮-白红宇

HTML5 幽灵按钮

阅读量：6969 次

发布时间：2019-06-27

本文共 3990 字，大约阅读时间需要 13 分钟。

补充一点知识点：css 通过hover控制其他元素样式：

<html>

<body>

<style>

#a:hover {color : #FFFF00;}

#a:hover > #b:first-child{color : #FF0000;}

#a:hover > #b{color : #FF00FF;}

#a:hover + #c{color : #00FF00;}

#a:hover + #c > #b{color : #0000FF;}

</style>

<div id='a'>元素1

</div>

<div id='c'>元素3

</div>

</body>

</html>

其他知识点都是前面学过的，直接附上代码：

HTML：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

CSS：

margin: 0;

padding: 0;

}

.outbox{

width: 960px;

height: 500px;

margin: 50px auto;

background: lightslategray;

}

.box{

margin: 0 50px;

width: 220px;

height: 400px;

float: left;

font-family: "微软雅黑";

font-size: 18px;

font-weight: bolder;

color: lightsteelblue;

line-height: 50px;

}

.box:active{

animation: box 1s;

animation-fill-mode: forwards;

}

@keyframes box{

from{transform: rotate(0deg) scale(1);}

to{transform: rotate(360deg) scale(1.2);}

}

.box > .button{

margin: 20px auto;

padding-left: 20px;

width: 150px;

height: 50px;

border: 2px solid rgba(255,255,255,0.5);

position: relative;

transition: all .2s ease;

}

.button:hover{

border: 2px solid #fff;

color: white;

}

.box .icon-arrow-right2{

margin-left: 50px;

}

.button:hover > .icon-arrow-right2{

margin-left: 60px;

}

.box > .icon{

margin: 50px auto;

display: block;

width: 200px;

height: 200px;

text-align: center;

font-size: 150px;

color: #FFF;

transition: all .2s;

}

.box > .icon-html-five2:hover{animation: iconfive .7s 3 linear;animation-fill-mode: forwards;}

@keyframes iconfive{

0%{transform: scale(1) rotate(0deg);}

25%{transform: scale(1.2) rotate(45deg);}

50%{transform: scale(1.2) rotate(0deg);}

75%{transform: scale(1.2) rotate(-45deg);}

100%{transform: scale(1) rotate(0deg);}

}

.box > .icon-power:hover{animation: iconpower .17s 4;animation-fill-mode: forwards;}

@keyframes iconpower{

from{transform: scale(1) translateY(0px);}

to{transform: scale(1.2) translateY(50px);}

}

.box > .icon-compass:hover{animation: iconcompass 1s 1;animation-fill-mode: forwards;}

@keyframes iconcompass{

from{transform: scale(1) translateY(0px) translateX(0px) rotate(0deg);}

to{transform: scale(0.5) translateY(-100px) translateX(100px) rotate(720deg);}

}

.box > .button > .line{

display: block;

background: white;

position: absolute;

transition: all .2s ease;

}

.box > .button > .line-top{

width: 0px;

height: 2px;

top: -2px;

left: -100%;

}

.box > .button > .line-bottom{

width: 0px;

height: 2px;

bottom: -2px;

right: -100%;

}

.box > .button > .line-left{

width: 2px;

height: 0px;

left: -2px;

bottom: -100%;

}

.box > .button > .line-right{

width: 2px;

height: 0px;

right: -2px;

top: -100%;

}

.button:hover > .line-top{

width: 174px;

left: -2px;

}

.button:hover > .line-bottom{

width: 174px;

right: -2px;

}

.button:hover > .line-left{

height: 54px;

bottom: -2px;

}

.button:hover > .line-right{

height: 54px;

top: -2px;

}

效果图：

转载于:https://www.cnblogs.com/lexin593119348/p/6838452.html

你可能感兴趣的文章

让Spring Controller 的方法基本数据类型参数支持Bean Validation

查看>>

mybatis.xml(理解的相对局限)

查看>>

详解VirtualBox虚拟机的四种网络设置

查看>>

关于学习区块链的推荐内容

查看>>

【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲

RaspberryPi学习之SD卡文件修改及备份

Python os/shutil/path 模块

查看>>

python学习笔记操作mongodb（九）

查看>>

[转]在A*寻路中使用二叉堆

查看>>

【Cloud Foundry 应用开发大赛】“17轻松”文章采集应用