Question

在标签内插入图片并运行它可能有助于充分理解清楚地

.focus {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}
.focus:hover {
border: 70px solid #000;
border-radius: 50%;
}

<div class="focus pic"><img src=" " ></div>

Answer 1

添加没有宽度的边框，这样会缩小。现在，如果你失去了焦点，你就会移除边框，而不会过渡。

＆＃13;

.focus {
  -webkit-transition: all 9999999s ease;
  -moz-transition: all 9999999s ease;
  -o-transition: all 9999999s ease;
  -ms-transition: all 9999999s ease;

  border: 0px solid #000;
}
.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
}

＆＃13;

<div class="focus pic"><img src="http://placehold.it/500x20" ></div>

＆＃13;

Answer 2

首先设置缩小时应该在的元素的默认值。

在void **ptr1, **ptr2; *ptr1+*ptr2;条件下将第二个过渡效果设置为0。

:hover

.focus {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  border: 0px solid #000;
  border-radius: 0;
}
.focus:hover {
  -webkit-transition: all 0s ease;
  -moz-transition: all 0s ease;
  -o-transition: all 0s ease;
  -ms-transition: all 0s ease;
  border: 70px solid #000;
  border-radius: 50%;
}

如何用边框半径显示焦点的效果。我试过了。我希望它缩小

2 个答案: