全屏隐藏菜单特效

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量110 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wzzl/p/4909868.html
版权 
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏隐藏菜单特效</title>
 
    <style type="text/css">
    * { margin: 0px; padding: 0px; }
    body {
        background: #383c55;
        width: 100%; 
        height: 100%;
    }
    #view-code{
      color:#4183d7; 
      font-size:13px;
      text-transform:uppercase;
      font-weight:700;
      text-decoration:none;
      position:absolute;top:640px; left:50%;margin-left:-35px;
    }
    div.screen{
        width:320px;
        height:560px;    
        overflow:hidden;
        position:absolute; 
        top:250px; 
        left:50%;
        margin-left:-160px;
        background:#31558a;
    }

    .list{margin-top:36px; text-align:left;}
    .item{
        height:115px;
        margin-top:30px 0;
        padding-left:115px;
        clear:both;
    }
    .item .img, .item span{background:#214273; border-radius:3px;}
    .item .img{float:left; width:71px; height:71px; margin-left:-93px;}
    .item span{height:11px; width:180px; margin-bottom:19px; float:left;}
    .item span:nth-of-type(3){width:75px; margin-botom:0;}

    div.burger {
        height: 30px; 
        width: 40px;
        position: absolute;
        top: 11px; 
        left: 21px;
        cursor: pointer;    
    }
        div.x,
        div.y,
        div.z {
            position: absolute; margin: auto;
            top: 0px; bottom: 0px;        
            background: #fff;
            border-radius:2px;
            -webkit-transition: all 200ms ease-out;
               -moz-transition: all 200ms ease-out;
                -ms-transition: all 200ms ease-out;
                 -o-transition: all 200ms ease-out;
                    transition: all 200ms ease-out;
        }        
        div.x, div.y, div.z { height: 3px; width: 26px; }
        div.y{top: 18px;}
        div.z{top: 37px;}
        div.collapse{
            top: 20px;
            background:#4a89dc;
            -webkit-transition: all 70ms ease-out;
               -moz-transition: all 70ms ease-out;
                -ms-transition: all 70ms ease-out;
                 -o-transition: all 70ms ease-out;
                    transition: all 70ms ease-out;
        }
         
        
        div.rotate30{
            -ms-transform: rotate(30deg); 
            -webkit-transform: rotate(30deg); 
            transform: rotate(30deg);    
            -webkit-transition: all 50ms ease-out;
               -moz-transition: all 50ms ease-out;
                -ms-transition: all 50ms ease-out;
                 -o-transition: all 50ms ease-out;
                    transition: all 50ms ease-out;                    
        }
        div.rotate150{
            -ms-transform: rotate(150deg); 
            -webkit-transform: rotate(150deg); 
            transform: rotate(150deg);    
            -webkit-transition: all 50ms ease-out;
               -moz-transition: all 50ms ease-out;
                -ms-transition: all 50ms ease-out;
                 -o-transition: all 50ms ease-out;
                    transition: all 50ms ease-out;                    
        }
        
        div.rotate45{
            -ms-transform: rotate(45deg); 
            -webkit-transform: rotate(45deg); 
            transform: rotate(45deg);    
            -webkit-transition: all 100ms ease-out;
               -moz-transition: all 100ms ease-out;
                -ms-transition: all 100ms ease-out;
                 -o-transition: all 100ms ease-out;
                    transition: all 100ms ease-out;                    
        }
        div.rotate135{
            -ms-transform: rotate(135deg); 
            -webkit-transform: rotate(135deg); 
            transform: rotate(135deg);    
            -webkit-transition: all 100ms ease-out;
               -moz-transition: all 100ms ease-out;
                -ms-transition: all 100ms ease-out;
                 -o-transition: all 100ms ease-out;
                    transition: all 100ms ease-out;                    
        }

    div.navbar{height:73px;background:#385e97;}

    div.circle{    
        border-radius: 50%;
        width: 0px;
        height: 0px; 
        position:absolute;
        top: 35px;
        left: 36px;
        background:#fff;
        opacity:1;
        -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
           -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
             -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
                transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);    
    }
    div.circle.expand{
        width:1200px;
        height:1200px;
        top: -560px;
        left: -565px;     
        -webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
           -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
             -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
                transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);                    
        
    }
    div.menu {
        height: 568px; 
        width: 320px;
        position: absolute;
        top: 0px; left: 0px;
    }
    div.menu ul li {
        list-style: none;
        position:absolute;
        top:50px;;
        left:0;
        opacity:0;
        width:320px;
        text-align:center;
        font-size:0px;
        -webkit-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
           -moz-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            -ms-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
             -o-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
                transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    }
    div.menu ul li a {
        color:#4a89dc;
        text-transform:uppercase;
        text-decoration:none;    
        letter-spacing:3px;            
    }

    div.menu li.animate{
        font-size:21px;
        opacity:1;
        -webkit-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
           -moz-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            -ms-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
             -o-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
                transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    }
    div.menu li.animate:nth-of-type(1){    
        top:120px;
        transition-delay: 0.0s;    
    }
    div.menu li.animate:nth-of-type(2){
        top:190px;
        transition-delay: 0.03s;    
                
    }
    div.menu li.animate:nth-of-type(3){
        top:260px;
        transition-delay: 0.06s;        
        
    }
    div.menu li.animate:nth-of-type(4){
        top:330px;
        transition-delay: 0.09s;        
        
    }
    div.menu li.animate:nth-of-type(5){
        top:400px;
        transition-delay: 0.12s;        
        
    }
    div.menu li.animate:nth-of-type(6){
        top:470px;
        transition-delay: 0.15s;    
                
    }
    </style>

    <!--[if IE]>
        <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="htmleaf-container">
        <div class="htmleaf-content">
            <div class="screen">
                <div class="navbar"></div>    
                <div class="circle"></div>
                <div class="menu">
                    <ul>
                        <li><a href="">About</a></li>
                        <li><a href="">Share</a></li>
                        <li><a href="">Activity</a></li>
                        <li><a href="">Settings</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>                        
                <div class="burger">
                    <div class="x"></div>
                    <div class="y"></div>
                    <div class="z"></div>
                </div>    
            </div>    
        </div>
    </div>
    
    <script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js"></script>
    <script>
    if ('ontouchstart' in window) {
        var click = 'touchstart';
    } else {
        var click = 'click';
    }
    $('div.burger').on(click, function () {
        if (!$(this).hasClass('open')) {
            openMenu();
        } else {
            closeMenu();
        }
    });
    $('div.menu ul li a').on(click, function (e) {
        e.preventDefault();
        closeMenu();
    });
    function openMenu() {
        $('div.circle').addClass('expand');
        $('div.burger').addClass('open');
        $('div.x, div.y, div.z').addClass('collapse');
        $('.menu li').addClass('animate');
        setTimeout(function () {
            $('div.y').hide();
            $('div.x').addClass('rotate30');
            $('div.z').addClass('rotate150');
        }, 70);
        setTimeout(function () {
            $('div.x').addClass('rotate45');
            $('div.z').addClass('rotate135');
        }, 120);
    }
    function closeMenu() {
        $('div.burger').removeClass('open');
        $('div.x').removeClass('rotate45').addClass('rotate30');
        $('div.z').removeClass('rotate135').addClass('rotate150');
        $('div.circle').removeClass('expand');
        $('.menu li').removeClass('animate');
        setTimeout(function () {
            $('div.x').removeClass('rotate30');
            $('div.z').removeClass('rotate150');
        }, 50);
        setTimeout(function () {
            $('div.y').show();
            $('div.x, div.y, div.z').removeClass('collapse');
        }, 70);
    }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/wzzl/p/4909868.html

aili1947
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 点击按钮 显示隐藏有动画效果
stm870581942的博客
02-09 2481
css有鼠标移入移出（hover）的动画效果很方便给，但没有鼠标点击的动画效果，vue中有一个transition-group标签能够实现这一功能。 //注意需要加上key <div class="lyric-btn" @click="lyric()">词</div> <transition-group name="lyric"> <div class="lyric-plate" v-if="isLyric" :key="1">qwe</div&gt
很好用的JS左侧导航菜单，滑过显示，移开隐藏
11-25
很好用的JS左侧导航菜单，滑过显示，移开隐藏 很好用的JS左侧导航菜单，滑过显示，移开隐藏
隐藏动画按钮
cyd3136477605的博客
05-17 120
1.先建html文件 2.隐藏设置按钮 3.last 从所有的img标签中选到的最后一个img，选择第一个图片显示，然后在显示下一个 4.显示设置按钮 5.first 从所有的img标签中选到的第一个img，选择第一个图片显示，然后在显示下一个 6.案例结束 ...
夜间模式、全屏，以及虚拟按键的动态隐藏和显示
Android_Daily的专栏
06-28 5933
昨天晚上闲着无聊随便翻了翻书，看到了几个View.SYSTEM_UI_FLAG的相关介绍，顺手敲了下验证之后决定写下来当做记录。 代码如下： package test.lb.com.myapplication; import android.app.Activity; import android.os.Bundle; import android.view.View; im
jQuery/CSS3实现图片层叠展开特效
weixin_30735745的博客
08-15 149
这是一款基于jQuery和CSS3的图片层叠展开特效，让鼠标滑过图片时即可触发这些特效。其中有一款就像扇子展开收拢一样，看起来效果都非常不错。当然本文主要还是来分析一下用jQuery实现这一效果的方法，具体效果可以在在线演示中查看。 你也可以在这里查看在线DEMO演示 说说实现的方法和代码吧，主要由HTML、CSS以及jQuery代码组成。 HTML代码： <div id="...
jQuery炫酷Material Design风格全屏隐藏菜单特效
12-11
这是一款谷歌Material Design风格的炫酷全屏隐藏菜单jQuery特效。该菜单特效开始时以汉堡包图标的形式隐藏菜单，但用户点击汉堡包图标后，菜单会从图标处开始以点击波的形式扩展到全屏，效果非常酷。
手机菜单特效 - jQuery炫酷Material Design风格全屏隐藏菜单特效
11-26
"手机菜单特效 - jQuery炫酷Material Design风格全屏隐藏菜单特效" 是一个专为智能手机和平板电脑设计的UI组件，它利用了流行的jQuery库和Google的Material Design设计理念，为用户提供了一种高效、直观且美观的导航...
CSS3动画过渡全屏导航菜单特效
04-06
本篇将详细探讨"CSS3动画过渡全屏导航菜单特效"这一主题，它利用jQuery和CSS3的优势，为用户提供了独特且引人入胜的界面体验。 首先，CSS3是层叠样式表的第三个版本，它引入了许多新的功能和特性，如选择器、过渡...
CSS3动画过渡全屏导航菜单特效.zip
07-04
【CSS3动画过渡全屏导航菜单特效】是一个利用现代Web技术，特别是CSS3和jQuery，设计的创新性网页导航方案。这个特效的核心在于其全屏布局和动态过渡效果，为用户提供了一种引人注目的交互体验。以下是相关知识点的...
jQuery全屏背景图片导航菜单特效代码
03-20
【jQuery全屏背景图片导航菜单特效代码】是一种适用于现代网页设计的高级技术，它结合了jQuery库和全屏背景图片的视觉效果，旨在为用户提供一个响应式的导航菜单，无论是在桌面还是移动设备上都能提供良好的用户体验...
IOS上传竖向图片会旋转90度的解决办法
gaiery的博客
09-18 4427
原因：iOS手机竖着拍出的照片被添加了一个顺时针旋转90°的拍照方向； 解决：读取图片的拍照方向信息，纠正至正确的方向。 参考地址：http://code.ciaoca.com/javascript/exif-js/ 获取图片Orientation参数，=6是正常竖向拍摄，=3是横线拍摄-180度，=8是竖向-180度拍摄。 以下为获取方法： //解决IOS上传竖向照片会旋转90度的问题 ro...
CSS旋转动画（jQuery添加class）
欢迎交流PHP和前端知识QQ：634487911
10-25 371
<script> $("#p2 .p2_div_four").hover(function () { $(this).find("img").addClass('p2_div_four_hover'); }, function () { $(this).find("img").removeClass('p2_div_four_hover...
jQuery和css3控制箭头丝滑旋转
xiaozhen0610的博客
07-29 614
问题： 我们经常会遇见点击一个小三角使之丝滑的旋转180度上下旋转，怎么实现呢,需要css3搭配jq 来处理 如图：1.点击前 2.点击后（效果丝滑旋转） 1.html 页面内容 <div class="user-list-title">标准点播-<small>体验版</small> <img src="http://i1.letvimg.com/lc07_lecloud/201610/09/11/32/userC...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 630
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1259
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 445
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 245
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
全屏页面切换特效
05-26
以下是一个简单的全屏页面切换特效的示例代码，可以用来实现网站的页面切换效果。代码中使用了 jQuery 和 CSS3 动画效果。 HTML 代码： ``` <div class="page-container"> <div class="page" id="page1"> <h1>Page 1</h1> <p>This is the first page.</p> </div> <div class="page" id="page2"> <h1>Page 2</h1> <p>This is the second page.</p> </div> <div class="page" id="page3"> <h1>Page 3</h1> <p>This is the third page.</p> </div> </div> ``` CSS 代码： ``` body { margin: 0; padding: 0; overflow: hidden; } .page-container { position: relative; width: 100%; height: 100%; } .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .page.active { display: block; } .page.in { animation: fadeIn 1s ease-in-out; } .page.out { animation: fadeOut 1s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } ``` JavaScript 代码： ``` $(document).ready(function() { showPage($("#page1")); $(".nav-link").click(function(event) { event.preventDefault(); var page = $($(this).attr("href")); showPage(page); }); }); function showPage(page) { $(".page.active").addClass("out"); setTimeout(function() { $(".page.active").removeClass("active out"); page.addClass("in active"); }, 1000); } ``` 在这个示例中，页面通过一个包含多个子页面的容器来实现。每个子页面都是一个具有唯一标识符的 DIV 元素，并且通过 CSS 的绝对定位来覆盖整个容器。每个页面的默认状态是隐藏的，只有在它们被激活时才会显示。 当用户点击导航链接时，JavaScript 代码会获取目标页面的 ID 并使用 showPage() 函数来切换页面。该函数首先将当前活动页面标记为“out”，然后使用 CSS 动画效果淡出该页面。在动画完成后，该页面的“active”和“out”类都被删除，而目标页面则被标记为“in”和“active”，并使用 CSS 动画效果淡入。 此外，该代码还使用了 jQuery 和 CSS3 动画效果来实现页面切换效果。在这个示例中，我们使用了“fadeIn”和“fadeOut”动画，它们分别在页面淡入和淡出时播放。 以上就是一个简单的全屏页面切换特效的示例代码，你可以根据自己的需要进行修改和定制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值