CSS3或Javascript-简单填充动画
我正在尝试创建一个简单的动画,当用户将鼠标悬停在某个元素上时,其中包含的另一个元素将填充其父元素。目前,我有一个JSFIDLE可以做到这一点 但是,我想用一些其他的特性来完成这项工作,我不确定我是否能在CSS3中真正做到这一点CSS3或Javascript-简单填充动画,javascript,html,css,keyframe,Javascript,Html,Css,Keyframe,我正在尝试创建一个简单的动画,当用户将鼠标悬停在某个元素上时,其中包含的另一个元素将填充其父元素。目前,我有一个JSFIDLE可以做到这一点 但是,我想用一些其他的特性来完成这项工作,我不确定我是否能在CSS3中真正做到这一点 我试图找到一种方法,当内圈完全填充其父圈时(即当其宽度/高度=300px时),我希望填充暂停,而不是在动画完成后消失 当用户将鼠标移到:hover范围之外时,我希望动画反转方向,而不是突然停止 我在CSS3方面已经取得了很大的进步,但我不确定我是否能够在不使用Javasc
.circle {
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #000000;
overflow: hidden;
border-radius: 150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
}
.filler {
width: 0px;
height: 0px;
background-color: red;
border: none;
position: relative;
left: 50%;
top: 50%;
border-radius: 150px;
-mox-border-radius: 150px;
-webkit-border-radius: 150px;
animation: empty 1s;
}
.circle:hover .filler {
animation: fill 2s;
-moz-animation: fill 2s;
-webkit-animation: fill 2s;
background-color: blue;
}
@keyframes fill
{
from {background: red; height: 0px; width: 0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
@-moz-keyframes fill /* Firefox */
{
from {background: red; height: 0px; width: 0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
@-webkit-keyframes fill /* Safari and Chrome */
{
from {background: red; height:0px; width:0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
@keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
@-moz-keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
@-webkit-keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
我希望您可以尝试一下,因为此链接可能会对您有所帮助
<http://jsfiddle.net/spacebeers/sELKu/3/>
<http://jsfiddle.net/SZqkb/1/>
<http://css-tricks.com/examples/DifferentTransitionsOnOff/>
谢谢我希望您可以尝试一下,因为此链接可能会对您有所帮助
<http://jsfiddle.net/spacebeers/sELKu/3/>
<http://jsfiddle.net/SZqkb/1/>
<http://css-tricks.com/examples/DifferentTransitionsOnOff/>
谢谢对于这个简单的动画,您不需要关键帧。以下是您需要的CSS:
.circle {
position: relative;
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #000000;
border-radius: 150px;
overflow: hidden;
}
.filter {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: red;
border-radius: 0px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.circle:hover .filter {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 150px;
background-color: blue;
}
和HTML:
<div class="circle">
<div class="filter"></div>
</div>
下面是一个示例:这个简单的动画不需要关键帧。以下是您需要的CSS:
.circle {
position: relative;
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #000000;
border-radius: 150px;
overflow: hidden;
}
.filter {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: red;
border-radius: 0px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.circle:hover .filter {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 150px;
background-color: blue;
}
和HTML:
<div class="circle">
<div class="filter"></div>
</div>
下面是一个例子:wow。太好了。动画完成后,是否有方法将填充圆锁定到位?我只希望它在一开始没有完全填充时才取消填充。@ShawnTaylor锁定有点棘手,需要一些JavaScript来完成。您可以在这里找到这样的JavaScript示例:同样,这是一个完美的解决方案。这正是我想要的行为。谢谢瓦迪姆!!您也可以使用::before伪元素:)哇。太好了。动画完成后,是否有方法将填充圆锁定到位?我只希望它在一开始没有完全填充时才取消填充。@ShawnTaylor锁定有点棘手,需要一些JavaScript来完成。您可以在这里找到这样的JavaScript示例:同样,这是一个完美的解决方案。这正是我想要的行为。谢谢瓦迪姆!!您也可以为此使用::before伪元素:)