HTML5+CSS3 菜单列表

🌙

手机阅读

本文目录结构

这个里面最常用的是一个属性就是：

-webkit-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
-ms-transition: 0.3s all ease;

HTML5 和 CSS3 配合的；

DOM1 的代码如下：

HTML 部分；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style/move.css"/>
</head>
<body>
<p class="link">
    <a href="index1.html" class="active">DEMO1</a>
    <a href="index2.html">DEMO2</a>
</p>
<ul class="list">
    <li>
        <span class="icon">亚</span>
        <div class="text">
            <h2>关于我们</h2>
            <h3>金三胖是宇宙大战中，地球球长，宇宙总指挥！</h3>
        </div>
    </li>
    <li>
        <span class="icon">洲</span>
        <div class="text">
            <h2>联系我们</h2>
            <h3>金三胖的亚洲州长办公室位于地球，朝鲜半岛！</h3>
        </div>
    </li>
    <li>
        <span class="icon">洲</span>
        <div class="text">
            <h2>给我们钱</h2>
            <h3>最好给粮食！金三胖最爱吃板面，记得加个蛋！</h3>
        </div>
    </li>
    <li>
        <span class="icon">长</span>
        <div class="text">
            <h2>联系方式</h2>
            <h3>以45°角仰望天空，默念三胖你最屌，有机会收到感应！</h3>
        </div>
    </li>
    <li>
        <span class="icon">金</span>
        <div class="text">
            <h2>公司路线</h2>
            <h3>对P民无用，P民只能仰望三胖！</h3>
        </div>
    </li>
    <li>
        <span class="icon">三</span>
        <div class="text">
            <h2>加入我们</h2>
            <h3>宇宙大战，即将开始，请广大爱国者勇于加入！</h3>
        </div>
    </li>
    <li>
        <span class="icon">胖</span>
        <div class="text">
            <h2>准备战斗</h2>
            <h3>宇宙大战，即将开始，请广大爱国者勇于加入！</h3>
        </div>
    </li>
</ul>
<div class="broszhu">
    <h3 id="home_top">HTML5+CSS3实现菜单列表　-　Powered By <a href="http://taobao.fm/"target="_blank">broszhu</a>　　博客网址：<a href="http://taobao.fm/" target="_blank">taobao.fm</a> </h2>
        <p id="home_bottom">学习JavaScript是一件很有趣的事，可以做出很多自豪的小玩意！--broszhu （这个页面是实现原理：<a href="#" target="_blank">点此查看</a>）</p>
</div>
</body>
</html>

CSS 如下：

@charse
/*以下是清空样式*/
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-size: 12px;
    font-family: "Microsoft YaHei", 微软雅黑, "SimSun", "Arial Narrow", HELVETICA;
}
ul, ol,li {
    list-style-type: none;
}
select, input, img {
    vertical-align: middle;
}
a {
    text-decoration: none;
}
/*首页背景*/
body {
    background: url("../img/beige_paper.png") left top repeat;
}
/*顶部锚文本区*/
.link {
    padding-top: 10px;
    text-align: center;
}
.link a {
    display: inline-block;
    width: 51px;
    height: 20px;;
    line-height: 20px;
    margin: 0 5px;
    border: 1px solid #BFBFFF;
    border-radius: 3px;
    padding: 0 4px;
    background: #fff;
    color: #f30;
    font-size: 12px;
}
.link a.active {
    background: #259add;
    color: #fff;
}
/*UL列表页*/
.list {
    margin-top: 50px;
    width: 100%;
    height: auto;
}
.list li {
    width: 500px;
    height: 100px;
    margin: 0 auto;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
    transition: 0.3s all ease;
    overflow: hidden;
}
/*-webkit-transition;是动画出现的过度状态，0.3s all ease;代表0.3秒， 所有 安逸的*/
/*-webkit-是谷歌跟苹果浏览器的私有前缀；moz是火狐浏览器的私有前缀，ms是IE，o是欧鹏浏览器*/
.list li:hover {
    cursor:pointer;
    background: #E1F0FA;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
/*box-shadow是盒子阴影的意思，后面一共跟了四个数字，第一个是分别为X轴偏移量，Y轴偏移量，阴影半径；第四个是color；*/
/*rgba分别达标red，green，b色，o代表透明度，opacity*/
.list li:hover .text h2 {
    color: #259add;
    -webkit-animation: moveTop 300ms ease-in-out ;
    -moz-animation: moveTop 300ms ease-in-out ;
    -ms-animation: moveTop 300ms ease-in-out ;
    -o-animation: moveTop 300ms ease-in-out ;
}
.list li:hover .text h3 {
    color: #000;
    -webkit-animation: moveBottom 300ms ease-in-out;
    -moz-animation: moveBottom 300ms ease-in-out;
    -ms-animation: moveBottom 300ms ease-in-out;
}
/*图标的CSS3*/
.list li:hover .icon{
    color: #fff;
    font-size: 50px;
}
.list li .icon {
    color: #fff;
    width: 90px;
    height: 90px;
    margin: 5px 20px 0;
    line-height: 90px;
    text-align: center;
    font-size: 30px;
    background: #259add;
    display: inline-block;
    float: left;
    border-radius: 10px;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
    text-shadow: 0 0 3px #CCCCCC;
}
/*文字部分*/
.text {
    width: 350px;
    float: left;
    margin-top: 16px;
    height: 70px;
}
.text h2 {
    color: #999;
    font-size: 30px;
    font-weight: normal;
}
.text h3 {
    color: #666;
    font-size: 14px;
    font-weight: normal;
}
/*动画效果*/
@-webkit-keyframes moveTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveTop {
    from {
        opacity: 0;
        -moz-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveTop {
    from {
        opacity: 0;
        -ms-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}
@-webkit-keyframes moveBottom {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveBottom {
    from {
        opacity: 0;
        -moz-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveBottom {
    from {
        opacity: 0;
        -ms-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}
/*链接部分*/
.broszhu{border: 1px solid #CCC;}
#home_top {height: 48px;line-height:48px;font-size:18; text-align: center; color:#008CD7;}
#home_bottom {color:#008CD7;text-align:center;font-size:14px;margin-bottom: 50px;}

DEMO2 的如下：

HTML

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <link rel="stylesheet" href="style/move2.css"/>
</head>
<body>
<p class="link">
   <a href="index1.html">DEMO1</a>
   <a href="index2.html" class="active">DEMO2</a>
</p>
<ul class="list">
   <li>
       <div class="border"></div>
       <span class="icon">亚</span>
       <div class="text">
           <h2>关于我们</h2>
           <h3>金三胖是宇宙大战中，地球球长，宇宙总指挥！</h3>
       </div>
   </li>
   <li>
       <div class="border"></div>
       <span class="icon">洲</span>
       <div class="text">
           <h2>联系我们</h2>
           <h3>金三胖的亚洲州长办公室位于地球，朝鲜半岛！</h3>
       </div>
   </li>
   <li>
       <div class="border"></div>
       <span class="icon">洲</span>
       <div class="text">
           <h2>给我们钱</h2>
           <h3>最好给粮食！金三胖最爱吃板面，记得加个蛋！</h3>
       </div>
   </li>
   <li>
       <div class="border"></div>
       <span class="icon">长</span>
       <div class="text">
           <h2>联系方式</h2>
           <h3>以45°角仰望天空，默念三胖你最屌，有机会收到感应！</h3>
       </div>
   </li>
   <li>
       <div class="border"></div>
       <span class="icon">金</span>
       <div class="text">
           <h2>公司路线</h2>
           <h3>对P民无用，P民只能仰望三胖！</h3>
       </div>
   </li>
   <li>
       <div class="border"></div>
       <span class="icon">三</span>
       <div class="text">
           <h2>加入我们</h2>
           <h3>宇宙大战，即将开始，请广大爱国者勇于加入！</h3>
       </div>
   </li>
   <li>
       <div class="border"></div>
       <span class="icon">胖</span>
       <div class="text">
           <h2>准备战斗</h2>
           <h3>宇宙大战，即将开始，请广大爱国者勇于加入！</h3>
       </div>
   </li>
</ul>
<div class="broszhu">
   <h3 id="home_top">HTML5+CSS3实现菜单列表　　-　Powered By <a href="http://taobao.fm/"target="_blank">broszhu</a>　　博客网址：<a href="http://taobao.fm/" target="_blank">taobao.fm</a> </h2>
       <p id="home_bottom">学习JavaScript是一件很有趣的事，可以做出很多自豪的小玩意！--broszhu （这个页面是实现原理：<a href="#" target="_blank">点此查看</a>）</p>
</body>
</html>

CSS 代码如下：

@charset "utf-8";
/*以下是清空样式*/
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-size: 12px;
    font-family: "Microsoft YaHei", 微软雅黑, "SimSun", "Arial Narrow", HELVETICA;
}
ul, ol,li {
    list-style-type: none;
}
select, input, img {
    vertical-align: middle;
}
a {
    text-decoration: none;
}
/*首页背景*/
body {
    background: url("../img/beige_paper.png") left top repeat;
}
/*顶部锚文本区*/
.link {
    padding-top: 10px;
    text-align: center;
}
.link a {
    display: inline-block;
    width: 51px;
    height: 20px;;
    line-height: 20px;
    margin: 0 5px;
    border: 1px solid #BFBFFF;
    border-radius: 3px;
    padding: 0 4px;
    background: #fff;
    color: #f30;
    font-size: 12px;
}
.link a.active {
    background: #259add;
    color: #fff;
}
/*UL列表页*/
.list {
    margin-top: 50px;
    width: 100%;
    height: auto;
}
.list li {
    width: 500px;
    height: 100px;
    margin: 0 auto;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
    transition: 0.3s all ease;
    overflow: hidden;
    position: relative;
}
.list .border{
    height: 100px;
    position: absolute;
    left: 0;top: 0;
    width: 10px;
    overflow: hidden;
    opacity: 0;
    background: #F90;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
}
.list li:hover {
    cursor:pointer;
    background: #000;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
}
.list li:hover .border{
    opacity: 1;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
}
.list li:hover .text h2 {
    color: #fff;
    font-size: 18px;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
}
.list li:hover .text h3 {
    color: #F60;
    font-size: 18px;
    margin-top: 10px;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
}
/*图标的CSS3*/
.list li:hover .icon{
    color: #F90;
    font-size: 50px;
    background: #000;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
}
.list li .icon {
    color: #fff;
    width: 90px;
    height: 90px;
    margin: 5px 20px 0;
    line-height: 90px;
    text-align: center;
    font-size: 30px;
    background: #259add;
    display: inline-block;
    float: left;
    border-radius: 10px;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
    text-shadow: 0 0 3px #CCCCCC;
}
/*文字部分*/
.text {
    width: 350px;
    float: left;
    margin-top: 16px;
    height: 70px;
}
.text h2 {
    color: #999;
    font-size: 30px;
    font-weight: normal;
}
.text h3 {
    color: #666;
    font-size: 14px;
    font-weight: normal;
}
/*链接部分*/
.broszhu{border: 1px solid #CCC;}
#home_top {height: 48px;line-height:48px;font-size:18; text-align: center; color:#008CD7;}
#home_bottom {color:#008CD7;text-align:center;font-size:14px;margin-bottom: 50px;}

关于朱安邦

我叫 朱安邦，阿西河的站长，在杭州。

以前是一名平面设计师，后来开始接接触前端开发，主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术，欢迎大家关注我的 Bilibili。

关注我: Github / 知乎

于2021年离开前端领域，目前重心放在研究区块链上面了

朱安邦的博客

前端开发

网站部署

项目总结

WEB安全

项目周边

浏览器

HTML

浏览器

JavaScript

jQuery

HTTP

百度地图

微信相关开发

WordPress

区块链相关

正则表达式

区块链相关

Meteor

Npm

Vue

React

Electron

Git

Gulp

Github

Gulp

VS Code

WebStorm

Mac And Windows

Linux

Nginx

Node.js

Nginx

Node.js

Express

Egg

PostgreSQL

MongoDb

演示效果

HTML5+CSS3 菜单列表

面试题

学习网站

前端培训自己甄别

前端书籍

关于朱安邦

最新文章

安邦聊前端的视频

前端培训
自己甄别