如何将div保留在同一位置并同时响应视频？

时间：2018-09-23 16:38:03

标签： html5 css3 bootstrap-4 html5-video angular6

我正在建立一个临时站点，但我想使其变得很棒...

几件事：

  1. 我在移动的水夹下使用电影剪辑（看起来很酷）
  2. 无论观察口的大小如何，电影胶片都必须始终具有消失点，即卡在海洋和夜空上
  3. “聚光灯”必须始终挂在地平线上，这是我们与胶片一起前往“好莱坞！”的要点。

顺便说一句：到目前为止，Bootstrap 4和ANGULAR 6.1尚未使用，这是一个简单的网站登录页面。我要尝试做的是将影片剪辑“置于”胶片带的框架内，并使胶卷夹朝着水平线前进。

我很快将在我的公共GIT上提供此功能...但是看看。这是给好莱坞的制作公司的。

这是我专用的1and1.com服务器上的站点，我在那里有一个BITBUCKET ...如果您愿意，我可以授予该分支的访问权限...我将向任何可以帮助我的人提供信用社区项目。

DREAMSTREET ENTERTAINMENT TEST SITE

这是CSS！

/ * 要更改此许可证标题，请在“项目属性”中选择“许可证标题”。 要更改此模板文件，请选择“工具” |“工具”。范本 并在编辑器中打开模板。 / /     创建于：Sep 22，2018，8:03:37 PM     作者：PeterB * / 

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
    position: fixed;
    height: 31.25rem;
    margin-left: -318px;
    left: 76px;
    top: 20.65rem;
    opacity: .35;
    bottom: 0;
    width: 100%;
    padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #ddd;
    color: black;
}


/* Spots */
.spot1 {
    left: 55%;
    -webkit-animation: move 5s infinite;
    -webkit-filter: blur(10px);
    /* Chrome, Opera, etc. */
    filter: url('blur.svg#blur');
    /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
    filter: blur(10px);
    /* Firefox 35+, eventually all */
}

.spot2 {
    left: 60%;
    -webkit-animation: move2 5s infinite;
    -webkit-filter: blur(10px);
    /* Chrome, Opera, etc. */
    filter: url('blur.svg#blur');
    /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
    filter: blur(10px);
    /* Firefox 35+, eventually all */
}

.spotlight {
    position: fixed;
    height: 0px;
    border-top: 490px solid rgba(255, 255, 102, 1.25);
    border-radius: 45px;
    border-left: 40px solid transparent;
    border-bottom: 0px solid #575;
    border-right: 40px solid transparent;
    box-shadow: rgba(128, 128, 128, 1.2) 0px 2px 3px, inset rgba(128, 128, 128, 1.2) 0px -5px 2px;
    background-color: transparent;
    bottom: 496px;
    left: 347px;
    -webkit-transform-origin: 50% 100% 0;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: .25;
    z-index: 0;
}
@-webkit-keyframes move {
    0% {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    50% {
        -webkit-transform: rotate(-30deg);
        -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    100% {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
}

@-webkit-keyframes move2 {
    0% {
        -webkit-transform: rotate(-30deg);
        -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    50% {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    100% {
        -webkit-transform: rotate(-30deg);
        -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
}
/* Movie Clips */
.tencomms {
    top: 10px;
    left: 10px;
    height: 50px;
    width: 50px;
    opacity: .25;
    z-index: 0;
}

这是HTML 

<!DOCTYPE HTML>
<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]--> 
<!--[if IE 7 ]> <html lang="en" class="ie ie7"> <![endif]--> 
<!--[if IE 8 ]> <html lang="en" class="ie ie8"> <![endif]--> 
<!--[if IE 9 ]> <html lang="en" class="ie ie9"> <![endif]--> 
<!--[if !IE]><!--> 
<html lang="en"> 
    <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title>Dreamstreet Entertainment | Coming Soon!!!</title>
        <meta name="description" content="Dreamstreet Entertainment | New Landing Page Countdown">
        <meta name="author" content="webthemez">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold">
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <link href="css/dsent-custom.css" rel="stylesheet" type="text/css"/>
    </head>
    <body id="home">
        <div>
            <video autoplay muted loop id="myVideo">
                <source src="media/moon-over-ocean-night.mp4" type="video/mp4">
            </video>
        </div>
        <div class="tencomms">
            <video autoplay muted loop id="myVideo">
                <source src="media/movie-clips-montage.mp4" type="video/mp4">
            </video>
        </div>
        <div class="content">
            <img src="images/film-strip-clearer-duller.png" class="img-fluid" alt=""/>
        </div>
        <div class="spotlight spot1"></div>
        <div class="spotlight spot2"></div>
        <div class="tencomms"></div>
        <section class="big-background">
            <!--<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=V9kBhyCWjGY',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>-->
            <!-- The video -->
            <div id="header">
                <div class="wrapper">
                    <h1><a href="#" class="logo">Dreamstreet Entertainment</a></h1>
                </div>
            </div>
            <div id="Content" class="wrapper">
                <div class="countdown styled"></div>
                <h2 class="intro">We are currently working on an amazing, new, and fresh website.<br>Stay Tuned</h2>
                <!--
                <div id="subscribe">
                    <form method="POST" action="subscribe.php">
                        <p><input type="text" name="Email" size="20" value="" placeholder="Subscribe your e-mail Id"><input type="submit" value="Submit" name="Submit"></p>
                    </form>
                    <div id="socialIcons">
                        <ul>
                            <li><a href="" title="Twitter"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="" title="facebook"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="" title="linkedIn"><i class="fa fa-linkedin"></i></a></li>
                            <li><a href="" title="Pintrest"><i class="fa fa-google-plus"></i></a></li>
                        </ul>
                    </div>
                </div>
                -->
            </div>
        </section>
        <footer class="tempBy">&copy;2018 - Dreamstreet Entertainment, LLC - All Rights Reserved | Site powered by: <a href="http://www.webparity.net" target="_blank">WebParity.net</a></footer>
        <!--Scripts-->
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script src="js/jquery.mb.YTPlayer.js"></script>
        <script type="text/javascript" src="js/jquery.countdown.js"></script>
        <script src="js/custom.js"></script>
    </body>
</html>

其他部分可以通过HTML PAGE上的源代码获得

0 个答案:

没有答案
相关问题
最新问题