前端通过CSS伪类实现腾讯游戏logo
摘要： 前端开发详细流程 web前端模块化开发流程 web前端混合开发流程 看到有人用css伪类做箭头，自己尝试一下用这个原理做了一个腾讯游戏的logo 代码片段 1 <!DOCTYPE html> <html> <h……
| 前端开发详细流程 |
| web前端模块化开发流程 |
| web前端混合开发流程 |
看到有人用css伪类做箭头，自己尝试一下用这个原理做了一个腾讯游戏的logo
代码片段 1
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style>
body {
background: #fff;
}
#logo {
background-color: #51535d;
border: 1px solid #27282f;
width: 110px;
height: 40px;
padding: 10px 20px;
}
strong {
color: #fff;
float: left;
padding-left: 20px;
line-height: 40px;
}
.dm {
margin-top: 10px;
width: 10px;
height: 20px;
float: left;
background-color: #51535d;
position: relative;
}
#demo:after,
#demo:before {
border: solid transparent;
content: ‘ ‘;
height: 0;
left: 100%;
position: absolute;
width: 0;
}
#demo:after {
border-width: 10px;
border-top-color: #035cb3;
top: 20px;
left: 0;
}
#demo:before {
border-width: 10px;
border-bottom-color: #f9d201;
top: -20px;
left: 0;
}
/* */
#demo2:after,
#demo2:before {
border: solid transparent;
content: ‘ ‘;
position: absolute;
width: 0px;
}
#demo2:after {
border-width: 10px;
border-left-color: #ff7600;
top: 0px;
left: 10px;
}
#demo2:before {
border-width: 10px;
border-right-color: #c0db1d;
top: 0px;
left: -30px;
}
</style>
</head>
<body>
<div id=”logo”>
<div id=”demo” class=”dm”></div>
<div id=”demo2″ class=”dm”></div>
<strong>游戏中心</strong>
</div>
</body>
</html>
| 企业级开发前端框架 |
| 游戏开发前端框架 |
| java 前端开发框架 |
» 本文来自：前端开发者 » 《前端通过CSS伪类实现腾讯游戏logo》
» 本文链接地址：https://www.rokub.com/6609.html
» 您也可以订阅本站：https://www.rokub.com
近期评论