<html><head><meta charset="utf-8"><title>CSS3圓形風格麵包屑導航</title><link rel="stylesheet" type="text/css" href="http://css.h5course.cn/reset.css" /><style type="text/css">html, body {height: 100%;padding: 0 100px;background-color: #59a386;}.title {padding: 50px 0;color: #77c2a5;font-size: 25px;font-weight: bold;}ul.breadcrumb {display: inline-block;margin-left: 50px;}/*實現每個導航項的基本樣式*/ul.breadcrumb li {float: right;padding: 5px;margin: 3px 0 0 -50px;background-color: #59a386;border-radius: 50px;transition: all 0.2s linear 0s;}ul.breadcrumb li a {display: block;overflow: hidden;min-width: 50px;width: 50px;height: 50px;padding: 0 33.33px 0 52px;color: #509378;background-color: #65ba99;text-align: center;line-height: 50px;border-radius: 50px;transition: all 0.2s linear 0s;box-sizing: border-box;}/*控制每個導航項中文本的出現*/ul.breadcrumb li a .text {display: none;opacity: 0;}ul.breadcrumb li a:hover {width: 150px;background-color: #77c2a5;}ul.breadcrumb li a:hover .text {display: inline-block;opacity: 1;}/*處理第一個導航項*/ul.breadcrumb li:last-child a {padding: 0;}ul.breadcrumb li:last-child:hover {padding: 3px;margin-top: 0;}ul.breadcrumb li:last-child:hover a {width: 60px;height: 60px;line-height: 60px;}</style></head><body><h1>CSS3圓形風格麵包屑導航</h1><ul><li><a href="#"><span class="text icon-file">移動端</span></a></li><li><a href="#"><span class="text icon-folder-open">JS</span></a></li><li><a href="#"><span class="text icon-code">CSS3</span></a></li><li><a href="#"><span class="text icon-beaker">HTML5</span></a></li><li><a href="#"><span class="icon icon-home">HOME</span></a></li></ul></body></html>
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
HTML網頁最佳化壓縮的實現步驟
怎樣不使用CSS改變滑鼠移至上方樣式
怎麼最佳化HTML網頁
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
