تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

انیمیشن شناور

آسان 269/ دانلود 149 بازدید

کلاسی برای انیمیشن شناور بسازید. هر المانی که این کلاس را به آن بدهیم باید سر جای خود حرکات شناور داشته باشد.

5 جواب

<style>
  @keyframes floating {
    0%, 100% {
      transform: translateY(0);}    
    50% {
      transform: translateY(-10px);}}
  .float-box {
    animation: floating 3s ease-in-out infinite;}
</style>
@keyframes float {
  0% {
    transform: translate(0, 0); /* موقعیت اولیه */
  }
  50% {
    transform: translate(10px, -10px); /* جابجایی کمی به سمت راست و بالا */
  }
  100% {
    transform: translate(0, 0); /* بازگشت به موقعیت اولیه */
  }
}
Hadi.jalooli دانلود HTML & CSS
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>انیمیشن شناور</title>
    
<style>

   /* تعریف استایل اولیه دکمه */
button {
    padding: 15px 30px;
    font-size: 18px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  /* تعریف کلاس شناور */
  .float {
    animation: float 3s ease-in-out infinite;
  }
  
  /* تعریف انیمیشن شناور */
  @keyframes float {
    0% {
      transform: translate(0, 0); /* موقعیت اولیه */
    }
    50% {
      transform: translate(10px, -10px); /* جابجایی کمی به سمت راست و بالا */
    }
    100% {
      transform: translate(0, 0); /* بازگشت به موقعیت اولیه */
    }
  }

  /* این یه نمونه برای ساخت یه دکمه شناور هست که من به صورت مستقیم تو کدم استفاده کردم
   و شما میتونین به عنوان یه کلاس تعریف کنید و ازش استفاده کنید*/
  </style>
</head>
<body>
    <button class="float">دکمه شناور</button>
</body>
</html>
Hadi.jalooli دانلود HTML & CSS
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)
Mma123 دانلود Python
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css3</title>
  <style>
@keyframes float {
  0% {
    transform: translate(0, 0); /* موقعیت اولیه */
  }
  50% {
    transform: translate(10px, -10px); /* جابجایی کمی به سمت راست و بالا */
  }
  100% {
    transform: translate(0, 0); /* بازگشت به موقعیت اولیه */
  }
}
    div {
      background: #afafaf;
      width: 200px;
      height: 50px;
      transition: 0.5s;
      animation-name: float;
      animation-delay: 3s;
      animation-duration: 3s;
      animation-fill-mode: forwards;
    }
  </style>  
</head>
<body>
  <div class="div"></div>
</body>
Nima1393 دانلود HTML & CSS
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

/* کداتو توی این بخش بنویس
فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
البته قبلش این سه خط رو پاک کن */
                    
  • لطفا جواب های تکراری ارسال نکن
  • قبل از ارسال، جوابت رو داخل یک کد ادیتور مثل vscode بنویس و بعد اینجا Paste کن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی
×
×
بستن