بنر إعلاني بتأثير رائع

العديد منا يحتاج لوضع بنر إعلاني لمدونته أو موقعه ويجد العديد منها أن شكل البنر يكون سيئ لذا جئت إليك اليوم ببنر إعلاني له تأثير أكثر من رائع يمكنك معاينته الآن:

• 

مميزاته:-

1. خفيف وسريع.

2. ذو شكل جذاب.

3. متوافق مع العديد من المتصفحات.

الخطوات:-

توجه إلي لوحة التحكم / التخطيط/ "HTML/JAVASCRIPT"

ثم قم بإضافة الكود التالي:

<div id="portfolio">
<ul class="portfolio-grid">
<li>
<a href="#" class="animated flipInX">
<img src="http://placehold.it/200x200/1abc9c/FFFFFF" alt="img01"/>
</a>
</li>
</ul>
</div>
<style type="text/css">
.portfolio-grid {
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center;
width: 100%;
}
.portfolio-grid li {
display: inline-block;
margin: 5px 5px 5px 5px;
vertical-align: top;
    width:212px;
}
.portfolio-grid li > a,
.portfolio-grid li > a img {
    width: 100%;
border: none;
outline: none;
display: block;
position: relative;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.portfolio-grid li > a img:hover {
    border-radius: 50%;
    z-index: 9999;
}

/******************************************
Animate.CSS By  WWW.TH3SKILL.COM
******************************************/
.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
  
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
  
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
  
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
  
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
  
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
  
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
  
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
  
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
  
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
  
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
  
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
  
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
</style>

والآن استمتع بالإعلان ^^ وشاركنا برأيك في تعليق