单击后如何使启动页面div褪色 [英] How to make the splash page div fade after being clicked
问题描述
This is my first post - anyways - I was referencing this original ask Welcome screen before website loads (Click to enter) [Splash Screen]
按照我在其中创建两个单独的div的第二个答案的说明进行操作之后，我需要帮助弄清楚如何在用户单击初始时/之后如何使用javascript更改初始div的可见性.
After following the instructions of the second answer where I created two seperate divs I need help figuring out how to use javascript to change the visibility of the splash div when/after the user clicks through the splash.
我对代码有相当基本的了解，但对其他方面却不多，但我很擅长掌握概念.这是到目前为止我得到的:
I have a pretty basic understanding of code and not much else but I'm decent at picking up concepts. Here's what I've got so far:
<!Splash html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
padding: 0
}
div#splash {
max-width: 100%;
height: 100%;
background-image: url("brightsplash.jpg");
background-repeat: no-repeat;
background-size: cover;
}
div#post-splash {
display: none;}
</style>
<div id="splash">
</div>
<div id="post-splash"></div>
<h1>Taylor Forrest</h1>
<h2>photography</h2>
<h2>About</h2>
<h2>Portfolio</h2>
<h2>Contact</h2>
</html>
推荐答案
带有卧底复选框的纯CSS(无javascript)替代方法:
Pure CSS (no javascript) alternative with undercover checkbox:
html {
width: 100%;
height: 100%;
background: lavender;
text-align: center;
font-family: arial, sans-serif;
}
input {
display: none;
}
#target {
opacity: 0;
background-color: rosybrown;
background: url('http://i.imgur.com/P9L9jzT.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
#click:checked ~ label > #target {
opacity: 1;
z-index: 200;
cursor: pointer;
pointer-events: auto;
}
#replay {
color: crimson;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 20px;
cursor: pointer;
}
#warning {
color: white;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}<input type="checkbox" id="click" checked/>
<label for="click">
<div id=target><h1 id=warning>WELCOME</h1></div>
<span id=replay><small>-replay-</small></span>
</label>
<p>page content</p>这篇关于单击后如何使启动页面div褪色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
