前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3动画实现菜单特效

CSS3动画实现菜单特效

作者头像
IMWeb前端团队
发布2018-01-08 16:05:23
1.7K0
发布2018-01-08 16:05:23
举报
文章被收录于专栏:IMWeb前端团队

本文作者:IMWeb 寒纱阁主 原文出处:IMWeb社区 未经同意,禁止转载

制作了一个简单的菜单特效:

以下是HTML5代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/css3特效.css"/>
        <title>菜单特效</title>
    </head>
    <body>
            <div id="div1"><ul>
                <li>home</li>
                <li>Home</li>
            </ul></div>
            <div id="div2"><ul>
                <li>phone</li>
                <li>Phone</li>
            </ul></div>
            <div id="div3"><ul>
                <li>wifi</li>
                <li>Wifi</li>
            </ul></div>
            <div id="div4"><ul>
                <li>setting</li>
                <li>Setting</li>
            </ul></div>
            <div id="div5"><ul>
                <li>twitter</li>
                <li>Twitter</li>
            </ul></div>
    </body>
</html>

以下是CSS3代码:

代码语言:javascript
复制
/* 全局匹配 */
*{padding: 0;margin: 0;}
ul{
    list-style: none;
}
a  {
    text-decoration:none;
}
/*添加字体*/
@font-face {
    font-family:chensy;
    src: url('../font/LigatureSymbols.eot');
    src: url('../font/LigatureSymbols.svg');
    src: url('../font/LigatureSymbols.ttf');
    src: url('../font/LigatureSymbols.woff');
}
/*给按钮设置总样式*/
div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    opacity: 0.9;
    top: 300px;
    transition: all 0.5s ease;
}
/*设置按钮hover样式*/
div:hover{
    transform: scale(1.2,1.2);
    opacity: 1;
    box-shadow: 5px 5px 3px grey;
}
/*给每一个按钮设置样式*/
#div1{
    border: solid 5px #549e89;
    color: #4d9683;
    background-color: #0DC492;
    left: 33%;
    z-index: 0;
    animation: move1 7s 1 ease;
}
#div1:hover{
    z-index: 10;
    border-color: #0a8462;
    color: #0a8462;
}
#div2{
    border: solid 5px #e499b0;
    color: #be607e;
    background-color: #eb5a86;
    left: 39%;
    z-index: 1;
    animation: move2 6s 1 ease;
}
#div2:hover{
    z-index: 10;
    border-color:#b12a55;
    color: #b12a55;
}
#div3{
    border: solid 5px #a2cfde;
    color: #5E9EB4;
    background-color: #5ec4e6;
    left: 45%;
    z-index: 2;
    animation: move3 5s 1 ease;
}
#div3:hover{
    z-index: 10;
    border-color: #2883a2;
    color: #2883a2;
}
#div4{
    border: solid 5px #dcc999;
    color: #BA9D5E;
    background-color: #f8c956;
    left: 51%;
    z-index: 3;
    animation: move4 4s 1 ease;
}
#div4:hover{
    z-index: 10;
    border-color: #ab8228;
    color: #ab8228;
}
#div5{
    border: solid 5px #d8abcd;
    color: #B468A2;
    background-color: #df77c6;
    left:57%;
    z-index: 4;
    animation: move5 3s 1 ease;
}
#div5:hover{
    z-index: 10;
    border-color: #a33689;
    color: #a33689;
}
/*按钮内部字体样式*/
div ul {
    margin-top: 20px;
    text-align: center;
    font-family: chensy;
    font-size: 17px;
    font-weight: 600;
}
div ul li:first-child{
    font-size: 45px;
}
/*按钮动画*/
@keyframes move5{
    0%{
        left:-100px;
    }
    90%{
        left: 55%;
        transform: scale(1.1,1.1);
    }
    95%{
        left: 56%;
        transform: scale(1.2,1.2);
    }
    100%{
        left: 57%;
        transform: scale(1,1);
    }
}
@keyframes move4{
    0%{
        left:-100px;
    }
    90%{
        left: 49%;
        transform: scale(1.1,1.1);
    }
    95%{
        left: 50%;
        transform: scale(1.2,1.2);
    }
    100%{
        left: 51%;
        transform: scale(1,1);
    }
}
@keyframes move3{
    0%{
        left:-100px;
    }
    90%{
        left: 43%;
        transform: scale(1.1,1.1);
    }
    95%{
        left: 44%;
        transform: scale(1.2,1.2);
    }
    100%{
        left: 45%;
        transform: scale(1,1);
    }
}
@keyframes move2{
    0%{
        left:-100px;
    }
    90%{
        left: 37%;
        transform: scale(1.1,1.1);
    }
    95%{
        left: 38%;
        transform: scale(1.2,1.2);
    }
    100%{
        left: 39%;
        transform: scale(1,1);
    }
}
@keyframes move1{
    0%{
        left:-100px;
    }
    90%{
        left: 31%;
        transform: scale(1.1,1.1);
    }
    95%{
        left: 32%;
        transform: scale(1.2,1.2);
    }
    100%{
        left: 33%;
        transform: scale(1,1);
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档