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

ترنزیشن برای تمام المان ها

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

کد CSS ای بنویسید که برای تمام ویژگی های تمام المان های صفحه، ترنزیشنی با زمان 200 میلی ثانیه از نوع ease لحاظ کند.

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

reply 10

visibility 
* {
  transition: all 200ms ease;
}
Hadi.jalooli HTML & CSS 
* 
{
  transition: all 200ms ease;
}
/*با استفاده از (*) میتوان استایل هایی به تمام عناصر صفحه داد*/
Unun..ali..nunu HTML & CSS 
<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        transition:all 0.200s ease
      }
      div:hover{
        transform:rotate(1.5deg)
      }
    </style>
  </head>
  <body>
    <div>Hello Word!</div>
  </body>
</html>
Programmer HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box</title>
    <style>
        * {
            transition: all 200ms ease;
        }

        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #1e1e3f, #3a2a5d);
            font-family: sans-serif;
        }

        .box {
            width: 180px;
            height: 180px;
            background: linear-gradient(135deg, #7c73f2, #4a3fc2);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(124, 115, 242, 0.5);
            animation: floatAnimation 3s ease-in-out infinite;
        }

        .box:hover {
            transform: scale(1.1);
            box-shadow: 0 15px 40px rgba(124, 115, 242, 0.8);
            border-radius: 35%;
        }

        @keyframes floatAnimation {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
M.saghafi HTML & CSS 
<!DOCTYPE html>
<html>
<head>
    <title>Project</title>
    <link rel="stylesheet" href="project.css" type="text/css">
</head>
<body>
    <div>
      <p>Test</p>
    </div>
</body>
</html>

<!--CSS-->
@charset 'utf-8';
*{
    padding: 0px;
    margin: 0xp;
    font-style: italic;
    box-sizing: border-box;
    transition: all 200ms ease;
}
div>p{
    color: red;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 50px;
}
Mohammad.mahdi88 HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Heart and trabsition</title>
  <style>
    *{
      transition: all 200ms ease;
    }
    .heart{
      color: red;
      font-size: 10em;
      padding: 10px;
      margin: auto;
      width: 100px;
      height: 100px;
      background-color: rgb(255, 255, 255);
      text-align: center;
      text-shadow: 0 0 10px black;
    }
    .heart:hover{
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  <div class="heart">
    ♥
  </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> 
        * {
            transition:all 0.200s ease;
            padding: 10px;
            margin: 0px;
            font-style: italic;
            box-sizing: border-box;
        }
        div{
            font-size: 8em;
            color: red;

        }
        div:hover{
            transform:rotate(1.5deg)
        }
    </style>
</head>
<body>
    <div>12345</div>
</body>
</html>
F.sarli HTML & CSS 
<!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>
    * {
      transition: all 200ms ease;
    }
    .div {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      font-family: sans-serif;
      font-size: 1.4em;
      border-radius: 15px;
    }
    .div:hover p{
      color: blue;
    }
</style>  
</head>
<body>
  <div class="div">
    <p id="p">transition in 200ms</p>
  </div>
</body>
Imrinema Python 
<!DOCTYPE html>
<html lang="en";>
<head>
<meta charset="UTF-8">
<meta name="viewport " content="width=device-width,intial-scale=1.0">
<title> hearts</title>
<style>
    *{
        transition: all ease 200ms;
    }
    div:hover{
       transform:scale(0.5) ;
    }
</style>
</head>
<body>
<div style="font-size: 100px; color: red; text-align: center;">♥</div>
</body>
</html>
Maryam.n HTML & CSS 
* {
  transition: all 200ms ease;
}
پاسخ هوش مصنوعی Ai HTML & CSS

ارسال جواب

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

×

حساب کاربری

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

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