我无法制作响应式文本“W E L C O M E”。我尝试了媒体查询，但我失败了。片段中有我的 HTML 和 CSS 代码，尝试在此处运行它但也有一些问题。
如您所见，有一段带有动画的文本，必须以这种方式完成，单个字母为“li”
#bg1 {
background: url(img/38890540-cosmic-pictures-wallpapers.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bg2 {
background-color: darkgray;
}
#bg3 {
background-color: darkgreen;
}
#bg4 {
background-color: darkslateblue;
}
.fly-in-text {
list-style: none;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.fly-in-text li {
display: inline-block;
margin-right: 50px;
font-family: Quicksand, sans-serif;
font-weight: 300;
font-size: 4em;
color: #fff;
opacity: 1;
transition: all 2.5s ease;
}
.fly-in-text li:last-child {
margin-right: 0;
}
.fly-in-text.hidden li {
opacity: 0;
}
.fly-in-text.hidden li:nth-child(1) {
transform: translateX(-200px) translateY(-200px);
}
.fly-in-text.hidden li:nth-child(2) {
transform: translateX(20px) translateY(100px);
}
.fly-in-text.hidden li:nth-child(3) {
transform: translateX(-150px) translateY(-80px);
}
.fly-in-text.hidden li:nth-child(4) {
transform: translateX(10px) translateY(-200px);
}
.fly-in-text.hidden li:nth-child(5) {
transform: translateX(-300px) translateY(200px);
}
.fly-in-text.hidden li:nth-child(6) {
transform: translateX(20px) translateY(-20px);
}
.fly-in-text.hidden li:nth-child(7) {
transform: translateX(30px) translateY(200px);
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>x</title>
</head>
<body>
<div id="fullpage">
<div class="section" id="bg1">
<ul class="fly-in-text hidden">
<li>W</li>
<li>E</li>
<li>L</li>
<li>C</li>
<li>O</li>
<li>M</li>
<li>E</li>
</ul>
</div>
<div class="section" id="bg2"></div>
<div class="section" id="bg3"></div>
<div class="section" id="bg4"></div>
</div>
<div class="section">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#fullpage').fullpage();
});
$(function () {
setTimeout(function () {
$('.fly-in-text').removeClass('hidden');
}, 500);
})
</script>
</body>
</html>最佳答案
关于html - 尝试制作响应式 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42030666/