Front-End
تمرین جدید
HTML & CSS
تحلیل جواب با AI
Python - پایتون
PHP - پی اچ پی
JavaScript - جاوا اسکریپت
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام
<style>
@keyframes floating {
0%, 100% {
transform: translateY(0);}
50% {
transform: translateY(-10px);}}
.float-box {
animation: floating 3s ease-in-out infinite;}
</style>
<!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>
.float-animation {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes float {
0% {
transform: translate(0, 0); /* موقعیت اولیه */
}
50% {
transform: translate(10px, -10px); /* جابجایی کمی به سمت راست و بالا */
}
100% {
transform: translate(0, 0); /* بازگشت به موقعیت اولیه */
}
}
<!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>
<!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>
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)
<!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>
<!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>
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام