边境式逐渐扩大css

时间:2017-12-31 15:41:25

标签: html css

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

    #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;}}

2 个答案:

答案 0 :(得分:0)

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

#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>

答案 1 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;