как сделать так, чтобы кнопка постепенно появлялась при использовании css ключевых кадров? - PullRequest
Новая
       34

как сделать так, чтобы кнопка постепенно появлялась при использовании css ключевых кадров?

0 голосов
/ 19 июня 2020

Я пытаюсь заставить мою кнопку плавно отображать ключевые кадры, но она не работает, и я знаю, что делаю что-то не так. В итоге я заставил анимированный текст работать, но это вызывает у меня головную боль, и я не могу найти нигде информацию, которая мне помогла ... Я новичок в веб-разработке, поэтому не будьте слишком суровы ко мне или моему (вероятно, некрасивый и неорганизованный) код лол. Я пытаюсь узнать как можно больше, поэтому, пожалуйста, объясните, почему это не работает и почему может что-то еще? Спасибо, ребята <3 </p> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

    <title>Welcome! | Video Editing by Scottis</title>

</head>
<body>
    <!-- Header -->
<div class="container">
    <span class="text1">Video Editing by Scottis</span>
</div>


    <!-- Buttons -->
    <style>
        .btn {
           background-color: white;
           color: rgb(133, 4, 255);
           text-align: center;
           font-size: 15px;
           font-weight: bold;
           margin-right: -250px;
           margin-top: 600px;
           margin-left: 515px;
           padding: 30px;
        }




     </style>
  </head>
  <body>
    <button class="btn">Portfolio</button>
    <button class = "btn">Pricing</button>
    <button class="btn">Contact</button>


</body>
</html>

Мой CSS: 

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

body {
    background-image: url("./assets/background.png");
    background-color: #cccccc;
    background-repeat: no-repeat;
  }

  /* Create three equal columns that floats next to each other */
.col-md-3 {
    float: left;
    width: 15%;
    padding: 15px;
    padding: 10px;
    margin: auto;
    display: block;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  @media screen and (max-width:768px) {
    .col-md-3 {
      width: 100% auto;
    }
  }

.col-md-12 {
  text-align: center;
}

.card-title {
  text-align: center;
}

.container{
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.container span{
  color: white;
  text-transform: uppercase;
  display: block;

}

.text1{
  color: white;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  position: relative;
  animation: text 3s 1;
}


@keyframes text {
  0%{
    margin-bottom: -20%;
  }
  30%{
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85%{
    letter-spacing: 15px;
    margin-bottom: -40px;
  }

  }
}

@keyframes button {
  0%{
    opacity: 0%;
  }
  0%{
    opacity: 0%;
  }
  25%{
    opacity: 25%;
  }
  50%{
    opacity: 50%;
  }
  75%{
    opacity: 75%;
  }
  100%{
    opacity: 100%;
  }
}

1 Ответ

0 голосов
/ 19 июня 2020

Сначала у вас возникли проблемы с кодом. Вы повторяете теги head и body не в правильной допустимой последовательности html. Внимательно посмотрите на следующую страницу и ресурс из MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Что касается вашей проблемы с ключевыми кадрами, определите класс, которым вы будете sh управлять с помощью последовательности в вашем css и добавьте анимацию с уникальным именем вызова, я использовал fadeIn. Ниже я добавил анимации Mozilla, webkit, opera и ms @keyframe для непрозрачности. Я определяю анимацию, чтобы запустить таймер (3 секунды) @keyframe 0% { opacity: 0; }, а затем закончить на 100% { opacity: 1; }. Я добавляю несколько комплектов для разных браузеров. 

.btn {
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

body {
  background-image: url("./assets/background.png");
  background-color: #cccccc;
  background-repeat: no-repeat;
}

/* Start class for buttons animation fadeIn ease */
.btn {
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*  End of animation keyframes  */

/* Create three equal columns that floats next to each other */

.col-md-3 {
  float: left;
  width: 15%;
  padding: 15px;
  padding: 10px;
  margin: auto;
  display: block;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width:768px) {
  .col-md-3 {
    width: 100% auto;
  }
}

.col-md-12 {
  text-align: center;
}

.card-title {
  text-align: center;
}

.container {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.container span {
  color: white;
  text-transform: uppercase;
  display: block;
}

.text1 {
  color: white;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  position: relative;
  animation: text 3s 1;
}

@keyframes text {
  0% {
    margin-bottom: -20%;
  }
  30% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85% {
    letter-spacing: 15px;
    margin-bottom: -40px;
  }
}


}
<div class="container">
  <span class="text1">Video Editing by Scottis</span>
</div>

<button class="btn">Portfolio</button>
<button class="btn">Pricing</button>
<button class="btn">Contact</button>
...