css中的转换和目标
我正在创建一个带有一些CSS动画的页面(因为我的一些客户不希望这个网站使用大量JavaScript)。因此,我有一个元素要设置动画,但根据单击按钮的方式有3种不同: 例如:css中的转换和目标,css,css-transitions,Css,Css Transitions,我正在创建一个带有一些CSS动画的页面(因为我的一些客户不希望这个网站使用大量JavaScript)。因此,我有一个元素要设置动画,但根据单击按钮的方式有3种不同: 例如: <a href="#element">One animation</a> <a href="#element">Second animation</a> <a href="#element">Third animation</a> <div id
<a href="#element">One animation</a>
<a href="#element">Second animation</a>
<a href="#element">Third animation</a>
<div id="element"></div>
所以我基本上希望在同一个元素上有3种不同的:目标样式。这可能吗
所以我基本上希望在同一个元素上有3种不同的:目标样式。这可能吗
不,这是不可能的——不是直接的
但是如何使用以下三种不同的方式为同一元素设置动画:target
通过使用三个不同的目标
可以将要应用转换的实际元素放入多个嵌套容器元素中,如下所示:
<div id=target1>
<div id=target2>
<div id=target3>
<element>
您可以使用css
相邻(+)
选择器执行此操作,如下所示:
HTML:
<a id='first' href="#first">One animation</a>
<a id='second' href="#second">Second animation</a>
<a id='third' href="#third">Third animation</a>
<div id="element" class="force-repaint"></div>
#element{
height: 300px;
width: 300px;
border-radius: 0px;
background-color: red;
position: absolute;
left: 300px;
top: 50px;
-webkit-transition-property: height, width, background-color,;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function:ease-out;
}
#first:target + #second + #third + #element {
background: yellow;
}
#second:target + #third + #element{
background: green;
}
#third:target + #element{
background: purple;
}
.force-repaint { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { fill: 0; } to { fill: 0; } }
工作+1很遗憾,一个好的答案可以得到这么长时间的0分。完成第一次转换的更好方法是:
#first:target~#element{background:yellow;}
<a id='first' href="#first">One animation</a>
<a id='second' href="#second">Second animation</a>
<a id='third' href="#third">Third animation</a>
<div id="element" class="force-repaint"></div>
#element{
height: 300px;
width: 300px;
border-radius: 0px;
background-color: red;
position: absolute;
left: 300px;
top: 50px;
-webkit-transition-property: height, width, background-color,;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function:ease-out;
}
#first:target + #second + #third + #element {
background: yellow;
}
#second:target + #third + #element{
background: green;
}
#third:target + #element{
background: purple;
}
.force-repaint { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { fill: 0; } to { fill: 0; } }