现在我这样做是为了为元素背景颜色设置动画。
<style>
.container{
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
}
.element div {
position: absolute;
top: -20px;
left: 0;
background-color: #0c0;
transition:top 0.5s ease;
}
.element:hover div {
top: 0px;
transition:top 0.5s ease;
}
</style>
<div class="container">
<div class="element">some text<div>some text</div></div>
</div>
有没有&#34;清洁&#34;有相同动画的方式?现在我复制我的内容来实现这一点。
答案 0 :(得分:2)
您可以为此使用伪元素,不必须复制任何内容:
它基本上是从元素上方移动一个伪,然后将它放在悬停元素上
div {
position: relative;
display: inline-block;
overflow: hidden;
}
div:before,
div:after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
z-index: -1;
}
div:before {
top: 0;
background: red;
}
div:after {
top: -100%;
background: green;
}
div:hover:before {
top: 100%;
}
div:hover:after {
top: 0;
}
<div>Text? Why would you ever want text?</div>
如果您希望文本“移动”,您可以执行类似的操作:
div {
position: relative;
display: inline-block;
overflow: hidden;
height:20px;
width:300px;
}
div:before,
div:after {
content: attr(data-text);
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
z-index: -1;
}
div:before {
top: 0;
background: red;
}
div:after {
top: -100%;
background: green;
}
div:hover:before {
top: 100%;
}
div:hover:after {
top: 0;
}
<div data-text="Text? Why would you ever want text?"></div>
注意: canIuse表明它得到了广泛的支持(我承认只在最新的Chrome中进行了测试,所以只有这样才能用于跨浏览器)。但是,这可能会影响SEO,所以我不愿意在生产中使用它。
如果你只是想让'upper'元素流过文本的顶部(而不是'lower'文本滚动),你可以这样做:
div {
position: relative;
display: inline-block;
overflow: hidden;
height: 20px;
width: 300px;
background: red;
}
div:before {
content: attr(data-text);
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
top: -100%;
background: green;
}
div:hover:before {
top: 0;
}
<div data-text="The text I always wanted">The text I always wanted</div>
答案 1 :(得分:1)
您可以使用background-position
将linear-gradient
设置为每种背景颜色的50%,并将背景大小设置为实际div的200%。
然后为其设置动画并将背景向上移动100%。像这样:
.container {
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #c00 50%, #0c0 50%);
}
.element:hover {
background-position: 0 -100%;
transition: background-position 1s;
}
&#13;
<div class="container">
<div class="element">some text</div>
</div>
&#13;
这减少了对css或html中任何重复内容的需求。
答案 2 :(得分:0)
是的,您可以使用伪元素:before并获取具有以下属性的文本:
<div class="container">
<div class="element" data-text="some text">some text</div>
</div>
和css:
.container{
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
}
.element:before {
content: attr(data-text);
position: absolute;
top: -20px;
left: 0;
background-color: #0c0;
transition:top 0.5s ease;
}
.element:hover:before {
top: 0px;
transition:top 0.5s ease;
}
答案 3 :(得分:0)
与jbutler483类似,但只使用一个伪类。的 FIDDLE 强>
.container {
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
transition: top 0.5s ease;
overflow: hidden;
}
.element:after {
position: absolute;
top: -60px;
content: 'some text';
font-size: 20px;
line-height: 20px;
left: 0;
display: inline-block;
background-color: #0c0;
transition: top 0.5s ease;
}
.element:hover:after {
top: 0px;
}
&#13;
<div class="element">some text</div>
&#13;