html5点击文字从右侧滑出层的代码

单用css应该不太容易，用js吧

    windowonload = function () {//因为是放在最前面，元素没有加载完成所以要加上windowonload表示加载完成

        windowbtn = documentgetElementById('menubtn');//通过ID来获取菜单打开按钮（文字均可实现）

        windowmenu = documentgetElementById('menu');//通过ID来获取菜单主体

        btnaddEventListener("click", menuClick);//绑定事件：点击的时候触发函数

    };

    function menuClick() {

//思路：当现在菜单是关闭的时候点击按钮菜单CSS动画显示，然后添加class “open”，删除class “close”

//     当现在菜单是打开的时候点击按钮菜单CSS动画消失，然后添加class “close”，删除class “open”

        if (btnclass === "open") {

            menuclassListadd('slide-to-right-and-hide');

            menuclassListremove("open");

            menuclassListadd("close");

        }

        else {

            menuclassListadd('slide-to-left-and-show');

            menuclassListremove("close");

            menuclassListadd("open");

        }

    }

</script>

<style>

    #menu {

        position: fixed; / 永远悬浮在一个地方 /

        top: 0;

        opacity: 0;

        right: -500px; / 保证全部都被遮盖 /

        width: 500px;

        height: 100vh; / 高度为整个页面高度 /

        background: black; / 方便观察 /

        -webkit-animation-duration: 1s;

        animation-duration: 1s;

        -webkit-animation-fill-mode: both;

        animation-fill-mode: both;

    }

    #menubtn {

        position: fixed;

        top: 0;

        right: 0;

        height: 10px;

        width: 10px;

        background: black;

    }

    @keyframes slide-to-left-and-show {

    from {

        opacity: 0 !important;

        right: -500px !important;

    }

    to {

        opacity: 1 !important;

        right: 0px !important;

    }

    } / 打开动画 /

    slide-to-left-and-show {

        animation-name: slide-to-left-and-show; / 使用动画 /

        opacity: 1 !important;

        right: 0px !important;

    }

    @keyframes slide-to-right-and-hide {

    from {

        opacity: 1 !important;

        right: 0px !important;

    }

    to {

        opacity: 0 !important;

        right: -500px !important;

    }

    } / 关闭动画 /

    slide-to-right-and-hide {

        animation-name: slide-to-right-and-hide; / 使用动画 /

        opacity: 0 !important;

        right: -500px !important;

    }

</style>

<div id="menubtn"></div>

<div id="menu"></div>

如果有不懂的可以继续追问哦，纯手打，累死人了代码编辑，求采纳QAQ

下面两种效果 ，一种是鼠标移走后回原位，一种是鼠标移上去的时候文字像右边滑动30px 滑动完了之后再滑到原位

<div class="demo1">我是黎明</div>

      <div class="demo2">我是黎明</div>

      <style>

        demo1{transition: 1s;}

        demo1:hover{margin-left:30px;}

        demo2:hover

        {

        animation: myfirst 1s;

        -moz-animation: myfirst 1s; / Firefox /

        -webkit-animation: myfirst 1s;  / Safari 和 Chrome /

        -o-animation: myfirst 1s; / Opera /

        }

        @keyframes myfirst{

          0% {margin-left: 0px;}

          50% {margin-left: 30px;}

          100% {margin-left: 0px;}

        }

        @-moz-keyframes myfirst / Firefox /

        {

          0% {margin-left: 0px;}

          50% {margin-left: 30px;}

          100% {margin-left: 0px;}

        }

        @-webkit-keyframes myfirst / Safari 和 Chrome /

        {

          0% {margin-left: 0px;}

          50% {margin-left: 30px;}

          100% {margin-left: 0px;}

        }

        @-o-keyframes myfirst / Opera /

        {

          0% {margin-left: 0px;}

          50% {margin-left: 30px;}

          100% {margin-left: 0px;}

        }

      </style>

把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了，具体的democan参见demo。

循环动画由几幅画面构成，要根据动作的循环规律确定。但是，只有三张以上的画面才能产生循环变化效果，两幅画面只能起到晃动的效果。

在循环动画中有一种特殊情况，就是反向循环。比如鞠躬的过程，可以只制作弯腰动作的画面，因为用相反的循序播放这些画面就是抬起的动作。掌握循环动画制作方法，可以减轻工作量，大大提高工作效率。因此在动画制作中，要养成使用循环动画的习惯。

物体的变化，可以分解为连续重复而有规律的变化。因此在动画制作中，可以尽制作几幅画面，然后像走马灯一样重复循环使用，长时间播放，这就是循环动画。

动画中的常用方法：

动画中常用的虚线运动、下雨、下雪、水流、火焰、烟、气流、风、电流、声波、人行走、动物奔跑，鸟飞翔，轮子的转动，机械运动以及有规律的曲线运动、圆周运动等等，都可以采用循环动画。

但事情总是一分为二的，循环动画的不足之处就是动作比较死板，缺少变化。为此，长时间的循环动画，应该进一步采用多套循环动画的方式进行处理。

Java图形界面（GUI）设计中，有个命令按钮类Button（位于javaawt包中），"获取按钮对象的标题文本"的方法是

getLable()

Java图形界面（GUI）设计中，有个标签类Label（位于javaawt包中），“获取标签对象的标题文本”的方法又是

getText()

如果对您有帮助，请记得采纳为满意答案，谢谢！祝您生活愉快！

vaela

引起修改维护巨大工作量的原因就是html5标准未在各个浏览器上标准统一实现，各个浏览器加入了自己的前缀来实现支持，这就造成了实际开发中去对各个浏览器兼容而产生了巨大的工作量。而解决这一问题的办法无疑是去用javascript来规避浏览器前缀带来的麻烦。

以上就是关于html5点击文字从右侧滑出层的代码全部的内容，包括:html5点击文字从右侧滑出层的代码、css3里怎么使hover先后执行两条动画、css3循环动画在第一次执行的时候可以设置多少秒之后开始执行，但到了下一次开始执行的间隔时间怎么设置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！