Я провел много исследований на популярных веб-сайтах, но я не могу найти эту подпрыгивающую и летающую анимацию.Отказывание текстовой анимации, как DVD
Я хочу добавить летающих и подпрыгивая водяной знак на веб-странице.
подпрыгивать и летать эффект вы можете разработать с помощью translate функцию
#circle{
width:50px;
height:100px;
background:red;
border-radius:50%;
margin-top:100px;
}
p{
text-align:center;
color:yellow;
}
.bounce{
animation:bounce 5s linear 100;
}
@keyframes bounce{
0%{
transform:translate(0px,0px);
}
25%{
transform:translate(100px,100px);
}
50%{
transform:translate(200px,0px);
background:green;
}
75%{
transform:translate(100px,-100px);
}
100%{
transform:translate(0px,0px);
}
}<div id="circle" class="bounce"><p> your text here</p></div>Я не знаю, кто из нижеперечисленных избирателей, не комментируя, пожалуйста, сделайте комментарий, когда вы голосуете, а затем в следующий раз я смогу улучшить свой ответ. –
Трудно сказать - если кто-то занижает без комментариев, то мы никогда не узнаем если они не вернутся, чтобы объяснить это. Возможно, кто-то рассматривает этот вопрос как не относящийся к теме, и на него не следует отвечать, исходя из того, что краткие вопросы без предварительной попытки не должны поощряться с ответами. – halfer
body { background: #222; }
.box {
background-color: #61ab20;
margin: 0 auto;
width: 500px;
height: 300px;
position: relative;
box-shadow: inset 0 0 3px #000;
border-radius: 5px;
border: 1px solid #111;
overflow: hidden;
}
.box b {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #3673cf;
box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);
position: absolute;
-webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
-moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
-o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
}
@-webkit-keyframes moveX {
from { left: 0; } to { left: 480px; }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: 480px; }
}
@-o-keyframes moveX {
from { left: 0; } to { left: 480px; }
}
@keyframes moveX {
from { left: 0; } to { left: 480px; }
}
@-webkit-keyframes moveY {
from { top: 0; } to { top: 280px; }
}
@-moz-keyframes moveY {
from { top: 0; } to { top: 280px; }
}
@-o-keyframes moveY {
from { top: 0; } to { top: 280px; }
}
@keyframes moveY {
from { top: 0; } to { top: 280px; }
}<div class="box"><b></b></div>Попробуйте, это мой быть полезным ...
Очень простое использование одушевленные CSS https://daneden.github.io/animate.css/
Это очень просто.
Это не по теме для StackOverflow; мы не помогаем вам находить библиотеки или инструменты - мы помогаем с реальными проблемами с кодом. – ndugger