使段落反弹

时间:2017-10-26 16:30:58

标签: javascript css

我的段落用我的语言说:

开始A. 新项目 与美国

我想让这一段反弹。如果我在编码方面不是很先进,那么我最好的选择是什么?使用的当前代码是:

<p><a href="linkhere">START ET<br>
<h4>NYT PROJEKT</h4><br>
MED OS</a></p>

通过弹跳我基本上只是意味着某种方式让浏览网站的人注意到它。它上面和下面有东西,所以通过它做出一些移动它会引起注意。

我知道如何给段落一个ID,所以为了测试目的,让我们假设

有ID段落。

这是我试过的CSS。

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.paragraphbounce {
  animation-name: tada;
}

1 个答案:

答案 0 :(得分:0)

https://jsfiddle.net/ss9tvwje/

/* The animation code */
@keyframes example {
    0% {top:15px}
    33% {top:30px}
    66% {top:40px}
    100% {top:15px}
}

.parent {
  position: relative;
}

/* The element to apply the animation to */
div.bounce {
    animation: example 4s infinite;
    position:absolute;
    top:15px;
    left:15px;
} 

从它的声音中你想要使用CSS动画,就像上面的(简单)例子一样。