本文介绍了从CSS动画中心显示文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



我有一个带有文字的div。我不知道如何使用CSS3动画,并且希望有人能帮我实现这一点。我想从中心揭示这个div。它看起来很简单,但直到现在我还没有找到实现它的完美方式。



是否需要使用

  .text-div {
clip-path:插入(右上角左下);
animate:revealText 3s;
}

@keyframes revealText {
0%{
clip-path:inset(top right left left);
},
100%{
clip-path:inset(右上角左下角);
}
}

或者你会提出另一种解决方法吗? / p>





感谢您的帮助!
Cara

解决方案

这就是我最终意识到的。在我看来,直到现在,还没有更简单的方法来做到这一点。



JSFiddle here

  .text-div {
位置:绝对;
top:45%;
right:0;
剩下:0;
margin:0 auto;
text-align:center;
颜色:白色;
clip-path:inset(0px 50%0px 50%);
-webkit-clip-path:inset(0px 50%0px 50%);
动画:揭示文字3s;
}
.content {
background:red;
height:200px;
width:200px;
职位:亲属;
}
@keyframes revealText {
0%{
clip-path:inset(0px 50%0px 50%);
-webkit-clip-path:inset(0px 50%0px 50%);
}
100%{
clip-path:inset(0px 0px 0px 0px);
-webkit-clip-path:inset(0px 0px 0px 0px);


$ / code $


感谢大家的输入!


I'm kind of new to CSS3 Animations and hope anybody out there could help me realising this.

I'm having a div with text in it. I would like to reveal this div from the center. It looks kind of simple, but until now I didn't find the perfect way to realise it.

Do I need to use

.text-div {
    clip-path: inset(top right bottom left);
    animate: revealText 3s;
}

@keyframes revealText {
  0% {
    clip-path: inset(top right bottom left);
  },
  100% {
    clip-path: inset(top right bottom left);
  }
}

or would you suggest another way to solve this?

Thanks for your help!Cara

解决方案

That's how I realised it in the end. It appears to me, that until now, there is no easier way to do this.

JSFiddle here

.text-div {
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
  margin: 0 auto;
  text-align: center;
  color: white;
  clip-path: inset(0px 50% 0px 50%);
  -webkit-clip-path: inset(0px 50% 0px 50%);
  animation: revealText 3s;
}
.content {
  background:red;
  height:200px;
  width:200px;
  position:relative;
}
@keyframes revealText {
  0% {
    clip-path: inset(0px 50% 0px 50%);
    -webkit-clip-path: inset(0px 50% 0px 50%);
   }
  100% {
     clip-path: inset(0px 0px 0px 0px);
     -webkit-clip-path: inset(0px 0px 0px 0px);
  }
}

Thanks everybody for input!

这篇关于从CSS动画中心显示文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-18 21:48