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

TOP

css动画之旅--弹性菜单效果(一)

2017-10-10 12:33:13 【大中小】浏览:9958次

今天学习了一个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, tra

首页上一页 1 2 3 4 5 下一页尾页 1/5/5
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：javascript函数的调用及有关隐式..	下一篇：XMLHttpRequest对象_Ajax异步请求..