رفتن به مطلب

افکتهای زیبا برای هاور بر روی Icon


AynaZ

پست های پیشنهاد شده

درود

 

کدهای زیبا جهت زیبا کردن آیکون های وب سایت خودتون که با رفتن موس روی اونها به شکل زیباتر تغییر حالت میدهد

 

 

0b6c-Icon-Hover-Effects.png

 

 

کد HTML :

 

<div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4a">   <a href="https://1go.ir/https://1go.ir/&anchor=set-4" class="hi-icon hi-icon-archive">Archive</a>   <a href="https://1go.ir/https://1go.ir/&anchor=set-4" class="hi-icon hi-icon-chat">Chat</a>   <a href="https://1go.ir/https://1go.ir/&anchor=set-4" class="hi-icon hi-icon-bookmark">Bookmarks</a>   <a href="https://1go.ir/https://1go.ir/&anchor=set-4" class="hi-icon hi-icon-user">User</a>   <a href="https://1go.ir/https://1go.ir/&anchor=set-4" class="hi-icon hi-icon-contract">Contact</a></div><div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4b">   <a href="https://1go.ir/https://1go.ir/&anchor=set-4" class="hi-icon hi-icon-archive">Archive</a>   <a href="https://1go.ir/https://1go.ir/&anchor=set-4" class="hi-icon hi-icon-chat">Chat</a>   <a href="https://1go.ir/https://1go.ir/&anchor=set-4" class="hi-icon hi-icon-bookmark">Bookmarks</a>   <a href="https://1go.ir/https://1go.ir/&anchor=set-4" class="hi-icon hi-icon-user">User</a>   <a href="https://1go.ir/https://1go.ir/&anchor=set-4" class="hi-icon hi-icon-contract">Contact</a></div>

 

 

 

کد CSS :

 

 

 

body {   background-color: #0e83cd;}@font-face {   font-family: 'ecoicon';   src:url('fonts/ecoicon.eot');   src:url('fonts/ecoicon.eot?#iefix') format('embedded-opentype'),       url('fonts/ecoicon.woff') format('woff'),       url('fonts/ecoicon.ttf') format('truetype'),       url('fonts/ecoicon.svg#ecoicon') format('svg');   font-weight: normal;   font-style: normal;}.hi-icon-wrap {   text-align: center;   margin: 0 auto;   padding: 2em 0 3em;}.hi-icon {   display: inline-block;   font-size: 0px;   cursor: pointer;   margin: 15px 30px;   width: 90px;   height: 90px;   border-radius: 50%;   text-align: center;   position: relative;   z-index: 1;   color: #fff;   text-decoration: none;}.hi-icon:after {   pointer-events: none;   position: absolute;   width: 100%;   height: 100%;   border-radius: 50%;   content: '';   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box;}.hi-icon:before {   font-family: 'ecoicon';   speak: none;   font-size: 48px;   line-height: 90px;   font-style: normal;   font-weight: normal;   font-variant: normal;   text-transform: none;   display: block;   -webkit-font-smoothing: antialiased;}.hi-icon-mobile:before {   content: "\e009";}.hi-icon-screen:before {   content: "\e00a";}.hi-icon-earth:before {   content: "\e002";}.hi-icon-support:before {   content: "\e000";}.hi-icon-locked:before {   content: "\e001";}.hi-icon-cog:before {   content: "\e003";}.hi-icon-clock:before {   content: "\e004";}.hi-icon-videos:before {   content: "\e005";}.hi-icon-list:before {   content: "\e006";}.hi-icon-refresh:before {   content: "\e007";}.hi-icon-images:before {   content: "\e008";}.hi-icon-pencil:before {   content: "\e00b";}.hi-icon-link:before {   content: "\e00c";}.hi-icon-mail:before {   content: "\e00d";}.hi-icon-location:before {   content: "\e00e";}.hi-icon-archive:before {   content: "\e00f";}.hi-icon-chat:before {   content: "\e010";}.hi-icon-bookmark:before {   content: "\e011";}.hi-icon-user:before {   content: "\e012";}.hi-icon-contract:before {   content: "\e013";}.hi-icon-star:before {   content: "\e014";}/* Effect 4 */.hi-icon-effect-4 .hi-icon {   width: 92px;   height: 92px;   box-shadow: 0 0 0 4px rgba(255,255,255,1);  }.hi-icon-effect-4a .hi-icon {   -webkit-transition: box-shadow 0.2s;   -moz-transition: box-shadow 0.2s;   transition: box-shadow 0.2s;}.hi-icon-effect-4 .hi-icon:before {   line-height: 92px;}.hi-icon-effect-4 .hi-icon:after {   top: -4px;   left: -4px;   padding: 0;   z-index: 10;   border: 4px dashed #fff;}.hi-icon-effect-4 .hi-icon:hover {   box-shadow: 0 0 0 0 rgba(255,255,255,0);   color: #fff;}/* Effect 4b */.hi-icon-effect-4b .hi-icon:hover {   -webkit-transition: box-shadow 0.2s;   -moz-transition: box-shadow 0.2s;   transition: box-shadow 0.2s;}.hi-icon-effect-4b .hi-icon:hover:after {   -webkit-animation: spinAround 9s linear infinite;   -moz-animation: spinAround 9s linear infinite;   animation: spinAround 9s linear infinite;}@-webkit-keyframes spinAround {   from {       -webkit-transform: rotate(0deg)   }   to {       -webkit-transform: rotate(360deg);   }}@-moz-keyframes spinAround {   from {       -moz-transform: rotate(0deg)   }   to {       -moz-transform: rotate(360deg);   }}@keyframes spinAround {   from {       transform: rotate(0deg)   }   to {       transform: rotate(360deg);   }}

 

 

 

سورس :::

 

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

 

موفق باشیددد

 

heart

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

دوست گرامی اولا سعی کنید وقتی سورس رو کپی می کنید به لینکاش توجه کنین. برای مثال

fonts/ecoicon.ttf

معلوم نیست دقیقا منبع فونت کجاست. تصحیح کنید یا کل سورس رو زیپ کنین

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

دوست گرامی اولا سعی کنید وقتی سورس رو کپی می کنید به لینکاش توجه کنین. برای مثال

fonts/ecoicon.ttf

معلوم نیست دقیقا منبع فونت کجاست. تصحیح کنید یا کل سورس رو زیپ کنین

 

معمولا کاربر باید خودش مسیر رو انتخاب کنه و این کدها بعنوان یش نیاز کمکی هست دوست عزیز

 

در هر صورت فایل ها آپ شد

 

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...