首页 > 代码库 > 一次惨绝人寰的前端题
一次惨绝人寰的前端题
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> * { padding: 0px; margin: 0px; border: 0px; outline: none; } body { width: 100%; height: 100%; } .main { background: black; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: stretch; align-content: space-between; } .main>div { height: 100px; } /*1*/ .main1>.red { background: red; width: 33.333%; display: flex; align-items: center; justify-content: center; position: relative; } .main1>.red .green { width: 60px; height: 60px; background: green; } .main1>.red .blue { width: 40px; height: 40px; background: blue; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .main1>.green { background: green; width: 33.333%; } .main1>.blue { background: blue; width: 33.333%; display: flex; align-items: center; justify-content: center; position: relative; } .main1>.blue .green { width: 60px; height: 60px; background: green; } .main1>.blue .black { width: 40px; height: 40px; background: black; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .sb { animation: sbs 3s linear infinite; } @keyframes sbs { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } } </style> </head> <body> <div class="main main1"> <div class="red"> <div class="green sb"></div> <div class="blue"></div> </div> <div class="green"></div> <div class="blue"> <div class="green sb"></div> <div class="black"></div> </div> </div> </body></html>
一次惨绝人寰的前端题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。