سون لرن • آموزش

در این قسمت میخوام یک کد ( Text particle ) جالب رو در اختیارتون بزارم. همونطور که دیدید میتونین با استفاده از ذرات رنگارنگ و متحرک، متنهای مورد نظر خودتون رو به وجود بیارید. با استفاده از تنظیمات موجود در سایدبار سمت چپ میتونین استایل متنها رو تغییر بدین. بدلیل اینکه حجم کدها زیاد بود ، اونارو در ا,کدهای,جذاب,دیدنی,ساخت,زیبا,ذرات,متحرک ...ادامه مطلب

@import url(http://fonts.googleapis.com/css?family=Martel+Sans:200,300,400,800,900); *, *:before, *:after {   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } body {   font-family: 'Martel Sans', sans-serif;   background-color: #000; } section {   height: 350px;   width: 94%;   box-shadow: 0px 0px 146px 21px rgba(0, 0, 0, 0.75);   background-color: #000;   background-repeat: no-repeat;   background-size: cover;   background-position: center center;   position: relative;   overflow: hidden;   width: 100%;   margin: 0 auto 0px; } section a {   text-transform: uppercase;   text-align: center;   text-decoration: none;   font-size: 4.875em;   font-weight: 900;   color: #fff; } section a:after, section a:before {   content: ''; } section.p16 {   background-image: url("7.jpg"); } section.p16 a {   width: 632px;   height: 124px;   line-height: 124px;   position: absolute;   top: 50%;   left: 50%;   margin-left: -316px;   margin-top: -62px;   z-index: 10;   overflow: hidden; } section.p16 a:before, section.p16 a:after {   position: absolute;   left: 0;   display: block;   height: 150px;   background-size: contain;   opacity: 1;   -webkit-transition: all 0.4s cubic-bezier(0.17, 0.67, 0.64, 1.55);   -moz-transition: all 0.4s cubic-bezier(0.17, 0.67, 0.64, 1.55);   transition: all 0.4s cubic-bezier(0.17, 0.67, 0.64, 1.55);   opacity: 0;   top: 50px; } section.p16 a:before {   background-image: url(7-1.png);   width: 1772px;   z-index: -1;   -webkit-animation: chicaum 60s infinite linear;   -moz-animation: chicaum 60s infinite linear;   animation: chicaum 60s infinite linear; } section.p16 a:after {   background-image: url(7-2.png);   width: 1682px;   z-index: 1;   -webkit-animation: chicadois 30s infinite linear;   -moz-animation: chicadois 30s infinite linear;   animation: chicadois 30s infinite linear; } section.p16 a:hover:before, section.p16 a:hover:after {   opacity: 1;   top: 0; } section.p16 a:hover:before {   transition-delay:, ...ادامه مطلب

در این قسمت میخوام یک کد ( Foo Particles Four ) جالب رو در اختیارتون بزارم. همونطور که دیدین که در اون یک دایره رنگارنگ قرار داده شده که به طرفین حرکت میکنه و اثری رو از خودش میزاره و بعد از مدتی پاک میشه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers., ...ادامه مطلب