CSS3圓環動態彈出菜單

來源：懂視網責編：小采時間：2020-11-27 15:31:43

CSS3圓環動態彈出菜單

CSS3圓環動態彈出菜單:體驗效果：代碼如下： <!DOCTYPE html> <html lang=zh> <head> <meta charset=UTF-8> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1> <met

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS3圓環動態彈出菜單:體驗效果：代碼如下： <!DOCTYPE html> <html lang=zh> <head> <meta charset=UTF-8> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1> <met

體驗效果：

代碼如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>純CSS3圓形主菜單展開特效 - 何問起</title><base target="_blank" />
<link  rel="stylesheet">
<link  rel="stylesheet">
<link rel="stylesheet" type="text/css" >
<style type="text/css">
 .demo{
 padding: 2em 0;
 transform: translate3d(0, 0, 0);
 }
 .navbar{
 width: 150px;
 height: 150px;
 line-height: 150px;
 border-radius: 50%;
 background: #fff;
 margin: 70px auto;
 position: relative;
 cursor: pointer;
 text-align: center;
 font-size: 1.75em;
 font-weight: bold;
 color: #99b977;
 transition: 0.24s 0.2s;
 }
 .navbar:hover{
 background: rgba(255, 255, 255, 0.75);
 }
 .navbar .menu{
 list-style: none;
 padding: 0;
 margin: 0;
 position: absolute;
 top: -75px;
 left: -75px;
 border: 150px solid transparent;
 cursor: default;
 border-radius: 50%;
 transform: scale(0);
 transition: transform 1.4s 0.07s;
 z-index: -1;
 }
 .navbar:hover .menu{
 transition: transform 0.4s 0.08s, z-index 0s 0.5s;
 transform: scale(1);
 z-index: 1;
 }
 .navbar .menu li{
 position: absolute;
 top: -100px;
 left: -100px;
 transform-origin: 100px 100px;
 transition: all 0.5s 0.1s;
 }
 .navbar:hover .menu li{
 transition: all 0.6s;
 }
 .navbar .menu li a{
 width: 45px;
 height: 45px;
 line-height: 45px;
 border-radius: 50%;
 background: #fff;
 position: absolute;
 font-size: 60%;
 color: #99b977;
 transition: 0.6s;
 }
 .navbar:hover .menu li:nth-child(1){
 transition-delay: 0.02s;
 transform: rotate(85deg);
 }
 .navbar:hover .menu li:nth-child(1) a{
 transition-delay: 0.04s;
 transform: rotate(635deg);
 }
 .navbar:hover .menu li:nth-child(2){
 transition-delay: 0.04s;
 transform: rotate(125deg);
 }
 .navbar:hover .menu li:nth-child(2) a{
 transition-delay: 0.08s;
 transform: rotate(595deg);
 }
 .navbar:hover .menu li:nth-child(3){
 transition-delay: 0.06s;
 transform: rotate(165deg);
 }
 .navbar:hover .menu li:nth-child(3) a{
 transition-delay: 0.12s;
 transform: rotate(555deg);
 }
 .navbar:hover .menu li:nth-child(4){
 transition-delay: 0.08s;
 transform: rotate(205deg);
 }
 .navbar:hover .menu li:nth-child(4) a{
 transition-delay: 0.16s;
 transform: rotate(515deg);
 }
 .navbar:hover .menu li:nth-child(5){
 transition-delay: 0.1s;
 transform: rotate(245deg);
 }
 .navbar:hover .menu li:nth-child(5) a{
 transition-delay: 0.2s;
 transform: rotate(475deg);
 }
 .navbar:hover .menu li:nth-child(6){
 transition-delay: 0.12s;
 transform: rotate(285deg);
 }
 .navbar:hover .menu li:nth-child(6) a{
 transition-delay: 0.24s;
 transform: rotate(435deg);
 }
 .navbar:hover .menu li:nth-child(7){
 transition-delay: 0.14s;
 transform: rotate(325deg);
 }
 .navbar:hover .menu li:nth-child(7) a{
 transition-delay: 0.28s;
 transform: rotate(395deg);
 }
 .navbar:hover .menu li:nth-child(8){
 transition-delay: 0.16s;
 transform: rotate(365deg);
 }
 .navbar:hover .menu li:nth-child(8) a{
 transition-delay: 0.32s;
 transform: rotate(355deg);
 }
 .navbar:hover .menu li:nth-child(9){
 transition-delay: 0.18s;
 transform: rotate(405deg);
 }
 .navbar:hover .menu li:nth-child(9) a{
 transition-delay: 0.36s;
 transform: rotate(315deg);
 }
</style>
</head>
<body>
<div class="demo">
 <div class="container">
 <div class="row">
 <div class="col-md-12">
 <div class="navbar">主菜單
 <ul class="menu">
 <li><a  class="fa fa-facebook"></a></li>
 <li><a  class="fa fa-google-plus"></a></li>
 <li><a  class="fa fa-twitter"></a></li>
 <li><a  class="fa fa-linkedin"></a></li>
 <li><a  class="fa fa-pinterest"></a></li>
 <li><a  class="fa fa-rss"></a></li>
 <li><a  class="fa fa-instagram"></a></li>
 <li><a  class="fa fa-skype"></a></li>
 <li><a  class="fa fa-github"></a></li>
 </ul>
 </div>
 </div>
 </div>
 </div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用瀏覽器：支持CSS3的瀏覽器</p>
<p>來源：<a  target="_blank">何問起</a></p>
</div>
</body>
</html>

特效推薦：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com