حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود

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

تمرین آسان 1104 visibility link download flag

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

👨‍💻 11 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

reply 11

visibility
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Unun..ali..nunu HTML & CSS
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Programmer HTML & CSS
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
M.saghafi HTML & CSS 
.float-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
Ai 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 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation</title>
  <style>
    @keyframes anim{
      from{
        background-color: rgba(0, 255, 255, 0.516);
      }
      to{
        background-color: rgb(202, 231, 12);

        transform: rotate(360deg);
      }
    }
    div{
      width: 250px;
      padding: 10px;
      border: 3px dashed black;
      border-radius: 20px;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 2vw;
      box-sizing: border-box;
      background-color: rgba(0, 255, 255, 0.516);
      position: fixed;
      top: 50%;
      left: 50%;
      font-weight: 900;
      color: rgb(54, 50, 93);
      animation-name: anim;
      animation-duration: 3s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;

    }
  </style>
</head>
<body>
  <div>HeHeHeHe</div>
</body>
</html>
Mhrshad.jfri HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>انیمیشن شناور</title>
    <style>
        @keyframes floating {
            0%, 100% {
                transform: translateY(0);}    
            50% {
                transform: translateY(-10px);}}
        .float-box {
            animation: floating 3s ease-in-out infinite;
            font-size: 50px;
            color: white;
            background-color: rgb(101, 201, 247);
        }
</style>
    </style>
</head>
<body>
    <p class="float-box">123</p>
</body>
</html>
F.sarli 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>
Imrinema HTML & CSS
<< صفحه قبل 1 2 صفحه بعد >>

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×

حساب کاربری

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

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