我想将浮动效果应用于某些文本。我尝试使用选框。
.bounce {
height: 50px;
overflow: hidden;
position: relative;
}
.bounce p {
position: absolute;
width: 50%;
margin: 0;
line-height: 50px;
text-align: center;
color: #FFF;
opacity: 0.7;
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
-moz-animation: bouncing-text 25s linear infinite alternate;
-webkit-animation: bouncing-text 25s linear infinite alternate;
animation: bouncing-text 25s linear infinite alternate;
}
@keyframes bouncing-text {
0% {
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
100% {
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<div class="bounce">
<p>SOFT LANDSCAPING</p>
<br />
<p>HARD LANDSCAPING</p>
<br />
</div>
这是为了弹跳。我想让文字漂浮在水中。 请帮我找一个解决方案。如果有任何其他方式,请告诉我。
答案 0 :(得分:3)
您可以使用css3动画名称属性来实现此目的。
HTML:
<div class="floating">
Floating effect like water
</div>
CSS:
.floating {
-webkit-animation-name: Floatingx;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
@-webkit-keyframes Floatingx {
from {-webkit-transform:translate(0, 0px);}
65% {-webkit-transform:translate(0, 15px);}
to {-webkit-transform: translate(0, -0px);}
}
@-moz-keyframes Floating {
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}
以下是fiddle。
有关动画名称的工作原理的更多信息,请查看以下内容:animate-name property。
答案 1 :(得分:1)