• css动画之旅--弹性菜单效果


    今天学习了一个css实现弹性菜单的效果,感觉还不错。

    闲话不说,直接上代码....

    下面是页面的HTML代码:

     1 <div class="menu">
     2         <div class="btn btn-trigger">
     3             <span class="line"></span>
     4         </div>
     5         <div class="icons">
     6             <div class="rotater">
     7               <div class="btn btn-icon">
     8                 <i class="fa fa-codepen"></i>
     9               </div>
    10             </div>
    11             <div class="rotater">
    12               <div class="btn btn-icon">
    13                 <i class="fa fa-facebook"></i>
    14               </div>
    15             </div>
    16             <div class="rotater">
    17               <div class="btn btn-icon">
    18                 <i class="fa fa-google-plus"></i>
    19               </div>
    20             </div>
    21             <div class="rotater">
    22               <div class="btn btn-icon">
    23                 <i class="fa fa-twitter"></i>
    24               </div>
    25             </div>
    26             <div class="rotater">
    27               <div class="btn btn-icon">
    28                 <i class="fa fa-dribbble"></i>
    29               </div>
    30             </div>
    31             <div class="rotater">
    32               <div class="btn btn-icon">
    33                 <i class="fa fa-linkedin"></i>
    34               </div>
    35             </div>
    36             <div class="rotater">
    37               <div class="btn btn-icon">
    38                 <i class="fa fa-github"></i>
    39               </div>
    40             </div>
    41             <div class="rotater">
    42               <div class="btn btn-icon">
    43                 <i class="fa fa-behance"></i>
    44               </div>
    45             </div>
    46         </div>
    47     </div>
    View Code

    其中使用了font-awesome,在head里面添加

    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>

    就可以显示出图标。

    进入正题,下面是CSS代码。

    @charset "utf-8";
    /* CSS Document */
    *, *:before, *:after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      overflow: hidden;
    }
    body{
        /* 渐变三个参数:1.方向 2.起点颜色 3.终点颜色 */
        background:-webkit-linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), -webkit-linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),
            -webkit-linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), -webkit-linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
        background:linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),
            linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
    }
    .absolute-center, .menu, .menu .btn .fa, .menu .btn-trigger .line{
        position:absolute;
        top:50%;
        left:50%;
        /* 指定对象在X、Y轴上的平移 */
        -webkit-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
    }
    .menu{
        width:5em;
        height:5em;
    }
    .menu .btn{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        opacity:0;
        cursor:pointer;
        -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
                transition:opacity 1s, z-index 0.3s, -webkit-transform 1s;
                transition:opacity 1s, z-index 0.3s, transform 1s;
                transition:opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;
        -webkit-transform: translateX(0);
                transform:translateX(0);    
    }
    .menu .btn .fa{
        font-size:3em;
        -webkit-transition: color 0.3s;
                transition: color 0.3s;
    }
    .menu .btn:hover .fa{
        color: rgba(255, 255, 255, 0.7);
    }
    .menu .btn.btn-trigger{
        opacity:1;
        z-index:100;
        cursor: pointer;
        -webkit-transition: -webkit-transform 0.3s;
                transition:-webkit-transform 0.3s;
                transition: transform 0.3s;
    }
    .menu .btn.btn-trigger:hover{
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
    }
    .menu .btn-trigger:hover .line {
        background-color: rgba(255, 255, 255, 0.7);
    }
    .menu .btn-trigger:hover .line:before, .menu .btn-trigger:hover .line:after {
        background-color: rgba(255, 255, 255, 0.7);
    }
    .menu .btn-trigger .line{
        height:6px;
        width:60%;
        background: #000;
          border-radius: 6px;
        -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
                  transition: background-color 0.3s, height 0.3s, top 0.3s;
    }
    .menu .btn-trigger .line:before, .menu .btn-trigger .line:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 6px;
        background: #000;
        border-radius: 6px;
        -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
                transition: background-color 0.3s, -webkit-transform 0.3s;
                transition: background-color 0.3s, transform 0.3s;
                transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
    }
    .menu .btn-trigger .line:before {
        top: -12px;
        -webkit-transform-origin: 15% 100%;
                transform-origin: 15% 100%;
    }
    .menu .btn-trigger .line:after {
        top: 12px;
        -webkit-transform-origin: 25% 30%;
                transform-origin: 25% 30%;
    }
    .menu .rotater{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .menu.active .btn-icon{
        opacity:1;
        z-index:50;
    }
    .menu.active .btn-trigger .line{
        height:0;
        top:45%;
    }
    .menu.active .btn-trigger .line:before{
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        width:110%;
    }
    .menu.active .btn-trigger .line:after{
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        width:110%;
    }
    /* 为每一个菜单添加旋转和平移效果 */
    .rotater:nth-child(1){
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
    .menu.active .rotater:nth-child(1) .btn-icon{
        -webkit-transform: translateY(-10em) rotate(45deg);
                transform: translateY(-10em) rotate(45deg);
    }
    .rotater:nth-child(2){
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    .menu.active .rotater:nth-child(2) .btn-icon{
        -webkit-transform: translateY(-10em);
                transform: translateY(-10em);
    }
    .rotater:nth-child(3){
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    .menu.active .rotater:nth-child(3) .btn-icon{
        -webkit-transform: translateY(-10em) rotate(-45deg);
                transform: translateY(-10em) rotate(-45deg);
    }
    .rotater:nth-child(4){
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }
    .menu.active .rotater:nth-child(4) .btn-icon{
        -webkit-transform: translateY(-10em) rotate(-90deg);
                transform: translateY(-10em) rotate(-90deg);
    }
    .rotater:nth-child(5){
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
    }
    .menu.active .rotater:nth-child(5) .btn-icon{
        -webkit-transform: translateY(-10em) rotate(-135deg);
                transform: translateY(-10em) rotate(-135deg);
    }
    .rotater:nth-child(6){
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    .menu.active .rotater:nth-child(6) .btn-icon{
        -webkit-transform: translateY(-10em) rotate(-180deg);
                transform: translateY(-10em) rotate(-180deg);
    }
    .rotater:nth-child(7){
        -webkit-transform: rotate(225deg);
                transform: rotate(225deg);
    }
    .menu.active .rotater:nth-child(7) .btn-icon{
        -webkit-transform: translateY(-10em) rotate(-225deg);
                transform: translateY(-10em) rotate(-225deg);
    }
    .rotater:nth-child(8){
        -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
    }
    .menu.active .rotater:nth-child(8) .btn-icon{
        -webkit-transform: translateY(-10em) rotate(-270deg);
                transform: translateY(-10em) rotate(-270deg);
    }

      1 body{
      2     /* 渐变三个参数:1.方向 2.起点颜色 3.终点颜色 */
      3     background:-webkit-linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), -webkit-linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),
      4         -webkit-linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), -webkit-linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
      5     background:linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),
      6         linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
      7 }
      8 .absolute-center, .menu, .menu .btn .fa, .menu .btn-trigger .line{
      9     position:absolute;
     10     top:50%;
     11     left:50%;
     12     /* 指定对象在X、Y轴上的平移 */
     13     -webkit-transform: translateX(-50%) translateY(-50%);
     14             transform: translateX(-50%) translateY(-50%);
     15 }
     16 .menu{
     17     5em;
     18     height:5em;
     19 }
     20 .menu .btn{
     21     position: absolute;
     22     top: 0;
     23     left: 0;
     24      100%;
     25     height: 100%;
     26     border-radius: 50%;
     27     background: rgba(255, 255, 255, 0.15);
     28     opacity:0;
     29     cursor:pointer;
     30     -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
     31     transition:opacity 1s, z-index 0.3s, -webkit-transform 1s;
     32     transition:opacity 1s, z-index 0.3s, transform 1s;
     33     transition:opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;
     34     -webkit-transform: translateX(0);
     35             transform:translateX(0);    
     36 }
     37 .menu .btn .fa{
     38     font-size:3em;
     39     -webkit-transition: color 0.3s;
     40             transition: color 0.3s;
     41 }
     42 .menu .btn:hover .fa{
     43     color: rgba(255, 255, 255, 0.7);
     44 }
     45 .menu .btn.btn-trigger{
     46     opacity:1;
     47     z-index:100;
     48     cursor: pointer;
     49     -webkit-transition: -webkit-transform 0.3s;
     50             transition:-webkit-transform 0.3s;
     51             transition: transform 0.3s;
     52 }
     53 .menu .btn.btn-trigger:hover{
     54     -webkit-transform: scale(1.2);
     55             transform: scale(1.2);
     56 }
     57 .menu .btn-trigger:hover .line {
     58     background-color: rgba(255, 255, 255, 0.7);
     59 }
     60 .menu .btn-trigger:hover .line:before, .menu .btn-trigger:hover .line:after {
     61     background-color: rgba(255, 255, 255, 0.7);
     62 }
     63 .menu .btn-trigger .line{
     64     height:6px;
     65     60%;
     66     background: #000;
     67       border-radius: 6px;
     68     -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
     69               transition: background-color 0.3s, height 0.3s, top 0.3s;
     70 }
     71 .menu .btn-trigger .line:before, .menu .btn-trigger .line:after {
     72     content: "";
     73     display: block;
     74     position: absolute;
     75     left: 0;
     76      100%;
     77     height: 6px;
     78     background: #000;
     79     border-radius: 6px;
     80     -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
     81             transition: background-color 0.3s, -webkit-transform 0.3s;
     82             transition: background-color 0.3s, transform 0.3s;
     83             transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
     84 }
     85 .menu .btn-trigger .line:before {
     86     top: -12px;
     87     -webkit-transform-origin: 15% 100%;
     88             transform-origin: 15% 100%;
     89 }
     90 .menu .btn-trigger .line:after {
     91     top: 12px;
     92     -webkit-transform-origin: 25% 30%;
     93             transform-origin: 25% 30%;
     94 }
     95 .menu .rotater{
     96     position: absolute;
     97     top: 0;
     98     left: 0;
     99      100%;
    100     height: 100%;
    101 }
    102 .menu.active .btn-icon{
    103     opacity:1;
    104     z-index:50;
    105 }
    106 .menu.active .btn-trigger .line{
    107     height:0;
    108     top:45%;
    109 }
    110 .menu.active .btn-trigger .line:before{
    111     -webkit-transform: rotate(45deg);
    112             transform: rotate(45deg);
    113     110%;
    114 }
    115 .menu.active .btn-trigger .line:after{
    116     -webkit-transform: rotate(-45deg);
    117             transform: rotate(-45deg);
    118     110%;
    119 }
    120 /* 为每一个菜单添加旋转和平移效果 */
    121 .rotater:nth-child(1){
    122     -webkit-transform: rotate(-45deg);
    123             transform: rotate(-45deg);
    124 }
    125 .menu.active .rotater:nth-child(1) .btn-icon{
    126     -webkit-transform: translateY(-10em) rotate(45deg);
    127             transform: translateY(-10em) rotate(45deg);
    128 }
    129 .rotater:nth-child(2){
    130     -webkit-transform: rotate(0deg);
    131             transform: rotate(0deg);
    132 }
    133 .menu.active .rotater:nth-child(2) .btn-icon{
    134     -webkit-transform: translateY(-10em);
    135             transform: translateY(-10em);
    136 }
    137 .rotater:nth-child(3){
    138     -webkit-transform: rotate(45deg);
    139             transform: rotate(45deg);
    140 }
    141 .menu.active .rotater:nth-child(3) .btn-icon{
    142     -webkit-transform: translateY(-10em) rotate(-45deg);
    143             transform: translateY(-10em) rotate(-45deg);
    144 }
    145 .rotater:nth-child(4){
    146     -webkit-transform: rotate(90deg);
    147             transform: rotate(90deg);
    148 }
    149 .menu.active .rotater:nth-child(4) .btn-icon{
    150     -webkit-transform: translateY(-10em) rotate(-90deg);
    151             transform: translateY(-10em) rotate(-90deg);
    152 }
    153 .rotater:nth-child(5){
    154     -webkit-transform: rotate(135deg);
    155             transform: rotate(135deg);
    156 }
    157 .menu.active .rotater:nth-child(5) .btn-icon{
    158     -webkit-transform: translateY(-10em) rotate(-135deg);
    159             transform: translateY(-10em) rotate(-135deg);
    160 }
    161 .rotater:nth-child(6){
    162     -webkit-transform: rotate(180deg);
    163             transform: rotate(180deg);
    164 }
    165 .menu.active .rotater:nth-child(6) .btn-icon{
    166     -webkit-transform: translateY(-10em) rotate(-180deg);
    167             transform: translateY(-10em) rotate(-180deg);
    168 }
    169 .rotater:nth-child(7){
    170     -webkit-transform: rotate(225deg);
    171             transform: rotate(225deg);
    172 }
    173 .menu.active .rotater:nth-child(7) .btn-icon{
    174     -webkit-transform: translateY(-10em) rotate(-225deg);
    175             transform: translateY(-10em) rotate(-225deg);
    176 }
    177 .rotater:nth-child(8){
    178     -webkit-transform: rotate(270deg);
    179             transform: rotate(270deg);
    180 }
    181 .menu.active .rotater:nth-child(8) .btn-icon{
    182     -webkit-transform: translateY(-10em) rotate(-270deg);
    183             transform: translateY(-10em) rotate(-270d

    主要用到的css属性是transition和transform.

    最后再添加一点js就可以实现效果。

    <script>
        $('.btn-trigger').click(function() {
            $('.menu').toggleClass('active');
        });
    </script>
  • 相关阅读:
    C#中标准Dispose模式的实现
    TcpListener 示例
    TCP/IP详解学习笔记
    TCP跟UDP乱侃
    Opencv 2.4.10 +VS2010 项目配置记录
    字符串作业及默写
    Flask 中的 Render Redirect HttpResponse
    运算符和编码作业及默写
    初识 Python 作业及默写
    初识 Python
  • 原文地址:https://www.cnblogs.com/twoegg/p/7614996.html
Copyright © 2020-2023  润新知