按钮飞线

来源：互联网发布：手机淘宝怎么撤销投诉编辑：程序博客网时间：2024/05/20 21:18

暑假实验室学习的一个小知识，幽灵按钮

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>线条移动</title></head><style>    .contain{    margin: 100px 0 0 200px;    height: 500px;    width: 500px;    border: 2px solid #000;      background-color: antiquewhite;       position: relative;        }    .contain:hover ._right{width: 50px; right: 0px;}    .contain:hover ._bottom{height: 50px; bottom: 0px;}    .contain:hover ._left{width: 50px; left: 0px;}    .contain:hover ._top{height: 50px; top: 0px;}        .contain span{position: absolute; background: #000; transition:all 0.6s}    .contain ._top{top:152px; left: 352px;height: 0; width: 2px;}    .contain ._bottom{bottom: 152px; right: 348px; height: 0; width: 2px;}    .contain ._left{top: 150px; left: 160px; width: 0; height: 2px;}    .contain ._right{bottom: 146px; right: 160px;  width: 0; height: 2px;}        .contain img{    border: 2px solid #000;    margin: 150px;    }</style><body> <div class="contain"><span class="_top"></span><span class="_right"></span><span class="_bottom"></span><span class="_left"></span><img src="img/2.jpg/" alt="1"></div></body></html>

0 0