我正在尝试使以下物体从中心向外扩展(几乎像窗帘打开一样)。
它应该看起来像这样,但不是-
,而是空白。
-------------
------t------
-----sti-----
----estin----
---Testing---
.animation{
width: 100%;
text-align: center;
font-size: 50px;
padding: 25px;
background: black;
color: white;
}
<div class="animation">
Testing
</div>
如果可能的话,我也希望不使用JavaScript。
答案 0 :(得分:3)
这是不使用clip-path
并依靠flexbox的一种简便方法
.animation{
width: 0%;
margin:auto;
display:flex;
justify-content: center;
white-space:nowrap;
font-size: 50px;
padding: 25px 0;
background: black;
color: white;
overflow:hidden;
transition:0.5s all;
}
body:hover .animation{
width:100%;
}
<div class="animation">
Testing
</div>
如果您不需要透明度,也可以使用伪元素和背景:
.animation{
width: 100%;
text-align: center;
font-size: 50px;
padding: 25px 0;
background: black;
color: white;
position:relative;
}
.animation:before{
content:"";
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:
linear-gradient(#fff,#fff)left/50.5% 100%,
linear-gradient(#fff,#fff)right/50.5% 100%;
background-repeat:no-repeat;
transition:0.5s all;
}
.animation:hover::before {
background-size:0% 100%;
}
<div class="animation">
Testing
</div>
使用box-shadow
的另一个想法:
.animation{
width: 100%;
text-align: center;
font-size: 50px;
padding: 25px 0;
background: black;
color: white;
position:relative;
box-shadow:
50vw 0 0 #fff inset,
-50vw 0 0 #fff inset;
transition:0.5s all;
}
.animation:hover {
box-shadow:
0 0 0 #fff inset,
0 0 0 #fff inset;
}
<div class="animation">
Testing
</div>
答案 1 :(得分:1)
使用clip-path
和CSS动画。
注意:在Safari和其他浏览器上,前缀-webkit
是必需的
第一个关键帧在X轴的中心具有4个点,但在Y轴的最后(最大)位置具有4个点。这使我们只能为X轴设置动画。
第二个关键帧将4个点沿X轴向外移动到最大位置,而Y部分保持不变。
有些混乱,但请参见下文:
.animation{
width: 100%;
text-align: center;
font-size: 50px;
padding: 25px;
background: black;
color: white;
animation: expand_center 5000ms;
animation-fill-mode: forwards;
}
@keyframes expand_center {
0% {
clip-path: polygon(50% 100%,50% 0,50% 0,50% 100%);
-webkit-clip-path: polygon(50% 100%,50% 0,50% 0,50% 100%);
}
100%{
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
}
}
<div class="animation">
Testing
</div>
将@kendallFrey记为剪切路径的想法。
答案 2 :(得分:1)
您可以尝试转换width
并使用flex
对齐文本
.animation {
width: 100%;
font-size: 50px;
padding: 25px 0;
background: black;
color: white;
margin: 0 auto;
display: flex;
justify-content: center;
animation: grow 2s;
}
@keyframes grow {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="animation">
Testing
</div>