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

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

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

تمرین آسان 269/ دانلود 375 بازدید

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

افزودن تمرین جدید

7 جواب

<style>
  @keyframes floating {
    0%, 100% {
      transform: translateY(0);}    
    50% {
      transform: translateY(-10px);}}
  .float-box {
    animation: floating 3s ease-in-out infinite;}
</style>
Unun..ali..nunu دانلود HTML & CSS 
<!DOCTYPE html>
<html>
  <head>
    <style>

      @keyframes Test {
        from{
          color:red ;
          margin: 1px;
        }
        to {
          color:blue;
          margin:10px;
        }
      }

      div {
        width: 200px;
        border:2px solid mediumspringgreen;
        padding:10px;
        margin:auto;
        color:red;
        animation-name: Test;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
      }

    </style>
  </head>
  <body>
    <div>RezaNajafiane</div>

  </body>
</html>
Rezanajafianez دانلود HTML & CSS 
@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 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>floating animation</title>
    <style>
        .floating{
            animation: float 3s ease-in-out infinite ;
        }
        @keyframes float{
            0%{
                transform: translateY(0);
            }
            50%{
                transform: translateY(-15px);
            }
            100%{
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
<div class="floating" style="width: 100px; background-color: blueviolet; border: 2px solid; float: right;">♥ </div>
<div class="floating" style="width: 100px; background-color: aqua ; border: 2px solid;">ј</div>
</body>
</html>
Maryam.n دانلود HTML & CSS

ارسال جواب

  • قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
  • لطفا جواب های تکراری ارسال نکن
  • سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
  • لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

مطالب مرتبط

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

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
×

نمیتونم این تمرین رو حل کنم 😞

اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو 😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و یواش یواش به سراغ تمرینات سخت تر بری. همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری

یادگیری برنامه نویسی
بستن