Question

我正在尝试创建一个网站，在页面上加载div幻灯片，从占用整个浏览器窗口到完全不在框架内。同时，一些居中的文本从不透明度0变为1，但是当我加载页面时，文本以某种方式位于滑动的div的顶部。我试着在文本上设置一个动画延迟，所以它在div传递之后出现，但它看起来并不像我想要的样子。此外，我为凌乱的代码道歉，我是新手。

这是小提琴： https://jsfiddle.net/3qz4LgmL/

body {
  margin: 0px 0px 0px 0px;
  height: 100vh;
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#b485f2, #d879fa); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#b485f2, #d879fa); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#b485f2, #d879fa); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#b485f2, #d879fa); /* Standard syntax (must be last) */
  background-repeat: none;
  overflow:hidden;
}

#slide {
  width: 0px;
  height: 100vh;
  background: #d82bc4; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #d82bc4 0%, #7c00e2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #d82bc4 0%,#7c00e2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #d82bc4 0%,#7c00e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d82bc4', endColorstr='#7c00e2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  animation: slideaway;
  animation-duration: 3.4s;
  position: absolute;
}

@keyframes slideaway {
  40%{width: 100%}
  100%{width: 0px}
}

#title {
  margin: 0px 0px 0px 0px;
  font-family: Baloo Bhaina;
  color: white;
  font-size: 45pt;
  animation: slideright;
}

#sub {
  font-family: Helvetica;
  color: aqua;
  font-size: 45px;
  text-shadow: 2px 2px #285aad;
  animation: slideright;
  animation-duration: 4.5s;
  margin-top: 10vh;
}

#titles {
  height: 120vh;
  display: inline-block;
}

.button {
  background-color: #862224;
  width: 30%;
  border-radius: 8px;
  box-shadow: 3px 3px #6d191b;
  font-family: Baloo Bhaina;
  color: white;
  padding-top: 12px;
  padding-bottom: 8px;
}

@keyframes slideright {
  0%{opacity: 0}
  100%{opacity: 1}
}

.button:hover {
  background-color: #681113;
  width: 30%;
  border-radius: 8px;
  font-family: Baloo Bhaina;
  color: white;
  padding-top: 12px;
  padding-bottom: 8px;
  animation-iteration-count: 1;
}

.arrowdown {
  height: 50px;
  width: 70px;
  margin: 0px 0px 0px 0px;
}

.arrowbox {
  background-color: #862224;
  border-radius: 5px;
  display: inline-block;
  height: 45px;
  box-shadow: 3px 3px #6d191b;
}

.arrowbox:hover {
  background-color: #681113;
  border-radius: 5px;
  display: inline-block;
  height: 45px;
  box-shadow: 3px 3px #6d191b;
}

.faces {
  background-color: white;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  height: 300px;
  width: 300px;
}

<div id="slide"></div>
<center><div id="titles">
<center><p id="title">DJ VORT-X</p></center><br><br><br><br>
<p id="sub">All-round music for your event</p>
<br><br><br><br>
<center><div class="button"><center>CONTACT ME</center></div></center>
<br><br><br><br><br><br><br><br>
<div class="arrowbox"><img class="arrowdown" src="arrowdown.png"></div>
</div>
</center>

Answer 1

只需将z-index：1添加到#slide：

#slide {
    width: 0px;
    height: 100vh;
    background: #d82bc4; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #d82bc4 0%, #7c00e2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #d82bc4 0%,#7c00e2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #d82bc4 0%,#7c00e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d82bc4', endColorstr='#7c00e2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    animation: slideaway;
    animation-duration: 3.4s;
    position: absolute;
    z-index: 1;
}

Answer 2

在slideight keyfreme中设置不透明度：0％40％

{
  "departments": [
    {
      "id": 1,
      "name": "Organization",
      "description": "",
      "parent_id": 0,
      "users": [],
      "department_designations": [
        {
          "id": 1,
          "departments_id": 1,
          "designations_id": 1,
          "designation": {
            "id": 1,
            "name": "Brand head",
            "description": "",
            "level": 1
          }
        },
        {
          "id": 6,
          "departments_id": 1,
          "designations_id": 6,
          "designation": {
            "id": 6,
            "name": "CEO",
            "description": "",
            "level": 1
          }
        }
      ]
    },
    {
      "id": 2,
      "name": "Production",
      "description": "",
      "parent_id": 1,
      "users": [],
      "department_designations": [
        {
          "id": 3,
          "departments_id": 2,
          "designations_id": 5,
          "designation": {
            "id": 5,
            "name": "Production assistant manager",
            "description": "",
            "level": 3
          }
        },
        {
          "id": 5,
          "departments_id": 2,
          "designations_id": 4,
          "designation": {
            "id": 4,
            "name": "Production head",
            "description": "",
            "level": 2
          }
        }
      ]
    },
    {
      "id": 3,
      "name": "R&D",
      "description": "",
      "parent_id": 1,
      "users": [],
      "department_designations": [
        {
          "id": 2,
          "departments_id": 3,
          "designations_id": 2,
          "designation": {
            "id": 2,
            "name": "R&D Manager",
            "description": "",
            "level": 2
          }
        }
      ]
    },
    {
      "id": 4,
      "name": "Development",
      "description": "",
      "parent_id": 3,
      "users": [],
      "department_designations": [
        {
          "id": 4,
          "departments_id": 4,
          "designations_id": 2,
          "designation": {
            "id": 2,
            "name": "R&D Manager",
            "description": "",
            "level": 2
          }
        }
      ]
    },
    {
      "id": 5,
      "name": "Purchase",
      "description": "",
      "parent_id": 1,
      "users": [],
      "department_designations": []
    }
  ]
}

＆＃13;

@keyframes slideright {
    0%{opacity: 0}
    40% {opacity: 0}
    100%{opacity: 1}
}

＆＃13;

body {
  margin: 0px 0px 0px 0px;
  height: 100vh;
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#b485f2, #d879fa); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#b485f2, #d879fa); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#b485f2, #d879fa); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#b485f2, #d879fa); /* Standard syntax (must be last) */
  background-repeat: none;
  overflow:hidden;
}

#slide {
  width: 0px;
  height: 100vh;
  background: #d82bc4; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #d82bc4 0%, #7c00e2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #d82bc4 0%,#7c00e2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #d82bc4 0%,#7c00e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d82bc4', endColorstr='#7c00e2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  animation: slideaway;
  animation-duration: 3.4s;
  position: absolute;
}

@keyframes slideaway {
  0%{width: 100%}
  100%{width: 0px}
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#title {
  margin: 0px 0px 0px 0px;
  font-family: Baloo Bhaina;
  color: white;
  font-size: 45pt;
  animation: slideright;
}

#sub {
  font-family: Helvetica;
  color: aqua;
  font-size: 45px;
  text-shadow: 2px 2px #285aad;
  animation: slideright;
  animation-duration: 4.5s;
  margin-top: 10vh;
}

#titles {
  height: 120vh;
  display: inline-block;
}

.button {
background-color: #862224;
width: 30%;
border-radius: 8px;
box-shadow: 3px 3px #6d191b;
font-family: Baloo Bhaina;
color: white;
padding-top: 12px;
padding-bottom: 8px;
}

@keyframes slideright {
0%{opacity: 0}
40% {opacity: 0}
100%{opacity: 1}
}

.button:hover {
background-color: #681113;
width: 30%;
border-radius: 8px;
font-family: Baloo Bhaina;
color: white;
padding-top: 12px;
padding-bottom: 8px;
animation-iteration-count: 1;
}

.arrowdown {
height: 50px;
width: 70px;
margin: 0px 0px 0px 0px;
}

.arrowbox {
background-color: #862224;
border-radius: 5px;
display: inline-block;
height: 45px;
box-shadow: 3px 3px #6d191b;
}

.arrowbox:hover {
background-color: #681113;
border-radius: 5px;
display: inline-block;
height: 45px;
box-shadow: 3px 3px #6d191b;
}

.faces {
background-color: white;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
height: 300px;
width: 300px;
}

＆＃13;

当另一个动画div经过时，如何隐藏我的动画文字？

2 个答案: