菜单横线样式
為什么80%的碼農都做不了架構師？>>> ??
<!DOCTYPE html> <html ><head><meta charset="UTF-8"><meta name="google" value="notranslate"><title>菜單標簽刪除線樣式</title><script async src="http://c.cnzz.com/core.php"></script><style>body {display: table;width: 100%;height: 100vh;margin: 0;background: #333;font-family: 'Roboto Condensed', sans-serif;font-size: 20px;font-weight: 300;letter-spacing: 5px;text-transform: uppercase;color: #fff; }.container {display: table-cell;vertical-align: middle;text-align: center;width: 600px; }ul {list-style: none;margin: 0;padding: 0; }li {display: inline-block;padding: 0 20px; }span {position: relative;display: block;cursor: pointer; }span:before, span:after {content: '';position: absolute;width: 0%;height: 1px;top: 50%;margin-top: -0.5px;background: #fff; }span:before {left: -2.5px; } span:after {right: 2.5px;background: #fff;-webkit-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }span:hover:before {background: #fff;width: 100%;-webkit-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }span:hover:after {background: transparent;width: 100%;-webkit-transition: 0s;transition: 0s; }</style></head><body><body><div class="container"><ul><li><span>Home</span></li><li><span>About us</span></li><li><span>Contact</span></li></ul></div> </body></body> </html>轉載于:https://my.oschina.net/mfeng/blog/749920
總結
- 上一篇： Js文本溢出自动添加省略号ellipsi
- 下一篇： javascript中的链表结构—双向链