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

[AynaZ 4,156]

درود

 

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

 

 

 

 

کد HTML :

 

<div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4a">   <a href="https://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&anchor=set-4" class="hi-icon hi-icon-archive">Archive</a>   <a href="https://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&anchor=set-4" class="hi-icon hi-icon-chat">Chat</a>   <a href="https://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&anchor=set-4" class="hi-icon hi-icon-bookmark">Bookmarks</a>   <a href="https://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&anchor=set-4" class="hi-icon hi-icon-user">User</a>   <a href="https://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&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://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&anchor=set-4" class="hi-icon hi-icon-archive">Archive</a>   <a href="https://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&anchor=set-4" class="hi-icon hi-icon-chat">Chat</a>   <a href="https://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&anchor=set-4" class="hi-icon hi-icon-bookmark">Bookmarks</a>   <a href="https://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&anchor=set-4" class="hi-icon hi-icon-user">User</a>   <a href="https://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&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

[laruz 983]

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

fonts/ecoicon.ttf

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

[AynaZ 4,156]

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

fonts/ecoicon.ttf

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

 

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

 

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

 

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