每日css 旧城等待, 2023-06-23 14:21 6阅读 0赞 ![在这里插入图片描述][20191219185704112.png] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; padding: 0; list-style: none; background: #06bae7; } *{ margin: 0; padding: 0; list-style: none; box-sizing: border-box; } .tbody{ width: 1000px; height: 90vh; margin: 0 auto; margin-top: 10px; } .tm{ width: 200px; height: 320px; position: relative; } .tm img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .line-top{ width: 98%; height: 1%; background-color: white; position: absolute; right: 1%; top:0; display: block; transition: all .6s linear; transition-delay: 1.8s; } .tm:hover .line-top{ width: 0; transition-delay: 0s; } .line-right{ width: 1%; height: 98%; background-color: white; position: absolute; right: 0; bottom:1%; display: block; transition: all .6s linear; transition-delay: 1.2s; transform-origin: top center; } .tm:hover .line-right{ height: 0; transition-delay: 0.6s; } .line-bottom{ width: 98%; height: 1%; background-color: white; position: absolute; left: 1%; bottom:0; display: block; transition: all .6s linear; transition-delay: 0.6s; } .tm:hover .line-bottom{ width: 0; transition-delay: 1.2s; } .line-left{ width: 1%; height: 98%; background-color: white; position: absolute; left: 1%; top:1%; display: block; transition: all .6s linear; transition-delay: 0s; } .tm:hover .line-left{ height: 0; transition-delay: 1.8s; } </style> </head> <body> <div class="tbody"> <div class="tm"> <img src="http://phpdiansang.top/img/fj1.jpg" /> <span class="line-top"> </span> <span class="line-right"></span> <span class="line-bottom"></span> <span class="line-left"></span> </div> </div> </body> </html> [20191219185704112.png]: https://img-blog.csdnimg.cn/20191219185704112.png
相关 每日css ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub 爱被打了一巴掌/ 2023年06月24日 14:26/ 0 赞/ 12 阅读
相关 每日css ![在这里插入图片描述][20191219185704112.png] <!DOCTYPE html> <html lang="en"> <head> 旧城等待,/ 2023年06月23日 14:21/ 0 赞/ 7 阅读
相关 每日css ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub 朱雀/ 2023年06月18日 06:00/ 0 赞/ 26 阅读
相关 每日css ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub Dear 丶/ 2023年06月17日 13:58/ 0 赞/ 7 阅读
相关 每日css ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub ╰+攻爆jí腚メ/ 2023年06月17日 11:52/ 0 赞/ 11 阅读
相关 【LeetCode-每日一题】-739-每日温度 1. 题目描述 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG 梦里梦外;/ 2023年02月20日 02:15/ 0 赞/ 47 阅读
相关 JS每日一题:如何理解CSS中BFC? 20190416期 如何理解CSS中BFC? > 定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一 我就是我/ 2023年02月13日 08:16/ 0 赞/ 39 阅读
相关 每日反思 从事任何方向的技术研究,不知道该干什么的时候,就问自己四个问题: •这个方向上最新进展是什么? 都知道吗? •这个方向上最著名的专家有哪些?他们的研究都看过吗? • ゝ一世哀愁。/ 2022年07月13日 03:39/ 0 赞/ 216 阅读
相关 每日总结 生命的力量源自于知识,学习使人进步,骄傲使人落后。 富有臂力的人只能战胜一人;富有知识的人却所向无敌。——苏联 -------------------- 2018-0 清疚/ 2022年05月28日 04:16/ 0 赞/ 271 阅读
还没有评论,来说两句吧...