主页 / user-496854

Holaves's questions

Martin Hope
Holaves
Asked: 2022-06-23 18:20:25 +0000 UTC
  • 0

我是 html/css 的新手，所以请不要太苛刻地判断。我用css写了代码。此时，当悬停在容器上时，应该播放动画。但问题是播放了动画的一部分（即围绕帧旋转的正方形），而另一部分则没有。请帮忙。

@font-face {
  font-family: Taurus;
  src: url(Fonts\taurusnormal.ttf);
}

h1 {
  color: rgb(202, 202, 202);
  font-family: Taurus;
  font-size: 30pt;
}

a {
  text-decoration: none;
  color: black;
}

.panel-1 {
  position: fixed;
  top: 0px;
  margin-left: 0pt;
  width: 450pt;
  height: 35pt;
  background: rgb(187, 181, 181);
}

.panel-font {
  font-size: 17pt;
  color: black;
  padding: 10px 17px;
  border: 1px solid gray;
}

table {
  border-collapse: collapse;
  height: 35pt;
  width: 450pt;
  padding: 0;
}

div.spisok {
  margin-left: 10pt;
  color: rgb(92, 24, 24);
  font-size: 120%;
  White-space: pre-line;
  font-family: Times New Roman;
}

div.text {
  font-family: Comic Sans MS;
  color: rgb(134, 87, 172);
  margin-left: 15mm;
  font-size: 120%;
  White-space: pre-line;
}

li {
  color: rgb(15, 146, 107);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: black;
}

.container1 {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container1 .pup {
  position: relative;
  height: 100px;
  width: 100px;
  margin: -110px;
  border: 3px solid green;
}

.container1 .pup:nth-child(1) {
  border: 3px solid wheat;
  width: 220px;
  height: 100px;
}

.container1 .pup:nth-child(2) {
  border: 3px solid transparent;
  width: 220px;
  height: 100px;
}

.container1 .pup:nth-child(1):hover:after {
  content: '';
  position: absolute;
  top: -1px;
  right: -5px;
  width: 10px;
  height: 10px;
  background: #c7a424;
  box-shadow: 0 0 0 5px #c7a42425, 0 0 0 7px #c7a42415, 0 0 0 10px #c7a42410, 0 0 20px #c7a424, 0 0 50px #c7a424;
  animation: animation1 7s infinite;
  animation-play-state: running;
}

.container1 .pup:nth-child(2):hover:after {
  content: '';
  position: absolute;
  top: 90px;
  left: -5px;
  width: 10px;
  height: 10px;
  background: #c7a424;
  box-shadow: 0 0 0 5px #c7a42410, 0 0 0 7px #c7a42410, 0 0 0 10px #c7a42410, 0 0 20px #c7a424, 0 0 50px #c7a424;
  animation: animation2 7s infinite;
  animation-play-state: running;
}

@keyframes animation1 {
  0% {
    position: absolute;
    right: -5px;
    top: -7px;
  }
  25% {
    right: 210px;
    top: -7px
  }
  50% {
    right: 210px;
    top: 90px;
  }
  75% {
    right: -5px;
    top: 90px;
  }
  100% {
    right: -5px;
    top: -7px
  }
}

@keyframes animation2 {
  0% {
    position: absolute;
    left: -5px;
    top: 90px;
  }
  25% {
    left: 210px;
    top: 90px;
  }
  50% {
    left: 210px;
    top: -7px;
  }
  75% {
    left: -5px;
    top: -7px;
  }
  100% {
    left: -5px;
    top: 90px;
  }
}
<div class="panel-1">
  <table>
    <tr widht="500pt">
      <td class="panel-font"><a href="Animation-1.html">Анимации-1</a></td>
      <td class="panel-font"><a href="Animation-2.html">Анимации-2</a></td>
      <td class="panel-font"><a href="Animation-3.html">Анимации-3</a></td>
      <td class="panel-font"><a href="Spravka.html">Справка</a></td>
    </tr>

  </table>

</div>

<div class="container1">
  <div class="pup"></div>
  <div class="pup"></div>
</div>

html css