怎么使页面div慢慢的出现，从右边淡出来

最新推荐文章于 2023-08-04 18:17:12 发布

JoeyLee（李同学）

最新推荐文章于 2023-08-04 18:17:12 发布

阅读量773

点赞数

分类专栏： css 文章标签： htnl html页面进入有一种特效

本文链接：https://blog.csdn.net/qq_41974008/article/details/99695560

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

怎么使页面div慢慢的出现，从右边淡出来

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的世界之jQuery在线视频弹出播放</title>
    <!--可无视-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--可无视-->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--主要样式-->
    <style type="text/css">
        body {
            background-color: #2F4F4F
        }

        .videolist {
            position: relative;
            float: left;
            width: 500px;
            height: 300px;
            margin-right: 50px;
            margin-top: 15px;
            margin-bottom: 30px;
        }

        .videolist:hover {
            cursor: pointer;
        }

        .videoed {
            display: none;
            width: 50px;
            height: 50px;
            position: absolute;
            left: 45%;
            top: 45%;
            z-index: 99;
            border-radius: 100%;
        }

        .videos {
            display: none;
            border: 1px solid #080808;
            position: fixed;
            left: 50%;
            top: 49%;
            margin-left: -320px;
            margin-top: -210px;
            z-index: 100;
            width: 640px;
            height: 360px;
        }

        .vclose {
            position: absolute;
            right: 1%;
            top: 1%;
            border-radius: 100%;
            cursor: pointer;
        }

        .vtit {
            color: #d0d0d0;
        }

        .vtime {
            color: #d0d0d0;
        }

        /*这段代码会使整个页面渐渐出现一种办法特效感*/
        .an {
            animation: anim 5s;
        }

        @keyframes anim {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        /*这段代码会使整个页面渐渐出现一种办法特效感end*/

    </style>
</head>
<body class="an">

<div class="video">
    <div class="container" style="margin-top: 100px">
        <div class="videolist" vpath="v1.jpg"
             ipath="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4">
            <div class="vtit">视频一</div>
            <img src="img/v1.jpg" width="540px" height="300px"/>
            <div class="vtime">2019-06-22</div>
            <img src="img/play.png" class="videoed">
        </div>
        <div class="videolist" vpath="v2.jpg"
             ipath="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4">
            <div class="vtit">视频二</div>
            <img src="img/v2.jpg" width="540px" height="300px"/>
            <div class="vtime">2019-06-26</div>
            <!--            播放图标-->
            <img src="img/play.png" class="videoed">
        </div>

        <div class="videos"></div>
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $('.videolist').each(
        function () { //遍历视频列表
            $(this).hover(
                function () { //鼠标移上来后显示播放按钮
                    $(this).find('.videoed').show();//显示
                },
                function () {
                    $(this).find('.videoed').hide();//隐藏
                });
            $(this).click(
                function () { //这个视频被点击后执行
                    var img = $(this).attr('vpath');//获取视频预览图
                    var video = $(this).attr('ipath');//获取视频路径
                    $('.videos').html("<video id=\"video\" poster='" + img + "' style='width: 640px' src='" + video + "' preload=\"auto\" controls=\"controls\" autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"img/gb.png\" width=\"25\" height=\"25\">");
                    $('.videos').show();
                });
        });

    function close1() {
        var v = document.getElementById('video');//获取视频节点
        $('.videos').hide();//点击关闭按钮关闭暂停视频
        v.pause();
        $('.videos').html();
    }
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
    <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
    <p>来源：<a href="http://down.admin5.com/" target="_blank">A5源码</a></p>
</div>
</body>
</html>

JoeyLee（李同学）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
怎么使页面div慢慢的出现，从右边淡出来

怎么使页面div慢慢的出现，从右边淡出来<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="...
复制链接

扫一扫

专栏目录