برق زدن بک گراند

[zary-y 13]

سلام

من یک سایت دارم که تصویر پس زمینه ی اون لوگوی شرکت هستش

میخوام این لوگو حالت برق داشته باشه

یعنی به صورت یک افکت باشه که هر از چند گاهی لوگو برق بزنه

چجوری میشه این کارا کرد؟

[ابوالفضل طالبی 280]

به صورت فلش یا gif طراحی کنید

نرم افزار swish max میتونه به شما کمک کنه

[zary-y 13]

کسیآشنایی داره با این نرم افزار؟

[Vahid Taheri 74]

حتما حالا نباید swish max باشه.

یه تصویر متحرک gif با فتوشاپ هم میتونه کارتون رو راه بیاندازه

آموزش هاش هم توی اینترنت هست

[bestdata 16]

با css 3 هم میشه اگه شد کدش رو براتون میزنم

[particular 15]

با css 3 هم میشه اگه شد کدش رو براتون میزنم

دوست من اگه لوگو بدم واسه منم این کارو میکنی ؟ اگه آره آدرس ایمیلتون پ . خ کنید تا لوگو رو براتون ارسال کنم .

با تشکر

[bestdata 16]

دوست من اگه لوگو بدم واسه منم این کارو میکنی ؟ اگه آره آدرس ایمیلتون پ . خ کنید تا لوگو رو براتون ارسال کنم .

با تشکر

اگه این کار رو بکنم فایلش رو همینجا میذارم و شما فقط کافیه عکسش رو عوض کنید ... (صبر کنید انجام دادم چشم مال شما رو هم انجام میدم)

[bestdata 16]

سلام

من یک سایت دارم که تصویر پس زمینه ی اون لوگوی شرکت هستش

میخوام این لوگو حالت برق داشته باشه

یعنی به صورت یک افکت باشه که هر از چند گاهی لوگو برق بزنه

چجوری میشه این کارا کرد؟

<style>
/* Icon */

.icon {
 display: block;
 width: 167px;
 height: 219px;
 background: red;

 position: relative;
 overflow: hidden;
}

/* "shine" element */
/* Could be a pseudo element but they lack support for CSS transitions in some browsers */

.icon .icon-effect {
 position: absolute;
 top: -110%;
 left: -210%;
 width: 200%;
 height: 200%;

 opacity: 0;

 background: rgba(255, 255, 255, 0.2);
 background: -moz-linear-gradient(
   left,
   rgba(255, 255, 255, 0.1) 0%,
   rgba(255, 255, 255, 0.1) 75%,
   rgba(255, 255, 255, 0.5) 90%,
   rgba(255, 255, 255, 0.0) 100%
 );
 background: -webkit-linear-gradient(
   top,
   rgba(255, 255, 255, 0.1) 0%,
   rgba(255, 255, 255, 0.1) 75%,
   rgba(255, 255, 255, 0.5) 90%,
   rgba(255, 255, 255, 0.0) 100%
 );
 background: -webkit-gradient(
   linear, left top, right top,
   color-stop(0%  ,rgba(255, 255, 255, 0.2)),
   color-stop(75% ,rgba(255, 255, 255, 0.2)),
   color-stop(90% ,rgba(255, 255, 255, 0.8)),
   color-stop(100%,rgba(255, 255, 255, 0.0))
 );
 background: -o-linear-gradient(
   top,
   rgba(255, 255, 255, 0.1) 0%,
   rgba(255, 255, 255, 0.1) 75%,
   rgba(255, 255, 255, 0.5) 90%,
   rgba(255, 255, 255, 0.0) 100%
 );
 background: -ms-linear-gradient(
   top,
   rgba(255, 255, 255, 0.1) 0%,
   rgba(255, 255, 255, 0.1) 75%,
   rgba(255, 255, 255, 0.5) 90%,6
   rgba(255, 255, 255, 0.0) 100%
 );
 background: linear-gradient(
   top,
   rgba(255, 255, 255, 0.1) 0%,
   rgba(255, 255, 255, 0.1) 75%,
   rgba(255, 255, 255, 0.5) 90%,
   rgba(255, 255, 255, 0.0) 100%
 );

 -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
     -ms-transform: rotate(30deg);
      -o-transform: rotate(30deg);
         transform: rotate(30deg);

 -webkit-transition-property: left, top, opacity;
    -moz-transition-property: left, top, opacity;
     -ms-transition-property: left, top, opacity;
      -o-transition-property: left, top, opacity;
         transition-property: left, top, opacity;
 -webkit-transition-duration: 0.5s, 0.5s, 0.1s;
    -moz-transition-duration: 0.5s, 0.5s, 0.1s;
     -ms-transition-duration: 0.5s, 0.5s, 0.1s;
      -o-transition-duration: 0.5s, 0.5s, 0.1s;
         transition-duration: 0.5s, 0.5s, 0.1s;
 -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
     -ms-transition-timing-function: ease;
      -o-transition-timing-function: ease;
         transition-timing-function: ease;
}

/* Hover state - trigger effect */

.icon:hover .icon-effect {
 opacity: 1;
 top: -30%;
 left: -30%;
}

/* Active state */

.icon:active .icon-effect {
 opacity: 0;
}
</style>
<a href="#" class="icon">
 <span class="icon-effect"></span>
</a>
<a href="http://seo.qalebfa.ir/">سئو قالبفا</a>