HTML5滑动门动画（侧滑，上滑）

最新推荐文章于 2021-06-15 14:15:14 发布
最新推荐文章于 2021-06-15 14:15:14 发布
阅读量4.4k 收藏 7
点赞数 1
分类专栏： HTML5 文章标签： html5侧滑动画 html5上滑动画 html5滑动门动画 html5动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishengko/article/details/55517706
版权

HTML5的动画是通过伪类@实现的，设置动画的起始位置，结束位置，动画时间即可，中间的过度HTML会自动补齐，简单的代码就可以实现炫酷动画效果。
实例：
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <!-- 移动端适配   全屏  支持屏幕放大缩小的倍率 -->
    <meta name="full-screen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>动画</title>
    <style type="text/css">
        .animate,.animated {
            -webkit-animation-duration: .5s;/*动画时长*/
            animation-duration: .5s;
            -webkit-animation-fill-mode: both;/*动画模式*/
            animation-fill-mode: both;

        }
        /*元素初始位置为屏幕下方300像素*/
        .bottom{background-color:#333;width:100%;z-index:100;color:#515151;height:300px;position: absolute;bottom: -300px;}
        /*opacity  透明度（渐显，渐隐）  translate 偏移量*/
        /*上滑 直接实现  元素位置位于屏幕下方300像素*/
        @-webkit-keyframes fadeInUp {
            0% {
                 opacity: 0;
                -webkit-transform: translateY(0);/*起点位置即为元素位置*/
                transform: translateY(0);
            }

            100% {
                 opacity: 1;
                -webkit-transform: translateY(-300px);/* 终点位置为起始位置上移300像素*/
                transform: translateY(-300px);
            }
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            100% {
                opacity: 1;
                -webkit-transform: translateY(-300px);
                transform: translateY(-300px);
            }
        }   
        .fadeInUp {
            -webkit-animation-name: fadeInUp;
            animation-name: fadeInUp;
        }
        /*元素初始位置为屏幕下方*/ 
        .bottom1{background-color:#333;width:100%;z-index:100;color:#515151;height:300px;position: absolute;display:none;bottom: 0px;}              
        /*上滑1  先将元素下移至屏幕下方300像素在上移 */
        @-webkit-keyframes fadeInUp1 {
            0% {
                 opacity: 0;
                -webkit-transform: translateY(300px);/*起点位置元素初始位置下移300像素*/
                transform: translateY(300px);
            }

            100% {
                 opacity: 1;
                -webkit-transform: translateY(0);/* 向上移300像素*/
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp1 {
            0% {
                opacity: 0;
                -webkit-transform: translateY(300px);
                transform: translateY(300px);
            }

            100% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
        }   
        .fadeInUp1 {
            -webkit-animation-name: fadeInUp1;
            animation-name: fadeInUp1;
        }

        /* 侧滑 显示*/
        @keyframes fadeInRight {
            0% {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }

            100% {
                -webkit-transform: translateX(120px);/* 左移120像素*/
                transform: translateX(120px);
            }
        }

        @-webkit-keyframes fadeInRight {
            0% {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }

            100% {
                -webkit-transform: translateX(120px);
                transform: translateX(120px);
            }
        }
        .fadeInRight {
            -webkit-animation-name: fadeInRight;
            animation-name: fadeInRight;
        }   

        /* 侧滑 隐藏*/
        @keyframes fadeOutLeft {
            0% {
                -webkit-transform: translateX(120px);
                transform: translateX(120px);
            }

            100% {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
        }

        @-webkit-keyframes fadeOutLeft {
            0% {
                -webkit-transform: translateX(120px);
                transform: translateX(120px);
            }

            100% {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
        }               
        .fadeOutLeft {
            -webkit-animation-name: fadeOutLeft;
            animation-name: fadeOutLeft;
        }       
        *{margin: 0;padding: 0;list-style: none;}
        html{overflow:hidden;}
        body{background-color: #f4f4f4;font-size: 18px;color:white;font-family: Microsoft YaHei;overflow: hidden;height: 100%;}
        #nav{width: 120px;color: white;background-color: #333;height: 100%;position: fixed;top: 0;left: -120px;}
        .header{box-shadow: 0px 1px 2px #999;top:0;z-index:100;position:fixed;width:100%;background-color:white;/* background: -webkit-linear-gradient(bottom,#9b2413,#c94323);background: linear-gradient(bottom,#9b2413,#c94323); */height: 50px;text-align: center;color: #555;}
        .header b{display:inline-block;padding:3px;/* background: -webkit-linear-gradient(bottom,#9a2413,#cd3419); */font-size:38px;line-height:42px;text-align:center;color: #555;height: 38px;width: 30%;margin-left:20px;margin-top:2px;border-radius:5px;box-shadow: inset 0 1px 2px rgba(0,0,0,0.2),0px 1px 0 rgba(100,100,100,0.2);-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2),0px 1px 0 rgba(100,100,100,0.2);}
        .header b.on{background: rgba(0,0,0,0.3);color: white;}
        .header span{text-align: center;line-height: 50px;font-size: 16px;}

    </style>
</head>

<body>
    <div class="nav animate" id="nav">
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
        </ul>
    </div>
    <div class="body animate">
        <div class="header">
            <b class="menu" id="menu"><span>侧滑</span></b>
            <b class="menu" id="top"><span>上滑</span></b>
            <b class="menu" id="top1"><span>上滑1</span></b>
        </div>
    </div>
    <div class="bottom animated">上滑</div>
    <div class="bottom1 animated">上滑1</div>
</body>
<script src="http://www.zeptojs.cn/zepto.min.js"></script>
<script type="text/javascript">

$(function(){
    //屏幕高度自适应
    $("body").height($(window).height());
    //侧滑
    $("#menu").click(function(){
        if(!$(this).hasClass("on")){
            $(this).addClass("on");
            $(".animate").removeClass("fadeOutLeft").addClass("fadeInRight");
        }
        else{
            $(this).removeClass("on");
            $(".animate").removeClass("fadeInRight").addClass("fadeOutLeft");
        }
    });
    //上滑
    $("#top").click(function(){
        if(!$(this).hasClass("on")){
            $(this).addClass("on");
            $(".bottom").addClass("fadeInUp").show();
        }
        else{
            $(this).removeClass("on");
            $(".bottom").removeClass("fadeInUp").hide();
        }
    });
    //上滑1
    $("#top1").click(function(){
        if(!$(this).hasClass("on")){
            $(this).addClass("on");
            $(".bottom1").addClass("fadeInUp1").show();
        }
        else{
            $(this).removeClass("on");
            $(".bottom1").removeClass("fadeInUp1").hide();
        }
    });
})
</script>
</html>
lishengko
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js+html5实现侧滑页面效果
10-19
标题中的“js+html5实现侧滑页面效果”是指利用JavaScript和HTML5技术来创建一个具有侧滑导航功能的网页布局。这样的设计常见于移动应用和响应式网站中，允许用户通过滑动屏幕边缘来显示或隐藏侧边栏菜单。 在描述...
CSS样式上下左右渐变出现
木神不木的博客
04-07 5014
CSS样式上下左右渐变出现 /**进入延迟时间及完成时间*/ .animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-delay: .
39.html5的动画（animation）
越努力越幸运的博客
05-04 2612
文章目录html5的动画（animation）动画的定义（@keyframes（关键帧））动画的调用（使用）animation-iteration-count（动画执行的次数）animation-direction(动画执行的方向）animation-play-state（动画的执行状态）animation-fill-mode（动画的填充模式）animation的简写 html5的动画（animation） animation（动画）和transition（过渡）其实差不多，就是一个自己会动（动画），一个需
html怎么设置左偏移量,animate.css - 如何更改位置偏移量（例如在fadeInUp中）？
weixin_34569101的博客
06-15 988
我安装了animate.css，我很满意。只有一件事我无法改变：职位变化的数量。特别是我使用动画“fadeInUp”，并希望从什么时候改变褪色开始。目前它太多了。我检查了css文件，但我发现的唯一问题是：@-webkit-keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: ...
Html5_animation动画
Android___vv的博客
10-08 1442
html> html> head lang="en"> meta charset="UTF-8"> title>title> style> @keyframes rotate { from { /* 动画刚开始，角度 */ transform: rotate(0deg)
css实现静态图片实现上下滑动动画效果
qq_42400946的博客
11-19 4328
css实现静态图片实现上下滑动动画效果css代码html总结 css代码 可以滑动理解为一点路程，设置点1的位置，点2为运行到中间的位置，点3为最后停止的位置。css菜鸟教程中说这种动画是基于一段时间逐渐改变元素的css样式实现。 注意: @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器. 点1————点2——————点3 .more img{width:25px; animation: myMove 2s infinite; -webkit-animation: m
html5触屏手机侧边栏滑动导航菜单动画特效
09-14
"html5触屏手机侧边栏滑动导航菜单动画特效"是一个针对触摸设备优化的交互设计，旨在提供用户友好的导航体验。这个特效通常应用于响应式网站或者移动应用，通过滑动手势从屏幕边缘拉出或隐藏侧边栏菜单，使得用户...
html5触屏滑动侧边栏导航菜单特效
04-06
HTML5触屏滑动侧边栏导航菜单特效是一种在现代网页设计中常见的交互元素，尤其在响应式设计中，它能提供优秀的用户体验，使用户在移动设备上更方便地访问网站内容。这种特效利用了HTML5的新特性以及jQuery库的强大...
html5 滑动页面切换tab
02-18
HTML5滑动页面切换Tab是现代网页设计中常见...总结来说，HTML5滑动页面切换Tab是一种结合了HTML5新特性、CSS3动画和JavaScript事件处理的交互设计。通过合理运用这些技术，开发者可以创建出既美观又高效的移动端网页。
MUI 实现侧滑菜单及其主体部分上下滑动的方法
08-28
下面小编就为大家分享一篇MUI 实现侧滑菜单及其主体部分上下滑动的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html5 鼠标滑动页面动画效果,鼠标滑动到当前页面触发动画效果
weixin_35772420的博客
06-03 4655
近年来，关于鼠标滑动到当前页面从而触发动画效果十分的火热，今天我们就来学习下这一效果。一、首先，我们先来了解一下这一效果实现的原理1.一个网页离不开基本的布局，所以首先就是要先用html将所需要的结构布局出来(长页风格)。2.另外，这一效果的实现主要是结合css3的自定义动画(animation)来实现的。所以，这一阶段，就需要将你所想要实现的动画效果用css3样式实现出来。3.最后，这也是最重要...
css 怎样给div下拉菜单添加过渡动画效果
08-17 7233
css transition可以让元素的属性在变化的时候有一些动画效果 比如高度从30变成300,这样就会让人机交互更自然，比如鼠标经过下拉菜单显示之类的 通过transition可以给指定属性添加动画效果 请看代码 transition: all 表示所有属性，当然，你可以根据自己需要指定某些属性，比如width 500ms表示的是从开始到结束过渡的时间 <!DOCTYPE html&...
html+fadein动画,使用Animate.css制作超炫的CSS3动画
weixin_30350469的博客
06-09 623
如何使用首先引入animate css文件。然后给指定的元素加上指定的动画class样式名。这里包括两个class名，第一个是基本的，也是必须添加的样式名，任何想实现的元素都得添加这个样式。第二个是指定的动画样式名，也就是想要什么动画效果，指定对应的动画样式名称就可以。如果想让动画循环则可以加入样式：infinite 。Animate.css提供了以下多种动画效果可以直接作为class样式添加使用...
前端页面html5的动画技术
凌晨港口
04-28 961
前端动画技术概述 目前的用于html5的动画技术： DOM元素的位置、颜色、透明度、可见度等等属性变换 CSS3 中有部分属性定义DOM元素的一些变换，主要是 Animation（动画），Transform（转换）， Transition（过渡） SVG 矢量绘图技术，本身也属于DOM元素 Canvas 更底层的绘图技术 如果追忆历史的话，以前独霸web天下的Flash技术，还有...
HTML5 使用CSS3动画代替jQuery的animate()以增加其执行效率
木头的博客
07-21 2293
使用jQuery动画比较方便，其带来的缺点是执行效率比较低，在电脑上某些场景会卡顿，更别说在手机上了。 所以为了解决动画的流畅度问题，我使用了CSS3的动画属性。 $(".image_room3").css({ "opacity":"1", "transform":"translateY(-267px)", "-ms-transform&quot
CSS3 Transitions, Transforms和Animation使用简介与应用展
weixin_30692143的博客
07-08 279
CSS3 Transitions, Transforms和Animation使用简介与应用展 原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]本文地址：http://www.cssk8.com/html/css_Tutorial/201101/22-2570.html 一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进...
图片的动画效果（淡出，淡入，显示，隐藏等....外加左右移动）（HTML5）
热门推荐
下午茶的博客
10-10 2万+
先来张图： 来一张效果图，其他就不一一展示了，代码都在下面： 代码如下： html> html lang="en"> head> meta charset="UTF-8"> title>下午练习title> script type="application/javascript" src="jquery.1.12.4.js">script>
自己动手实现一个从底部往上滑的动画 (css3的 animation实现)
LYR 的博客
03-05 5461
<style> .post-list-row{ animation: post-list-row .9s; -webkit-animation: post-list-row .9s; } /*自定义动画*/ @keyframes post-list-row { ...
html5_css3 滑动动画
milijiangjun的博客
05-24 1万+
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;从左滑出&lt;/title&gt; &lt;style&gt; div{ margin:200px; width:150px; height:100px; background:
html5 上下滑动
最新发布
05-31
在HTML5中，上下滑动通常指的是网页的滚动。你可以使用CSS属性 `overflow` 来控制网页内容的滚动方式。具体来说，如果要在网页上启用垂直滚动，可以将某个元素的 `overflow-y` 属性设置为 `scroll` 或 `auto`。例如，以下CSS代码将启用一个高度为300像素、垂直滚动的容器： ``` .container { height: 300px; overflow-y: scroll; } ``` 这样在网页中，当这个容器内的内容超出了300像素的高度，就会自动出现垂直滚动条，用户就可以通过滚动条来上下滑动容器内容了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值