Question

我正在使用初始屏幕制作登录和注销页面，但是初始屏幕在加载页面上工作正常，我没有使用jquery / javascript。当我单击注销按钮时，我在css3动画中使用初始屏幕创建了相同的东西再次重复启动单击退出屏幕时单击。我不希望单击退出按钮时出现启动屏幕，我只想在加载页面开始页面后才单击单击退出时删除启动屏幕。但是它在注销时重复相同的动画。我该如何删除注销点击？我试过.hide（）,. remove（），但无法正常工作，请帮助我..如何在加载和注销时编写代码？

Css3动画

/* SPLASH SCREEN * -------------------------- */

#splash {
    background-color: #fc9204 !important;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    z-index: 10;
    transition-property: top;
    -webkit-animation: slide-out-fwd-center  7.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-out-fwd-center  7.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

 @-webkit-keyframes slide-out-fwd-center {
  0% {
    -webkit-transform: translateZ(1);
            transform: translateZ(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(600px);
            transform: translateZ(600px);
    opacity: 0;
  }
}
@keyframes slide-out-fwd-center {
  0% {
    -webkit-transform: translateZ(1);
            transform: translateZ(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(600px);
            transform: translateZ(600px);
    opacity: 0;
  }
}

 #splash img {
  display: block;
  margin: 200px auto;
  width: 100px;
  height: 200px;
  -webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}


@-webkit-keyframes slide-fwd-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  100% {
    -webkit-transform: translateZ(160px);
            transform: translateZ(160px);
  }
}
@keyframes slide-fwd-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  100% {
    -webkit-transform: translateZ(160px);
            transform: translateZ(160px);
  }
}

Answer 1

查看此链接，该链接指向已经提出的先前的SO问题。

Can I have an onclick effect in CSS?

它向您展示了如何在CSS中检查点击，但我建议您使用JavaScript来检查点击。它是多功能的，并且能够做更多的事情。至少要创建一些出色的网页，才需要了解基本知识。

如何在注销时删除初始屏幕？

1 个答案: