15.按钮填充动画 & 盒模型重置

文章预览

按钮填充动画 在悬停时创建填充动画。 设置 color 和 background ,并使用适当的 transition 来为元素的变化设置动画。 使用 :hover 伪类在用户悬停在元素上时改变元素的 background 和 color 。 < button   class = "animated-fill-button" > 提交 button > .animated-fill-button  {   padding :  20px ;   background :  #fff ;   color :  #000 ;   border :  1px  solid  #000 ;   cursor : pointer;   transition :  0.3s  all ease-in-out; } .animated-fill-button :hover  {   background :  #000 ;   color :  #fff ; } 这个技巧利用简单的 CSS 属性来创建一个引人注目的悬停效果: 按钮最初有一个白色的 background 和黑色的 color 。它还有一个黑色的 border 来提供视觉对比。 transition 属性用于为 background 和 color 的变化设置动画。这里,所有的属性都被设置为在 0.3 秒内使用 ease-in-out 时序函数进行动画处理。 :hover 伪类用于在 ………………………………