找回密码
当前位置：前端开发者 > CSS > 正文

前端开发的动画实例_CSS3鼠标悬停

2018-07-31 分类：CSS 阅读(618) 评论(0)

web前端开发岗位认知|35岁前端开发找工作|前端开发工作内容描述

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>CSS3鼠标悬停动画</title>
    <style type=”text/css”>
        body {
            margin: 200px;
            text-align: center;
            font: 1em “微软雅黑”;
        }
        /*去掉li的点或者顺序*/
        ul,
        ol,
        li {
            list-style-type: none;
            vertical-align: 0
        }
        /*去掉超链接底下的横线*/
        a {
            color: #535353;
            text-decoration: none
        }
        /*添加滑过a标签改变其文字颜色*/
        a:hover {
            color: #D40000;
            text-decoration: none
        }
        /* 效果css开始 */
        /*先让里浮动到一起*/
        .nav li {
            position: relative;
            display: inline-block;
            margin-left: -50px;
            transition: all 0.4s linear;
        }
        /*把a标签画成圆圈*/
        .nav li a {
            display: inline-block;
            width: 90px;
            height: 90px;
            padding: 30px;
            border-radius: 50%;
            border-width: 8px;
            border-style: solid;
        }
        /*滑过li进行放大并把它放到最前面*/
        .nav li:hover {
            z-index: 11;
            transform: scale(1.1);
        }
        /*.nav li:hover a {
text-decoration: none;
}*/
        .nav li:hover span {
            transition: all 0.4s linear;
            animation: moveFromBottom 0.3s ease;
        }
        /*给圆圈加背景色和修改边框颜色*/
        .nav li:nth-child(1) a {
            color: #4d9683;
            text-shadow: 0 1px 0 #9de3cf;
            border-color: #549e89;
            background-color: #51c9a7;
        }
        .nav li:nth-child(2) a {
            color: #be607e;
            text-shadow: 0 1px 0 #de8ba5;
            border-color: #e499b0;
            background-color: #e67b9c;
        }
        .nav li:nth-child(3) a {
            color: #5e9eb4;
            text-shadow: 0 1px 0 #adddec;
            border-color: #a2cfde;
            background-color: #7ec9e3;
        }
        .nav li:nth-child(4) a {
            color: #ba9d5e;
            text-shadow: 0 1px 0 #f5e0ad;
            border-color: #dcc999;
            background-color: #f0cd78;
        }
        .nav li:nth-child(5) a {
            color: #b468a2;
            text-shadow: 0 1px 0 #e8acd8;
            border-color: #d8abcd;
            background-color: #dd91cb;
        }
        /*鼠标滑过显示高亮颜色*/
        .nav li:nth-child(1):hover a {
            color: #0f775c;
            text-shadow: 0 1px 0 #81e6c9;
            border-color: #0a8462;
            background-color: #00c18c;
        }
        .nav li:nth-child(2):hover a {
            color: #b12a55;
            text-shadow: 0 1px 0 #ff95b7;
            border-color: #ba335c;
            background-color: #ea5180;
        }
        .nav li:nth-child(3):hover a {
            color: #2883a2;
            text-shadow: 0 1px 0 #9cdef2;
            border-color: #4397b3;
            background-color: #55c1e5;
        }
        .nav li:nth-child(4):hover a {
            color: #ab8228;
            text-shadow: 0 1px 0 #ffe199;
            border-color: #b08f3e;
            background-color: #f8c64d;
        }
        .nav li:nth-child(5):hover a {
            color: #a33689;
            text-shadow: 0 1px 0 #ec97d6;
            border-color: #b7569f;
            background-color: #dd70c3;
        }
        .nav span {
            display: block;
            line-height: 90px;
            font-size: 30px;
            font-style: normal;
            position: relative;
            /*width: 100px;
height: 90px; */
        }
        /*可以插入一些图片或者小图标，我就不插入了，你们可以自己试试*/
        /*.nav span:before {
display: block;
position: relative;
margin: auto;
}
.nav li:nth-child(1) span:before {
content: “”;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-top: 30px solid red;
border-left: 30px solid red;
border-bottom: 30px solid red;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}*/
        @keyframes moveFromBottom {
            from {
                transform: translateY(120%) scale(0.5);
                opacity: 0;
            }
            to {
                transform: translateY(0%) scale(1);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class=”page”>
        <section class=”demo”>
            <nav class=”nav”>
                <ul>
                    <li>
                        <a href=””>
                            <span>Home</span>
                        </a>
                    </li>
                    <li>
                        <a href=””>
                            <span>Phone</span>
                        </a>
                    </li>
                    <li>
                        <a href=””>
                            <span>Wifi</span>
                        </a>
                    </li>
                    <li>
                        <a href=””>
                            <span>Setting</span>
                        </a>
                    </li>
                    <li>
                        <a href=””>
                            <span>Twitter</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </section>
    </div>
</body>
</html>

美团前端开发待遇如何|前端安卓开发环境搭建|web前端和安卓开发

赞(0)
前端开发者 » 前端开发的动画实例_CSS3鼠标悬停
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论