css - 鼠标悬停时背景颜色从上往下慢慢变为橙色，这个怎么做？

问题描述

问 题

鼠标悬停时背景颜色从上往下慢慢变为橙色，这个怎么做？

解决方案

<div id="bc">
</div>

#bc {
  width: 200px;
  height: 100px;
  background: linear-gradient(yellow 50%, #ccc 50%);
    background-size: 100% 200%;
    background-position: 0 100%;
}
#bc:hover {
  -webkit-animation: myfirst 2s 1;
  background-position: 0 0%;
}

@-webkit-keyframes myfirst
{
  0% {
        background-position: 0 100%;
    }
    100% {
        background-position: 0 0%;
    }
}

这样试试吧

这篇关于css - 鼠标悬停时背景颜色从上往下慢慢变为橙色，这个怎么做？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！