افکت css زیبا بروی svg

سلام
امروز یک افکت زیبا با CSS3 بروی فایل های SVG آماده کرده ام که امید وارم خوشتون بیاد.

این افکت هم متحرک می کنه و هم رنگ عوض می کنه که با عث جلب توجه کاربر میشود . از این افکت می تونید برای تصاویر و وکتور هایی که جنبه اطلاعیه دارند استفاده کنید .

نویسنده کد: @Quiz_Master

کد های CSS :

.container{
height:100%;
width:100%;
position:absolute;
}
#star{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
#star svg{
width:200px;
-webkit-animation: tada 1.5s infinite ease;
animation: tada 1.5s infinite;
}

#outer_glow{
-webkit-animation: explodeem 1s infinite ease;
animation: explodeem 1s infinite ease;
-webkit-animation-fill-mode:forwards;
}
#inner_glow{
-webkit-animation: explodeem .5s infinite ease;
animation: explodeem .5s infinite ease;
-webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes tada {
۰% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
۱۰%, ۲۰% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
}
۳۰%,
۵۰%,
۷۰%,
۹۰% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
}
۴۰%,
۶۰%,
۸۰% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
}
۱۰۰% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes tada {
۰% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
۱۰%,
۲۰% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
}
۳۰%,
۵۰%,
۷۰%,
۹۰% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
}
۴۰%,
۶۰%,
۸۰% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
}
۱۰۰% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}

@keyframes explodeem {
۰% {
opacity:0;
}

۵۰% {
opacity:1;
}

۱۰۰% {
opacity:0;
}
}

@-webkit-keyframes explodeem {
۰% {
opacity:0;
}

۵۰% {
opacity:1;
}

۱۰۰% {
opacity:0;
}
}

/* Credentials */

.me{
position:absolute;
color:#dadada;
bottom:10px;
right:10px;
width:100%;
text-align:center;
text-decoration:none;
font-family:Helvetica, sans-serif;
}
.me:hover{
color:skyblue;
}

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.