千峰培训_前端_day01

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>幽灵按钮</title><style type="text/css">*{margin: 0;padding: 0;}/*选择器{属性：属性值}*/body{background-color: black;}#bigbox{width:900px;height: 300px;/*background: pink;*//*元素左右居中*/margin: 150px auto 0;}.minBox{width:300px;height: 100%;float: left;}.minBox span{display: block;/*span转换元素类型，变为盒子*/width: 100%;height: 250px;text-align: center;}.minBox span img{/*过渡动画*/transition: all 1s; margin-top:50px;}.minBox a{/*相对定位，根据自身位置进行定位，原有位置保留*//*给自身相对定位*/position: relative;display: block;width: 250px;height: 30px;/*边框：宽高 实线 白色*/border: 2px solid white;text-align: center;/*文本居中*/line-height: 30px;/*文本垂直居中*/color: green;font-size: 20px;font-weight:900;/*字体加粗*/text-decoration:none;/*清除下划线*/box-sizing: border-box;/*盒子模型，在宽高内计算边框*/margin: 0 auto;background: url(img/allow.png) no-repeat 200px center;/*不重复，y轴居中*/transition: all 1s;}.minBox span:hover img{/*允许对图片平移、旋转、缩放*/transform: rotate(360deg);}.minBox a:hover{background: url(img/allow.png) no-repeat 220px center;}.minBox a p{background: white;transition: all 1s;/*绝对定位,根据相邻有定位的父元素进行定位*/ /*如果相邻父元素没有定位，则根据body进行定位*/position: absolute;}.minBox a .p1{width:0;height: 2px;top:-2px;left: -100%;}.minBox a:hover .p1{width:100%;left:0;}.minBox a .p2{width: 2px;height: 0;top:-100%;right: -2px;}.minBox a:hover .p2{height: 100%;top:0%;}.minBox a .p3{width:0;height: 2px;bottom:-2px;right: -100%;}.minBox a:hover .p3{width:100%;right:0;}.minBox a .p4{width: 2px;height: 0;bottom:-100%;left: -2px;}.minBox a:hover .p4{height: 100%;bottom:0%;}</style></head><body><!--div为块级元素--><!--行内元素--><!--行内块元素--><div id="bigbox"><div class="minBox"><span><img src="img/mission.png" alt="text" /></span><a href="#">mission<p class="p1"></p><p class="p2"></p><p class="p3"></p><p class="p4"></p></a></div><div class="minBox"><span><img src="img/play.png" alt="text" /></span><a href="#">play<p class="p1"></p><p class="p2"></p><p class="p3"></p><p class="p4"></p></a></div><div class="minBox"><span><img src="img/touch.png" alt="text" /></span><a href="#">touch<p class="p1"></p><p class="p2"></p><p class="p3"></p><p class="p4"></p></a></div></div></body>
</html>

效果图

所需图片素材：

链接：https://pan.baidu.com/s/1JC_xKnWaamnj-718azQd3w
提取码：h5ti

千峰培训_前端_day01_幽灵按键相关推荐

千峰培训_前端_day02_明星相册
培训第二天,代码还不完善. HTML文件如下: <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
千峰培训_前端_day03_3d旋转相册
今天做了3个Web界面:c3动画.c3轮播.3d旋转相册.记录后两个. c3轮播代码如下: <!DOCTYPE html> <html><head><meta ...
千峰培训_前端_day04_js与斗鱼机器人
首先是0-100的猜数字游戏,代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
我在千峰培训的日子第十二–十三天------面向对象【继承】
我在千峰培训的日子第十二–十三天------面向对象[继承] 今日感悟人生最遗憾的莫过于放弃了不该放弃的,固执的坚持了不该坚持的. 老师知识点一.局部变量跟成员变量形参和实参形参:定义在方法中 ...
我在千峰培训的第九天---数组练习跟方法练习
文章目录我在千峰培训的第九天---数组练习跟方法练习今日感悟数组 1. 生活中数组模型 2. Java中定义数组的格式[重点] 3. Java中定义数组和操作 4. 数组内存分析图[重点,难点] ...
我在千峰培训的第十条和第十一天—面向对象
我在千峰培训的第十条和第十一天-面向对象今日总结 //今天没啥收获,就重新复习了下权限修饰符的作用范围 private : 当前类 defailt: 当前类,当前包 protected :当前类,当 ...
我在千峰培训的日子第八天--------数组
我在千峰培训的日子第八天今日总结今天学习了数组,然后发现就是知识点啥的都没有啥难的,难的是呢个解决老师出的呢个题的思考的逻辑条理性自我感悟 1.for 循环里面的定义的变量的作用域尽限于for循 ...
我在千峰培训的日子第五天
我在千峰培训的日子第五天今日纪实感觉可能是考虑到学员基础差,因为是半个月的200快试听,可能是怕学员听不懂所以才讲的比较慢吧,毕竟培训机构是以营利为目的,反正有一点浮夸我感觉,仅是自己的感觉思维 ...
我在千峰培训的日子第六天
我在千峰培训的日子第六天今日总结今天也没讲啥知识点,一天都在练习老师昨天讲的方法,然后他给讲了一下. 自我感悟 char 'b'; //会自动转变数据类型 c += 'b' - 'B'; //会报 ...

千峰培训_前端_day01_幽灵按键

千峰培训_前端_day01_幽灵按键相关推荐

最新文章

热门文章