آموزش transition در CSS3
در این آموزش قصد داریم با transition آشنا شویم که رویداد های صفحه شما را به تاخیر بیشتری انجام خواهد داد.
برای نمونه در قطعه کد زیر میبینید که وقتی موس را بر روی box های رنگی میبریم و رنگ آنها به ناگهان تغییر پیدا میکند.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="lesson.css">
</head>
<body>
<div id="main">
<div class="test">تخصصی ترین مجموعه آموزشی و پژوهشی آنلاین ایران – ارائه آموزش‌های ویدئویی و فیلم‌های آموزشی شبکه ، سیسکو ، مایکروسافت ، لینوکس ، امنیت ، طراحی وب ، تست نفوذ ، زبان انگلیسی ، زبان فرانسه ، زبان ترکی استانبولی و دروس تخصصی دانشگاهی فنی و مهندسی
</div>
<div class="test">تخصصی ترین مجموعه آموزشی و پژوهشی آنلاین ایران – ارائه آموزش‌های ویدئویی و فیلم‌های آموزشی شبکه ، سیسکو ، مایکروسافت ، لینوکس ، امنیت ، طراحی وب ، تست نفوذ ، زبان انگلیسی ، زبان فرانسه ، زبان ترکی استانبولی و دروس تخصصی دانشگاهی فنی و مهندسی
</div>
<div class="test">تخصصی ترین مجموعه آموزشی و پژوهشی آنلاین ایران – ارائه آموزش‌های ویدئویی و فیلم‌های آموزشی شبکه ، سیسکو ، مایکروسافت ، لینوکس ، امنیت ، طراحی وب ، تست نفوذ ، زبان انگلیسی ، زبان فرانسه ، زبان ترکی استانبولی و دروس تخصصی دانشگاهی فنی و مهندسی
</div>
</div>
</body>
</html>
body{
background-color: #eee;
}
#main{
background-color: rgba(0, 255, 247,0.4);
width: 500px;
height: auto;
text-align: right;
margin-left: 25%;
background: repeating-linear-gradient(45deg,blue 20%,aqua,white,blue);
}
div{
border-radius: 30px;
margin: 20px;
padding: 20px;
text-shadow: #333 0 3px 3px;
box-shadow: #333 3px 3px 20px, #333 3px 3px 20px;
}
div:nth-child(2n){
background-color: blue;
}
div:nth-child(2n):hover{
background-color: aqua;
}
div:nth-child(2n+1){
background-color: yellow;
}
div:nth-child(2n+1):hover{
background-color: #ffee82;
}
حال میتوانید با استفاده از دستور transition و اعمال یک زمان مشخص، در رویداد های خود تاخیر به وجود آورده و همچنین با دستور transform میتوانیم مقیاس را افزایش داده و این عمل را با دستور scale انجام میدهیم.
.test{
transition: all 1s;
}
div:nth-child(2n){
background-color: blue;
}
div:nth-child(2n):hover{
background-color: aqua;
transform: scale(1.1);
}
div:nth-child(2n+1){
background-color: yellow;
}
div:nth-child(2n+1):hover{
background-color: #ffee82;
transform: scale(1.1);
}
میبینید که تغییر رنگ ها و همچنین تغییر مقیاس به آرامی و پس از گذشت یک ثانیه انجام میشوند.
با این دستور میتوانید تغیرات مطلوبی را در سایت خود اعمال کرده و سرعت تغییرات را تغییر دهید.
برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.
