Question

我想让边界逐渐扩大，但我无法弄清问题在哪里。真的很感激帮助。

    #green1 {
background-color: green;
width: 50%;
height: 10%;
float: right;
}
    #green1:hover  {
    animation-name:border;
    animation-duration:3s;}

@keyframes border {


0% {
    border:0px;
    border-style:none;}
15% {  border:1px solid black; border-style:dotted;}
35% {  border:2px solid black; border-style:dotted;}
50% {  border:4px solid black; border-style:dotted;}
75% {  border:6px solid black; border-style:dotted;}

100% {  border:8px solid black; border-style:dotted;}}

Answer 1

你可以简单地使用这样的过渡：

#green1 {
  background-color: green;
  width: 500px;
  height: 100px;
  float: right;
  border: 0px solid black;
  transition:border 3s;
}

#green1:hover {
   border: 8px solid black;
}

<div id="green1"></div>

Answer 2

在同一行中指定和替换值是个坏主意。它没有意义（您指定实线边框并将其重新分配为点缀）。此外，您的边界在初始状态下不存在，这可能是一个问题。

＆＃13;

#green:hover  {
  display: inline-block;
  border: 0px dotted black;
  animation: border 3s;
}

@keyframes border {
0% {  border-width:0px;}
15% {  border-width:1px;}
35% {  border-width:2px;}
50% {  border-width:4px;}
75% {  border-width:6px;}
100% {  border-width:8px;}
}

＆＃13;

<div id="green">Some text</div>

＆＃13;

边境式逐渐扩大css

2 个答案: