Html 使用CSS从左向右滑动背景色动画_Html_Css

Html 使用CSS从左向右滑动背景色动画

html css

Html 使用CSS从左向右滑动背景色动画,html,css,Html,Css,我试图使背景色动画从左到右开始 ul.vert-one{ 边距：0；填充：0；列表样式类型：无；显示：块；字体：粗体16px Helvetica、Verdana、Arial、无衬线字体；线条高度：165%；宽度：200px； } ul.vert-one li{ 边距：0；填充：0；边框顶部：1px实心4D0000；边框底部：1px纯白； } ul.vert-one li span{显示器：块；文字装饰：无；颜色：白色；背景：600；填充：0 20px；宽度：180px；} ul.v

我试图使背景色动画从左到右开始

ul.vert-one{ 边距：0；填充：0；列表样式类型：无；显示：块；字体：粗体16px Helvetica、Verdana、Arial、无衬线字体；线条高度：165%；宽度：200px； } ul.vert-one li{ 边距：0；填充：0；边框顶部：1px实心4D0000；边框底部：1px纯白； } ul.vert-one li span{显示器：块；文字装饰：无；颜色：白色；背景：600；填充：0 20px；宽度：180px；} ul.vert-one li跨度：悬停{ 背景：黄色URL图像/vert-one_arrow.gif无重复0 9px；} 家博客关于我们

通过对元素应用背景渐变以及两倍于元素大小的背景宽度，您可以通过在50%处放置两个挡块来渲染两种不同的颜色

然后，您所需要做的就是设置“背景位置”属性的动画，这样您就有了效果

注:

我删除的标记中有一个丢失的结尾。回想起 ul.vert-one li跨度{ 显示：块；文字装饰：无；颜色：白色；背景大小：200%100%；背景图像：向右线性渐变，600 50%，黄色50%；过渡：背景位置1s；填充：0 20px；宽度：180px； } ul.vert-one li跨度：悬停{ 背景位置：-100%0； } ul.vert-one{边距：0；填充：0；列表样式类型：无；显示：块；字体：粗体16px Helvetica、Verdana、Arial、无衬线；} ul.vert-one li{边距：0；填充：0；边框顶部：1px实心4D0000；边框底部：1px实心白色；} 家博客关于我们

通过对元素应用背景渐变以及两倍于元素大小的背景宽度，您可以通过在50%处放置两个挡块来渲染两种不同的颜色

然后，您所需要做的就是设置“背景位置”属性的动画，这样您就有了效果

注:

<div class="mybgd" style="background:gray">

把这个插入你的

<div class="mybgd" style="background:gray">

另一种解决方案是使用伪元素，如：after。我确实删除了一些不必要的标记。如果这些菜单项是用来链接的，你应该使用标签

ul.vert-one{ 保证金：0；填充：0；列表样式类型：无；显示：块；字体：粗体16px Helvetica，Verdana，Arial，无衬线；线高：165%；宽度：200px； } ul.vert-one li{ 位置：相对位置；保证金：0；填充：0；边框顶部：1px实心4D0000；边框底部：1px纯白； z指数：5；填充：0 20px；颜色：白色；背景：600人；宽度：180px； } ul.vert-one li跨度{ 位置：相对位置；显示：块；文字装饰：无； z指数：10； } ul.vert-one li:之后{ 内容：；位置：绝对位置；左：0；排名：0；宽度：0；颜色：fff；身高：100%；背景：黄色；不透明度：0； } ul.vert-one li：悬停：之后{ 宽度：100%；不透明度：1；过渡时间：500ms； -网络工具包转换：500毫秒； } 家博客关于我们

另一种解决方案是使用伪元素，如：after。我确实删除了一些不必要的标记。如果这些菜单项是用来链接的，你应该使用标签

无法设置背景色“位置”的动画。你尝试过什么？你不能设置背景色“位置”的动画。你试过什么？