CSS3旋转环形菜单学习

最新推荐文章于 2025-05-08 11:23:00 发布

leaolly

最新推荐文章于 2025-05-08 11:23:00 发布

阅读量1.6k

点赞数 1

分类专栏： css

css 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>HTML5/CSS3超酷环形动画菜单DEMO演示</title>

  <link rel="stylesheet" href="css/reset.css">

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

<div style="text-align:center;clear:both">

<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>

<script src="/follow.js" type="text/javascript"></script>

</div>

  <div class="radmenu"><a href="#" class="show" >START</a>

  <ul>

    <li>

      <a href="#" class="">Menu 1</a>

      <ul>

        <li><a href="#">Sub Menu 1</a></li>

        <li><a href="#">Sub Menu 2</a></li>

        <li><a href="#">Sub Menu 3</a></li>

        <li><a href="#">Sub Menu 4</a></li>

        <li><a href="#">Sub Menu 5</a></li>

      </ul>

    </li>

    <li>

      <a href="#">Menu 2</a>

      <ul>

        <li><a href="#">Sub Menu 1</a></li>

        <li><a href="#">Sub Menu 2</a></li>

        <li><a href="#">Sub Menu 3</a></li>

        <li><a href="#">Sub Menu 4</a></li>

        <li><a href="#">Sub Menu 5</a></li>

      </ul>

    </li>

    <li>

      <a href="#">Menu 3</a>

      <ul>

        <li><a href="#">Sub Menu 1</a></li>

        <li><a href="#">Sub Menu 2</a></li>

        <li><a href="#">Sub Menu 3</a></li>

        <li><a href="#">Sub Menu 4</a></li>

        <li><a href="#">Sub Menu 5</a></li>

      </ul>

    </li>

    <li>

      <a href="#">Menu 4</a>

      <ul>

        <li><a href="#">Sub Menu 1</a></li>

        <li><a href="#">Sub Menu 2</a></li>

        <li><a href="#">Sub Menu 3</a></li>

        <li><a href="#">Sub Menu 4</a></li>

        <li><a href="#">Sub Menu 5</a></li>

      </ul>

    </li>

    <li></li>

      <a ref="#">Menu 5</a>

      <ul>

        <li><a href="#">Sub Menu 1</a></li>

        <li><a href="#">Sub Menu 2</a></li>

        <li><a href="#">Sub Menu 3</a></li>

        <li><a href="#">Sub Menu 4</a></li>

        <li><a href="#">Sub Menu 5</a></li>

      </ul>

    </li>

  </ul>

</div>

  <script src="js/index.js"></script>

</body>

</html>

style.css

body {

  background: url(2.jpg);

}

.radmenu {

  position: absolute;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

}

.radmenu > a {

  top: calc(50% - 60px);

  left: calc(50% - 60px);

}

.radmenu > a.show {

  display: flex !important;

}

.radmenu li {

  -webkit-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

  transition: all 1s ease;

}

.radmenu a {

  position: absolute;

  width: 120px;

  height: 120px;

  background: rgba(255, 255, 255, 0.9);

  text-align: center;

  align-items: center;

  justify-content: center;

  border-radius: 120px;

  display: none;

  text-decoration: none;

  color: #333;

  transition: all 1s ease;

  box-shadow: 0 0 15px #222;

  font-family: "segoe ui";

  font-weight: 200;

  font-size: 16px;

}

.radmenu .selected {

  background: rgba(51, 51, 51, 0.9);

  display: flex;

  top: calc(50% - 60px);

  left: calc(50% - 60px);

  color: #f1f1f1;

  box-shadow: 0 0 10px #f1f1f1;

}

.radmenu .selected + ul > li:nth-child(1) {

  -webkit-transform: rotate(72deg) translateX(100px);

  transform: rotate(72deg) translateX(100px);

}

.radmenu .selected + ul > li:nth-child(1) > a {

  -webkit-transform: rotate(-72deg);

  transform: rotate(-72deg);

}

.radmenu .selected + ul > li:nth-child(2) {

  -webkit-transform: rotate(144deg) translateX(100px);

  transform: rotate(144deg) translateX(100px);

}

.radmenu .selected + ul > li:nth-child(2) > a {

  -webkit-transform: rotate(-144deg);

  transform: rotate(-144deg);

}

.radmenu .selected + ul > li:nth-child(3) {

  -webkit-transform: rotate(216deg) translateX(100px);

  transform: rotate(216deg) translateX(100px);

}

.radmenu .selected + ul > li:nth-child(3) > a {

  -webkit-transform: rotate(-216deg);

  transform: rotate(-216deg);

}

.radmenu .selected + ul > li:nth-child(4) {

  -webkit-transform: rotate(288deg) translateX(100px);

  transform: rotate(288deg) translateX(100px);

}

.radmenu .selected + ul > li:nth-child(4) > a {

  -webkit-transform: rotate(-288deg);

  transform: rotate(-288deg);

}

.radmenu .selected + ul > li:nth-child(5) {

  -webkit-transform: rotate(360deg) translateX(100px);

  transform: rotate(360deg) translateX(100px);

}

.radmenu .selected + ul > li:nth-child(5) > a {

  -webkit-transform: rotate(-360deg);

  transform: rotate(-360deg);

}

.radmenu .selected + ul > li > a {

  display: flex;

}

reset.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{

    margin:0;

    padding:0;

    border:0;

    font-size:100%;

    font:inherit;

    vertical-align:baseline

}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{

    display:block

}

    body{

        line-height:1

}

        ol,ul{

            list-style:none

}

        blockquote,q{

            quotes:none

}

        blockquote:before,blockquote:after,q:before,q:after{

            content:'';content:none

}

table{

    border-collapse:collapse;

    border-spacing:0

}

style.css.bak

body {

background: url(http://www.scenicreflections.com/files/Hazy_Forest_Road_Wallpaper_qoek0.jpg);

}

.radmenu {

position: absolute;

display: flex;

align-items: center;

justify-content: center;

width: 100%;

height: 100%;

}

.radmenu > a {

top: calc(50% - 60px);

left: calc(50% - 60px);

}

.radmenu > a.show {

display: flex !important;

}

.radmenu li {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

transition: all 1s ease;

}

.radmenu a {

position: absolute;

width: 120px;

height: 120px;

background: rgba(255, 255, 255, 0.9);

text-align: center;

align-items: center;

justify-content: center;

border-radius: 120px;

display: none;

text-decoration: none;

color: #333;

transition: all 1s ease;

box-shadow: 0 0 15px #222;

font-family: "segoe ui";

font-weight: 200;

font-size: 16px;

}

.radmenu .selected {

background: rgba(51, 51, 51, 0.9);

display: flex;

top: calc(50% - 60px);

left: calc(50% - 60px);

color: #f1f1f1;

box-shadow: 0 0 10px #f1f1f1;

}

.radmenu .selected + ul > li:nth-child(1) {

-webkit-transform: rotate(72deg) translateX(100px);

transform: rotate(72deg) translateX(100px);

}

.radmenu .selected + ul > li:nth-child(1) > a {

-webkit-transform: rotate(-72deg);

transform: rotate(-72deg);

}

.radmenu .selected + ul > li:nth-child(2) {

-webkit-transform: rotate(144deg) translateX(100px);

transform: rotate(144deg) translateX(100px);

}

.radmenu .selected + ul > li:nth-child(2) > a {

-webkit-transform: rotate(-144deg);

transform: rotate(-144deg);

}

.radmenu .selected + ul > li:nth-child(3) {

-webkit-transform: rotate(216deg) translateX(100px);

transform: rotate(216deg) translateX(100px);

}

.radmenu .selected + ul > li:nth-child(3) > a {

-webkit-transform: rotate(-216deg);

transform: rotate(-216deg);

}

.radmenu .selected + ul > li:nth-child(4) {

-webkit-transform: rotate(288deg) translateX(100px);

transform: rotate(288deg) translateX(100px);

}

.radmenu .selected + ul > li:nth-child(4) > a {

-webkit-transform: rotate(-288deg);

transform: rotate(-288deg);

}

.radmenu .selected + ul > li:nth-child(5) {

-webkit-transform: rotate(360deg) translateX(100px);

transform: rotate(360deg) translateX(100px);

}

.radmenu .selected + ul > li:nth-child(5) > a {

-webkit-transform: rotate(-360deg);

transform: rotate(-360deg);

}

.radmenu .selected + ul > li > a {

display: flex;

}

index.js

var buttons = document.querySelectorAll(".radmenu a");

for (var i=0, l=buttons.length; i<l; i++) {

  var button = buttons[i];

  button.onclick = setSelected;

}

function setSelected(e) {

    if (this.classList.contains("selected")) {

      this.classList.remove("selected");

      if (!this.parentNode.classList.contains("radmenu")) {

        this.parentNode.parentNode.parentNode.querySelector("a").classList.add("selected")

      } else {

        this.classList.add("show");

}

    } else {

      this.classList.add("selected");

      if (!this.parentNode.classList.contains("radmenu")) {

        this.parentNode.parentNode.parentNode.querySelector("a").classList.remove("selected")

      } else {

        this.classList.remove("show");

}

}

    return false;

}

style.scss

@import "compass/css3";

$sub-menus :  5;

body {

 background: url(http://www.scenicreflections.com/files/Hazy_Forest_Road_Wallpaper_qoek0.jpg) 

}

.radmenu {

  position: absolute;

  display:flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  > a {

    top: calc(50% - 60px);

    left: calc(50% - 60px);

    &.show {

     display: flex !important; 

}

}

  li {

   -webkit-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

   transition: all 1s ease; 

}

a {

    position: absolute;

    width: 120px;

    height: 120px;

    background: rgba(white, 0.9);

    text-align: center;

    align-items: center;

    justify-content: center;

    border-radius: 120px;

    display: none;

    text-decoration: none;

    color: #333;

    transition: all 1s ease;

    box-shadow: 0 0 15px #222;

    font-family: "segoe ui";

    font-weight: 200;

    font-size: 16px;

}

  .selected {

    background: rgba(#333, 0.9);

    display: flex;

    top: calc(50% - 60px);

    left: calc(50% - 60px);

    color: #f1f1f1;

    box-shadow: 0 0 10px #f1f1f1;

    + ul {

      @for $i from 1 through $sub-menus {

        > li:nth-child(#{$i}) {

          $angle: 360deg / $sub-menus * $i;

          -webkit-transform: rotate($angle) translateX(100px);

          transform: rotate($angle) translateX(100px);

          > a {

            -webkit-transform: rotate(0 - $angle);

            transform: rotate(0 - $angle);

}

}

}

      > li > a {

        display: flex

}

}

}

}