چند انیمیشن جالب با CSS که شما باید ببینید ( قسمت دوم )
سی اس اس ( CSS: Cascading Style Sheets ) در کنار اچ تی ام ال ( HTML ) هستهٔ فناوری ساخت صفحه های وب هستند. سی اس اس روشی ساده برای نمایش چیدمان و جلوه های تصویری ( مانند نوع قلم، رنگ و اندازه ها ) بر صفحه های وب است. در اینجا ما به شما چند انیمیشن که برای برنامه نویس ها و طراحان وب می تواند بسیار مفید و جالب و جذاب باشد را نشان می دهیم. با این حال این مجموعه در بسیاری از چیزهایی که شما می توانید با CSS تحرک را ایجاد کنید تمرکز دارد و خلاقیت شما برای ایجاد انیمیشن با CSS نیز چند پله بالاتر می برد. پس با ما همراه باشید ( مثل قسمت قبل ) در چند انیمیشن جالب با CSS که شما باید ببینید.
در آغاز، وب سایتها با کُدهای ساده HTML نوشته میشدند. با پیشرفت وب و هنر طراحی آن، زبان کُد نویسی اش، اچ تی ام ال، پیچیده تر و پرانعطاف تر شد. با پیدایش الگوهای «CSS»، روش نادرست طراحی با جدول های پنهان در صفحه از گردونه خارج، و بجای آن استفاده مناسب از زبان کمکی «CSS» جایگزین شد. فناوریهای یکپارچه سازی پایگاه داده (Database)، مانند زبانهای کُدنویسی سمت سرور (Server-Side Scripting) مانند CGI، PHP، ASP. NET، ASP، JSP و ColdFusion، و استانداردهای طراحی مدرن با الگوها (CSS)، ساختار وب سایت ها را باز هم تغییر داده و آن را پیشرفته تر کرده اند.
برای درج CSS در یک سند اچ تی ام ال از یکی از سه روش زیر میتوان بهره گرفت:
شیوه نامهٔ داخلی
شیوه نامهٔ داخلی در قسمت <head> در سند اچ تی ام ال، با استفاده از تگ <style> معین می گردد.
شیوه نامهٔ خارجی
در این روش برای اتصال یک سند CSS که با پسوند .css شناخته می شود، از تگ <link> در قسمت <head> استفاده می شود.
شیوه نامهٔ درون خطی
در این روش مشخصات شیوه نامهٔ در تگ مربوطه ذکر میشود.
ما در اینجا کد های مربوط به انیمیشن ها را در اختیار شما قرار می دهیم و شما می توانید با استفاده از سایت codepen.io کد ها را وارد کرده و آن ها را اجرا کنید و می توانید در قسمت پایینی این سایت انیمیشن را تماشا کنید.
۱.جابجایی حالت روز / شب
در حال حاضر، شما می توانید شب و روز را با کد CSS تغییر دهید با ایده و نبوغ !
برای دیدن انیمیشن اینجا را کلیک کنید.
کد HTML
<div class=”wrapper”>
<div class=”toggle”>
<input class=”toggle-input” type=”checkbox” />
<div class=”toggle-bg”></div>
<div class=”toggle-switch”>
<div class=”toggle-switch-figure”></div>
<div class=”toggle-switch-figureAlt”></div>
</div>
</div></div>
کد CSS
/*
F5EB42 – sun inner
E4C74D – sun outer
FFFFFF – cloud inner
D4D4D2 – cloud outer
81C0D5 – parent outer
C0E6F6 – parent inner
FFFDF2 – moon inner
DEE1C5 – moon outer
FCFCFC – stars
*/
body {
background-color: #F3F3F3;
}
.wrapper {
padding-top: 40px;
text-align: center;
}
.toggle {
position: relative;
display: inline-block;
width: 100px;
margin-left: 100px;
padding: 4px;
border-radius: 40px;
}
.toggle:before,
.toggle:after {
content: ”;
display: table;
}
.toggle:after {
clear: both;
}
.toggle-bg {
position: absolute;
top: -4px;
left: -4px;
width: 100%;
height: 100%;
background-color: #C0E6F6;
border-radius: 40px;
border: 4px solid #81C0D5;
-webkit-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.toggle-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid red;
border-radius: 40px;
z-index: 2;
opacity: 0;
}
.toggle-switch {
position: relative;
width: 40px;
height: 40px;
margin-left: 50px;
background-color: #F5EB42;
border: 4px solid #E4C74D;
border-radius: 50%;
-webkit-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.toggle-switch-figure {
position: absolute;
bottom: -14px;
left: -50px;
display: block;
width: 80px;
height: 30px;
border: 8px solid #D4D4D2;
border-radius: 20px;
background-color: #fff;
-webkit-transform: scale(0.4);
transform: scale(0.4);
-webkit-transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.toggle-switch-figure:after {
content: ”;
display: block;
position: relative;
top: -65px;
right: -42px;
width: 15px;
height: 15px;
border: 8px solid #D4D4D2;
border-radius: 100%;
border-right-color: transparent;
border-bottom-color: transparent;
-webkit-transform: rotateZ(70deg);
transform: rotateZ(70deg);
background-color: #fff;
}
.toggle-switch-figure:before {
content: ”;
display: block;
position: relative;
top: -25px;
right: -10px;
width: 30px;
height: 30px;
border: 8px solid #D4D4D2;
border-radius: 100%;
border-right-color: transparent;
border-bottom-color: transparent;
-webkit-transform: rotateZ(30deg);
transform: rotateZ(30deg);
background-color: #fff;
}
.toggle-switch-figureAlt {
content: ”;
position: absolute;
top: 5px;
left: 2px;
width: 2px;
height: 2px;
background-color: #EFEEDA;
border-radius: 100%;
border: 4px solid #DEE1C5;
box-shadow: 42px -7px 0 -3px #FCFCFC, 75px -10px 0 -3px #FCFCFC, 54px 4px 0 -4px #FCFCFC, 83px 7px 0 -2px #FCFCFC, 63px 18px 0 -4px #FCFCFC, 44px 28px 0 -2px #FCFCFC, 78px 23px 0 -3px #FCFCFC;
-webkit-transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-webkit-transform: scale(0);
transform: scale(0);
}
.toggle-switch-figureAlt:before {
content: ”;
position: absolute;
top: -6px;
left: 18px;
width: 7px;
height: 7px;
background-color: #EFEEDA;
border-radius: 100%;
border: 4px solid #DEE1C5;
}
.toggle-switch-figureAlt:after {
content: ”;
position: absolute;
top: 19px;
left: 15px;
width: 2px;
height: 2px;
background-color: #EFEEDA;
border-radius: 100%;
border: 4px solid #DEE1C5;
}
.toggle-input:checked ~ .toggle-switch {
margin-left: 0;
border-color: #DEE1C5;
background-color: #FFFDF2;
}
.toggle-input:checked ~ .toggle-bg {
background-color: #484848;
border-color: #202020;
}
.toggle-input:checked ~ .toggle-switch .toggle-switch-figure {
margin-left: 40px;
opacity: 0;
-webkit-transform: scale(0.1);
transform: scale(0.1);
}
.toggle-input:checked ~ .toggle-switch .toggle-switch-figureAlt {
-webkit-transform: scale(1);
transform: scale(1);
}
۲.برنامه های کاربردی گوگل Now
گوگل در حال حاضر برنامه های کاربردی زیادی دارد و این کد مربوط به انیمیشن متحرک این برنامه ها می باشد.
برای دیدن انیمیشن اینجا را کلیک کنید.
کد HTML
<div class=”wrap”> <div class=”apps”> <div class=”app yellow”> <div class=”top”> <div class=”fa fa-heart”></div> </div> </div> <div class=”app red”> <div class=”top”> <div class=”fa fa-headphones”></div> </div> </div> <div class=”app blue”> <div class=”top”> <div class=”fa fa-cutlery”></div> </div> </div> <div class=”app green”> <div class=”top”> <div class=”fa fa-check”></div> </div> </div> <div class=”app pink”> <div class=”top”> <div class=”fa fa-home”></div> </div> </div> </div></div>
کد CSS
/*
* Inspired by: https://dribbble.com/shots/1878348-Google-Now-3rd-Party-Apps
*/
@-webkit-keyframes slide {
۰% {
-webkit-transform: scale(0, 0) translateY(0);
transform: scale(0, 0) translateY(0);
}
۱۵%, ۷۰% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
۹۰% {
-webkit-transform: scale(1, 1) translateY(600%);
transform: scale(1, 1) translateY(600%);
}
۱۰۰% {
-webkit-transform: scale(1, 1) translateY(600%);
transform: scale(1, 1) translateY(600%);
}
}
@keyframes slide {
۰% {
-webkit-transform: scale(0, 0) translateY(0);
transform: scale(0, 0) translateY(0);
}
۱۵%, ۷۰% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
۹۰% {
-webkit-transform: scale(1, 1) translateY(600%);
transform: scale(1, 1) translateY(600%);
}
۱۰۰% {
-webkit-transform: scale(1, 1) translateY(600%);
transform: scale(1, 1) translateY(600%);
}
}
@-webkit-keyframes size {
۰%, ۱۵% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}
۲۵%, ۱۰۰% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes size {
۰%, ۱۵% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}
۲۵%, ۱۰۰% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@-webkit-keyframes zoom {
۰%, ۲۵% {
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
۳۵%, ۱۰۰% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes zoom {
۰%, ۲۵% {
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
۳۵%, ۱۰۰% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
html {
height: 100%;
}
body {
font-family: sans-serif;
font-size: 11px;
height: 100%;
margin: 0;
background: #2FACF6;
}
.wrap {
width: 400px;
height: 300px;
display: table;
overflow: hidden;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.apps {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.app {
width: 44px;
height: 45px;
background: #fff;
box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.08);
display: inline-block;
margin: 0 10px;
-webkit-transform: scale(0, 0) translateY(0);
transform: scale(0, 0) translateY(0);
-webkit-animation-name: slide;
animation-name: slide;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.app:nth-child(2), .app:nth-child(2) .top, .app:nth-child(2) .fa {
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
.app:nth-child(3), .app:nth-child(3) .top, .app:nth-child(3) .fa {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.app:nth-child(4), .app:nth-child(4) .top, .app:nth-child(4) .fa {
-webkit-animation-delay: .6s;
animation-delay: .6s;
}
.app:nth-child(5), .app:nth-child(5) .top, .app:nth-child(5) .fa {
-webkit-animation-delay: .8s;
animation-delay: .8s;
}
.app .top {
height: 19px;
position: relative;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-animation-name: size;
animation-name: size;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.app .top .fa {
height: 19px;
width: 19px;
line-height: 19px;
text-align: center;
font-size: 11px;
color: #fff;
border-radius: 50%;
position: absolute;
right: 5px;
top: -9px;
box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.08);
-webkit-animation-name: zoom;
animation-name: zoom;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.app.yellow .top {
background: #F28F00;
}
.app.yellow .top .fa {
background: #FFCC3B;
}
.app.red .top {
background: #EA4301;
}
.app.red .top .fa {
background: #FF8963;
}
.app.blue .top {
background: #1E3F9C;
}
.app.blue .top .fa {
background: #74B0F8;
}
.app.green .top {
background: #669930;
}
.app.green .top .fa {
background: #B0D583;
}
.app.pink .top {
background: #BD0E53;
}
.app.pink .top .fa {
background: #FF4082;
}
.info {
position: absolute;
top: 0;
left: 0;
right: 0;
color: rgba(255, 255, 255, 0.64);
padding: 8px;
text-align: center;
}
.info a {
color: inherit;
text-decoration: none;
}
.info a:hover {
color: rgba(255, 255, 255, 0.8);
}
نوشته چند انیمیشن جالب با CSS که شما باید ببینید ( قسمت دوم ) اولین بار در LeanFiles.Com Academy – Online Training Courses پدیدار شد.
مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
LeanFiles.Com Academy – Online Training Courses
