چند انیمیشن جالب با 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 کد ها را وارد کرده و آن ها را اجرا کنید و می توانید در قسمت پایینی این سایت انیمیشن را تماشا کنید.
Gooey button.1 ( یک منوی جذاب )
با کلیک بر روی گزینه منو در این انیمیشن شما شاهد باز شدن چند گزینه که شامل آیکون های تنظیمات و ایمیل و … خواهید بود. این کد به شما یک منوی جذاب را میدهد که بسیار هم حرفه ای به نظر می رسد.
برای دیدن این انیمیشن اینجا را کلیک کنید.
کد HTML
<h1>Gooey Menu</h1>
<h2>Using CSS and SVG Filters</h2>
<h3>By <a href=”http://codepen.io/lbebber”>Lucas Bebber</a></h3>
<h4>Version 1 – <a href=”http://codepen.io/lbebber/pen/RNgBPP” target=”_blank”>Version 2</a> – <a href=”http://codepen.io/lbebber/pen/pvwZJp” target=”_blank”>Version 3</a> – <a href=”http://codepen.io/lbebber/pen/rawQKR” target=”_blank”>Version 4</a></h4>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>
<nav class=”menu”>
<input type=”checkbox” href=”#” class=”menu-open” name=”menu-open” id=”menu-open”/>
<label class=”menu-open-button” for=”menu-open”>
<span class=”hamburger hamburger-1″></span>
<span class=”hamburger hamburger-2″></span>
<span class=”hamburger hamburger-3″></span>
</label>
<a href=”#” class=”menu-item”> <i class=”fa fa-bar-chart”></i> </a>
<a href=”#” class=”menu-item”> <i class=”fa fa-plus”></i> </a>
<a href=”#” class=”menu-item”> <i class=”fa fa-heart”></i> </a>
<a href=”#” class=”menu-item”> <i class=”fa fa-envelope”></i> </a>
<a href=”#” class=”menu-item”> <i class=”fa fa-cog”></i> </a>
</nav>
<!– filters –>
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″>
<defs>
<filter id=”shadowed-goo”>
<feGaussianBlur in=”SourceGraphic” result=”blur” stdDeviation=”10″ />
<feColorMatrix in=”blur” mode=”matrix” values=”1 0 0 0 0 ۰ ۱ ۰ ۰ ۰ ۰ ۰ ۱ ۰ ۰ ۰ ۰ ۰ ۱۸ -۷″ result=”goo” />
<feGaussianBlur in=”goo” stdDeviation=”3″ result=”shadow” />
<feColorMatrix in=”shadow” mode=”matrix” values=”0 0 0 0 0 ۰ ۰ ۰ ۰ ۰ ۰ ۰ ۰ ۰ ۰ ۰ ۰ ۰ ۱ -۰٫۲″ result=”shadow” />
<feOffset in=”shadow” dx=”1″ dy=”1″ result=”shadow” />
<feBlend in2=”shadow” in=”goo” result=”goo” />
<feBlend in2=”goo” in=”SourceGraphic” result=”mix” />
</filter>
<filter id=”goo”>
<feGaussianBlur in=”SourceGraphic” result=”blur” stdDeviation=”10″ />
<feColorMatrix in=”blur” mode=”matrix” values=”1 0 0 0 0 ۰ ۱ ۰ ۰ ۰ ۰ ۰ ۱ ۰ ۰ ۰ ۰ ۰ ۱۸ -۷″ result=”goo” />
<feBlend in2=”goo” in=”SourceGraphic” result=”mix” />
</filter>
</defs>
</svg>
کد CSS
body {
background: #3f51b5;
color: white;
text-align: center;
}
a {
color: inherit;
}
h1, h2, h3, h4 {
margin: 0;
margin-bottom: 10px;
margin-top: 10px;
}
h1 {
font-size: 3em;
}
.menu {
-webkit-filter: url(“#shadowed-goo”);
filter: url(“#shadowed-goo”);
}
.menu-item, .menu-open-button {
background: #ff4081;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 50%;
margin-left: -190px;
padding-top: 20px;
padding-left: 190px;
width: 380px;
height: 250px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
}
.menu-item:hover {
background: white;
color: #ff4081;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 70ms;
transition-duration: 70ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 130ms;
transition-duration: 130ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 190ms;
transition-duration: 190ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
}
.menu-item:nth-child(7) {
-webkit-transition-duration: 310ms;
transition-duration: 310ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 160ms;
transition-duration: 160ms;
-webkit-transform: translate3d(114.42548px, 11.48084px, 0);
transform: translate3d(114.42548px, 11.48084px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 240ms;
transition-duration: 240ms;
-webkit-transform: translate3d(77.18543px, 85.2491px, 0);
transform: translate3d(77.18543px, 85.2491px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 320ms;
transition-duration: 320ms;
-webkit-transform: translate3d(0.09158px, 114.99996px, 0);
transform: translate3d(0.09158px, 114.99996px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: translate3d(-77.04956px, 85.37192px, 0);
transform: translate3d(-77.04956px, 85.37192px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
-webkit-transition-duration: 480ms;
transition-duration: 480ms;
-webkit-transform: translate3d(-114.40705px, 11.66307px, 0);
transform: translate3d(-114.40705px, 11.66307px, 0);
}
Walking Robot.2 ( راه رفتن ربات )
این ربات راه می رود و راه می رود و راه می رود ( البته در جا ) !!!
برای دیدن این انیمیشن اینجا را کلیک کنید.
کد HTML
<h1>For best view please use Chrome!</h1>
<div id=’robot’>
<div id=’head’>
<div class=’front’></div>
<div class=’back’></div>
<div class=’left’></div>
<div class=’right’></div>
</div>
<div id=’torso’>
<div class=’front’></div>
<div class=’back’></div>
<div class=’left’></div>
<div class=’right’></div>
</div>
<div id=’left_arm’>
<div class=’upper_arm’>
<div class=’front’></div>
<div class=’back’></div>
<div class=’left’></div>
<div class=’right’></div>
<div class=’top’></div>
<div class=’bottom’></div>
</div>
<div class=’forearm’>
<div class=’front’></div>
<div class=’back’></div>
<div class=’left’></div>
<div class=’right’></div>
<div class=’top’></div>
<div class=’bottom’></div>
</div>
</div>
<div id=’right_arm’>
<div class=’upper_arm’>
<div class=’front’></div>
<div class=’back’></div>
<div class=’left’></div>
<div class=’right’></div>
<div class=’top’></div>
<div class=’bottom’></div>
</div>
<div class=’forearm’>
<div class=’front’></div>
<div class=’back’></div>
<div class=’left’></div>
<div class=’right’></div>
<div class=’top’></div>
<div class=’bottom’></div>
</div>
</div>
<div id=’left_leg’>
<div class=’thigh’>
<div class=’front’></div>
<div class=’back’></div>
<div class=’left’></div>
<div class=’right’></div>
<div class=’top’></div>
<div class=’bottom’></div>
</div>
<div class=’lower_leg’>
<div class=’front’></div>
<div class=’back’></div>
<div class=’left’></div>
<div class=’right’></div>
<div class=’top’></div>
<div class=’bottom’></div>
</div>
</div>
<div id=’right_leg’>
<div class=’thigh’>
<div class=’front’></div>
<div class=’back’></div>
<div class=’left’></div>
<div class=’right’></div>
<div class=’top’></div>
<div class=’bottom’></div>
</div>
<div class=’lower_leg’>
<div class=’front’></div>
<div class=’back’></div>
<div class=’left’></div>
<div class=’right’></div>
<div class=’top’></div>
<div class=’bottom’></div>
</div>
</div>
</div>
کد CSS
/* ————————————-
* Style
* ————————————- */
body {
padding: 50px;
background: radial-gradient(1000px, #f6f5f1, #cec9b3);
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #9aacb1;
font: 24px Verdana, sans-serif;
font-weight: normal;
}
#robot {
width: 300px;
height: 620px;
margin: 50px auto 0;
position: relative;
transform-style: preserve-3d;
transform-origin: 50% 0 -30px;
animation: spin 60s linear infinite;
}
/*——- robot body ——- */
#head {
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 120px;
}
#torso {
width: 200px;
height: 230px;
position: absolute;
top: 80px;
left: 50px;
}
#left_arm {
width: 25px;
height: 240px;
position: absolute;
top: 110px;
left: 30px;
}
#right_arm {
width: 25px;
height: 240px;
position: absolute;
top: 110px;
right: 30px;
}
.upper_arm {
width: 25px;
height: 100px;
position: relative;
transform-style: preserve-3d;
}
.forearm {
width: 25px;
height: 120px;
margin-top: 20px;
}
#left_leg {
width: 30px;
height: 340px;
position: absolute;
top: 280px;
left: 85px;
}
#right_leg {
width: 30px;
height: 340px;
position: absolute;
top: 280px;
right: 85px;
}
.thigh {
width: 30px;
height: 150px;
position: relative;
transform-style: preserve-3d;
}
.lower_leg {
width: 30px;
height: 170px;
margin-top: 20px;
}
/*——- 3d effects ——- */
.front {
width: inherit;
height: inherit;
background: #9aacb1;
position: absolute;
}
.back {
width: inherit;
height: inherit;
background: #9aacb1;
position: absolute;
}
.left {
width: inherit;
height: inherit;
position: absolute;
background: #b7c4c7;
transform-origin: 0 0 0;
transform: rotateY(90deg);
}
.right {
width: inherit;
height: inherit;
position: absolute;
background: #b7c4c7;
transform-origin: 100% 0 0;
transform: rotateY(-90deg);
}
.top {
width: inherit;
background: #8ca0a6;
position: absolute;
transform-origin: 0 0 0;
transform: rotateX(-90deg);
}
.bottom {
width: inherit;
background: #8ca0a6;
position: absolute;
transform-origin: 0 0 0;
transform: rotateX(-90deg);
}
#head {
transform-style: preserve-3d;
transform-origin: 50% 0 -30px;
animation: torso 0.8s ease-in-out infinite alternate;
}
#head .back {
transform: translateZ(-60px);
}
#torso {
transform-style: preserve-3d;
transform-origin: 50% 0 -30px;
animation: torso 0.8s ease-in-out infinite alternate;
}
#torso .front {
width: 0;
height: 0;
background: none;
border-top: 230px solid #9aacb1;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
#torso .back {
width: 0;
height: 0;
background: none;
border-top: 230px solid #9aacb1;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform: translateZ(-60px);
}
#torso .left {
width: 60px;
height: 250px;
transform: rotateY(90deg) rotateX(23.5deg);
}
#torso .right {
width: 60px;
height: 250px;
transform: rotateY(-90deg) rotateX(23.5deg);
right: 0;
}
#left_arm, #right_arm {
transform-style: preserve-3d;
transform-origin: 0 0 -10px;
animation: arm 0.8s ease-in-out infinite alternate;
}
#left_arm .back, #right_arm .back {
transform: translateZ(-25px);
}
#left_arm .top, #right_arm .top {
height: 25px;
}
#left_arm .bottom, #right_arm .bottom {
height: 25px;
bottom: -25px;
}
#right_arm {
animation-delay: 0.8s;
}
#right_arm .forearm {
animation-delay: 0.8s;
}
.forearm {
transform-style: preserve-3d;
transform-origin: 0 0 0;
animation: forearm 0.8s ease-in-out infinite alternate;
}
#left_leg, #right_leg {
transform-style: preserve-3d;
transform-origin: 0 0 -20px;
animation: leg 0.8s ease-in-out infinite alternate;
}
#left_leg .back, #right_leg .back {
transform: translateZ(-30px);
}
#left_leg .top, #right_leg .top {
height: 30px;
}
#left_leg .bottom, #right_leg .bottom {
height: 30px;
bottom: -30px;
}
#left_leg {
animation-delay: 0.8s;
}
#left_leg .lower_leg {
animation-delay: 0.8s;
}
.lower_leg {
transform-style: preserve-3d;
transform-origin: 0 0 0;
animation: lower_leg 0.8s ease-in-out infinite alternate;
}
/*——- animation ——- */
@keyframes spin {
۰% {
transform: rotateY(0deg);
}
۱۰۰% {
transform: rotateY(360deg);
}
}
@keyframes torso {
۰% {
transform: rotateY(-7deg);
}
۱۰۰% {
transform: rotateY(7deg);
}
}
@keyframes arm {
۰% {
transform: rotateX(-15deg) translateZ(-20px);
}
۱۰۰% {
transform: rotateX(20deg) translateZ(-20px);
}
}
@keyframes forearm {
۰% {
transform: rotateX(0deg);
}
۱۰۰% {
transform: rotateX(60deg);
}
}
@keyframes leg {
۰% {
transform: rotateX(-5deg) translateZ(-15px);
}
۱۰۰% {
transform: rotateX(25deg) translateZ(-15px);
}
}
@keyframes lower_leg {
۰% {
transform: rotateX(0deg) translateY(15px);
}
۱۰۰% {
transform: rotateX(-50deg) translateY(15px);
}
}
Flexing Pagination Arrows.3 ( عدد ها را اضافه و کم کنید )
شما می توانید با این انیمیشن به صفحات مختلف وب بروید با این تفاوت که از این کار لذت می برید.
برای دیدن این انیمیشن اینجا را کلیک کنید.
کد HTML
<div class=”counter”></div>
<button class=”paginate left”><i></i><i></i></button>
<button class=”paginate right”><i></i><i></i></button>
کد CSS
body {
background: #33ab83;
}
button {
-webkit-appearance: none;
background: transparent;
border: 0;
outline: 0;
}
.paginate {
position: relative;
margin: 10px;
width: 50px;
height: 50px;
cursor: pointer;
transform: translate3d(0, 0, 0);
position: absolute;
top: 50%;
margin-top: -20px;
-webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.2));
}
.paginate i {
position: absolute;
top: 40%;
left: 0;
width: 50px;
height: 5px;
border-radius: 2.5px;
background: #fff;
transition: all 0.15s ease;
}
.paginate.left {
right: 58%;
}
.paginate.left i {
transform-origin: 0% 50%;
}
.paginate.left i:first-child {
transform: translate(0, -1px) rotate(40deg);
}
.paginate.left i:last-child {
transform: translate(0, 1px) rotate(-40deg);
}
.paginate.left:hover i:first-child {
transform: translate(0, -1px) rotate(30deg);
}
.paginate.left:hover i:last-child {
transform: translate(0, 1px) rotate(-30deg);
}
.paginate.left:active i:first-child {
transform: translate(1px, -1px) rotate(25deg);
}
.paginate.left:active i:last-child {
transform: translate(1px, 1px) rotate(-25deg);
}
.paginate.left[data-state=disabled] i:first-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.left[data-state=disabled] i:last-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.left[data-state=disabled]:hover i:first-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.left[data-state=disabled]:hover i:last-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.right {
left: 58%;
}
.paginate.right i {
transform-origin: 100% 50%;
}
.paginate.right i:first-child {
transform: translate(0, 1px) rotate(40deg);
}
.paginate.right i:last-child {
transform: translate(0, -1px) rotate(-40deg);
}
.paginate.right:hover i:first-child {
transform: translate(0, 1px) rotate(30deg);
}
.paginate.right:hover i:last-child {
transform: translate(0, -1px) rotate(-30deg);
}
.paginate.right:active i:first-child {
transform: translate(1px, 1px) rotate(25deg);
}
.paginate.right:active i:last-child {
transform: translate(1px, -1px) rotate(-25deg);
}
.paginate.right[data-state=disabled] i:first-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate.right[data-state=disabled] i:last-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate.right[data-state=disabled]:hover i:first-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate.right[data-state=disabled]:hover i:last-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate[data-state=disabled] {
opacity: 0.3;
cursor: default;
}
.counter {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
margin-top: -15px;
font-size: 30px;
font-family: Helvetica, sans-serif;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
color: #fff;
}
کد js
// basic paging logic to demo the buttons
var pr = document.querySelector(‘.paginate.left’);
var pl = document.querySelector(‘.paginate.right’);
pr.onclick = slide.bind(this, -1);
pl.onclick = slide.bind(this, 1);
var index = 0,
total = 5;
function slide(offset) {
index = Math.min(Math.max(index + offset, 0), total – 1);
document.querySelector(‘.counter’).innerHTML = (index + 1) + ‘ / ‘ + total;
pr.setAttribute(‘data-state’, index === 0 ? ‘disabled’ : ”);
pl.setAttribute(‘data-state’, index === total – 1 ? ‘disabled’ : ”);
}
slide(0);
نوشته چند انیمیشن جالب با CSS که شما باید ببینید ( قسمت چهارم ) اولین بار در LeanFiles.Com Academy – Online Training Courses پدیدار شد.
مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
LeanFiles.Com Academy – Online Training Courses
