Question

我是一个CSS初学者所以请不要笑！ :)我试过几乎everthing但它没有帮助。我的中间盒子需要与其他盒子的尺寸相同，并且它需要处于相同的位置 This is the problem请给出你的意见并快速因为我没有时间......谢谢！因为我的文字太短，我无法上传它我会添加更多的文字。对不起因为我不会说英语真的很好。还有一件事......当我用Javascript单击按钮时，如何让这些框慢慢显示。我不希望它在JQuery中！

*{
    margin:0;
    padding:0;
}

#left {
	float:left;
	display: block;
  display: inline-block;
  width: 300px;
  border: 3px solid #0080ff;
  padding: 20px;
  margin: 56px;
	vertical-align:-200%;
	font-family:arial;
	border-radius:25px;
	color:white;
	text-shadow: 2px 1px #0080ff;
	font-style: oblique;
	letter-spacing:1px;
	font-size:18;
	background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg');
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}

#middle {
	-moz-box-align: center;
	top: 50%;
	position: relative;
	margin-top: -50px;
	display:block;
  display: inline-block;
  width: 300px;
  border: 3px solid #0080ff;
  padding: 30px;
  margin: 30px 0px;
	font-family:arial;
	border-radius:25px;
	color:#ffffff;
	text-shadow: 2px 1px #0080ff;
	font-style: oblique;
	letter-spacing:1px;
	font-size:18;
	background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg');
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}
	
#right {
	float:right;
	display: block;
  display: inline-block;
  width: 300px;
  border: 3px solid #0080ff;
  padding: 20px;
  margin: 56px 54px;
	vertical-align:-200%;
	font-family:arial;
	border-radius:25px;
	color:#ffffff;
	text-shadow: 2px 1px #0080ff;
	font-style: oblique;
	letter-spacing:1px;
	font-size:18;
	background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg');
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}

#left, #middle, #right{
	height: 130px
}

<!DOCTYPE>
<html>
<head>
<title>Moj web</title>
<script type="text/javascript" src="java2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</head>
<link rel="stylesheet" href="style.css"> 
<body background="http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
<br>
<br>
<script>
function showDiv() {
    var x = document.getElementById("welcomeDiv");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>
<script>
function showDiver() {
    var x = document.getElementById("welcomeDiver");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>
<script>
function showDiverer() {
    var x = document.getElementById("welcomeDiverer");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

<center><div>
<button onclick="showDiv()" style= "margin-right: 75px">Pritisni me!</button>
<button onclick="showDiverer()" style= "margin-right: 75px">Pritisni me!</button>
<button onclick="showDiver()" style= "margin-right: 75px">Pritisni me!</button>
</div></center>
<br>
<br>
<div id="welcomeDiv" style="display:none;">
<div  id="left">
<p>Zdravo, ja sam Kenan!<br>
Ovo je moja testna stranica na kojoj radim dosta kratko!<br>
Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br>
</p>
</div>
</div>
<div id="welcomeDiver" style="display:none;">
<div id="right">
<p>Zdravo, ja sam Kenan!<br>
Ovo je moja testna stranica na kojoj radim dosta kratko!<br>
Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br>
</p>
</div>
</div>
<div id="welcomeDiverer" style="display:none;">
<div  id="middle">
<p>Zdravo, ja sam Kenan!<br>
Ovo je moja testna stranica na kojoj radim dosta kratko!<br>
Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br>
</p>
</div>
</div>
<br>
</body>
</html>

Answer 1

对于问题的第二部分，请尝试以下方法：

.animate {
       -webkit-animation-name: example;
       -webkit-animation-duration: 4s;
}

@keyframes example {
    from {visibility: hidden;}
    to {visibility: visibile;}
}

使用Javascript：

var leftBtn = document.getElementById("Insert Button Id Here");
var leftBox = document.getElementById("left");
leftBtn.onclick = startLeftAnimation;

function startLeftAnimation() {
    leftBox.classList.add("animate");
}

在这种情况下，CSS动画应该更加清晰。所涉及的代码较少，而且调试起来要容易得多。

中间盒位置不同，大小不同

1 个答案: