边境式逐渐扩大css

问题描述 投票:0回答:2

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

    #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;}}
html css
2个回答
0
投票

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

#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;}
}
<div id="green">Some text</div>

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>
© www.soinside.com 2019 - 2024. All rights reserved.