<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8">
????????<title></title>
????????<style>
????????????.container{
????????????????width:?400px;
????????????????height:?400px;
????????????????border:?5px?solid?#1E90FF;
????????????????border-radius:?10px?0?10px?0;
????????????????margin:?10px?auto;
????????????????position:?relative;
????????????}
????????????.btn-mask{
????????????????text-decoration:?none;
????????????????position:?absolute;
????????????????display:?block;
????????????????line-height:?40px;
????????????????left:?50px;
????????????????top:?50px;
????????????????width:?100px;
????????????????height:?40px;
????????????????text-align:?center;
????????????????background-color:?#EEEEEE;
????????????????color:?#333333;
????????????????overflow:?hidden;
????????????}
????????????.btn-mask:before{
????????????????transition:?top?0.2s?linear;
????????????????display:?block;
????????????????position:?absolute;
????????????????content:?"";
????????????????background-color:?rgba(0,0,0,0.1);
????????????????width:?100%;
????????????????height:?100%;
????????????????top:?-100%;
????????????}
????????????.btn-mask:hover:before{
????????????????top:?0;
????????????}
????????????/*第一個蒙層按鈕*/
????????????.btn-clip{
????????????????width:?94px;
????????????????height:?34px;
????????????????position:?absolute;
????????????????left:?50px;
????????????????top:?160px;
????????????????text-align:?center;
????????????????text-decoration:?none;
????????????????line-height:?34px;
????????????????
????????????}
????????????.btn-clip:before{
????????????????content:?"";
????????????????width:?94px;
????????????????height:?34px;
????????????????position:?absolute;
????????????????left:?0px;
????????????????top:?0px;
????????????????margin-left:?-3px;
????????????????margin-top:?-3px;
????????????????border:?3px?solid?#FF0000;
????????????????box-sizing:?border-box;
????????????????animation:?clip_rotate?1.5s?linear?infinite;
????????????}
????????????@keyframes?clip_rotate{
????????????????0%,100%{clip:?rect(0,100px,3px,0);}
????????????????25%{clip:?rect(0,100px,40px,97px);}
????????????????50%{clip:?rect(37px,100px,40px,0);}
????????????????75%{clip:?rect(0,3px,40px,0);}
????????????}
????????</style>
????</head>
????<body>
????????<div?class="container">
????????????<a?href="#"?class="btn-mask">發(fā)射</a><!--蒙層按鈕-->
????????????
????????????<a?href="#"?class="btn-clip">旋轉(zhuǎn)</a><!--clip動畫按鈕-->
????????????
????????</div>
????</body>
</html>
添加回答
舉報
0/150
提交
取消