svg实现近百种图标悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:svg实现近百种图标悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> html { color: #000; background: #FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal; } li { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } q:before,q:after { content: ''; } abbr,acronym { border: 0; font-variant: normal; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } input,textarea,select { font-family: inherit; font-size: inherit; font-weight: inherit; } input,textarea,select { *font-size: 100%; } legend { color: #000; } /*============================================= [ Page Setup ] ==============================================*/ @import url(http://fonts.googleapis.com/css?family=Raleway:600); header { width: 100%; height: 100px; font-family: 'Raleway', sans-serif; position: relative; text-align: center; } header .back { color: #CCC; font-size: 13px; text-decoration: none; } header a:hover { color: #52be7f; } header .right { margin: 10px 20px 0 0px; float: right; } header .left { margin: 10px 0px 0 20px; float: left; } header h1 { color: #999; font-size: 23px; padding-top: 30px; } #pageWrap { width: 100%; overflow: hidden; } .innerwrap { width: 100%; overflow: hidden; padding: 0px 0 50px; } .innerwrap.purple { background: #af7ac4 } .innerwrap.blue { background: #246f91 } .innerwrap.teal { background: #3aada6 } .innerwrap.red { background: #f26c63 } .innerwrap.green { background: #52be7f } .innerwrap.yellow { background: #f3cf3f } .innerwrap.yellow .iconholder { max-width: 680px } .iconholder { width: 100%; max-width: 656px; overflow: hidden; margin: 0 auto; text-align: center; } .iconholder h2 { font-family: 'Raleway', sans-serif; font-size: 20px; color: #fff; margin: 50px; } /*============================================= [ Icon Wrap] ==============================================*/ .svg-icon { display: inline-block; width: 134px; height: 138px; margin: 40px 30px; float: left; } .svg-icon:hover { cursor: pointer } .flat-filled { display: inline-block; width: 100px; height: 100px; margin: 40px 30px; } .flat-line { display: inline-block; width: 100px; height: 100px; margin: 40px 30px; } .flat-shadow { display: inline-block; width: 100px; height: 100px; margin: 40px 30px; } /*============================================= [ Inactive Styles ] ==============================================*/ .social-line { display: inline-block; width: 134px; height: 138px; margin-right: 54px; } .social-line:hover { cursor: pointer } /* Gradient Offsets */ .offset0 { stop-color: #000000; stop-opacity: 0.5; } .offset1 { stop-color: #000000; stop-opacity: 0.2; } .offset2 { stop-color: #000000; stop-opacity: 0.173; } .offset3 { stop-color: #000000; stop-opacity: 0; } .offset4 { stop-color: #000000; stop-opacity: 0.7; } .offset5 { stop-color: #000000; stop-opacity: 0.1143; } .offset6 { stop-color: #000000; stop-opacity: 0.1106; } .social-line { width: 80px; height: 80px; overflow: hidden; } .social-line .icon_circle_shadow { fill: none; fill-opacity: 0; opacity: 0; -webkit-transition: all .4s ease; -moz-transition: all 4s ease; transition: all .4s ease; } .social-line .icon_shape_shadow { fill: none; fill-opacity: 0; } .social-line .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: none; } .social-line .icon_shape { fill: #FFFFFF } /*============================================= [ Hover Styles ] ==============================================*/ .social-line:hover { overflow: visible; -webkit-transform: scale(1.15,1.15); -moz-transform: scale(1.15,1.15); transform: scale(1.15,1.15); } /* Gradient IDs */ .social-line:hover .icon_circle_shadow { fill: url(#icon_circle_gradient); fill-opacity: 0.7; opacity: 1; } .social-line:hover .icon_shape_shadow { fill: url(#icon_shape_gradient); fill-opacity: 0.9; -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s; -webkit-transform: scale(1,1); -moz-transform: scale(1,1); transform: scale(1,1); } /* Icon Styles */ .social-line:hover .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: none; } .social-line:hover path.icon_shape { -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); /*animation-name*/ -webkit-animation-name: burst; -moz-animation-name: burst; -ms-animation-name: burst; -o-animation-name: burst; animation-name: burst; /*animation-duration*/ -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 40px 38px !important; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } /*============================================= [ KeyFrame Animations ] ==============================================*/ @-webkit-keyframes burst { { -webkit-transform: scale(1.1); animation-timing-function: ease-in; } 37% { -webkit-transform: scale(1.5); animation-timing-function: ease-out; } 55% { -webkit-transform: scale(1.37); animation-timing-function: ease-in; } 73% { -webkit-transform: scale(1.1); animation-timing-function: ease-out; } 82% { -webkit-transform: scale(1.45); animation-timing-function: ease-in; } 91% { -webkit-transform: scale(1.5); animation-timing-function: ease-out; } 96% { -webkit-transform: scale(1.4); animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1.1); animation-timing-function: ease-out; } } @-moz-keyframes burst { { -moz-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -moz-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -moz-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -moz-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -moz-transform: scale(1.4,1.4); animation-timing-function: ease-in; } 100% { -moz-transform: scale(1,1); animation-timing-function: ease-in; } } @keyframes burst { { transform: scale(1,1); animation-timing-function: ease-in; } 37% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { transform: scale(1,1); animation-timing-function: ease-out; } 82% { transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { transform: scale(1.4,1.4); animation-timing-function: ease-in; } 100% { transform: scale(1,1); animation-timing-function: ease-out; } } /*============================================= [ Inactive Styles ] ==============================================*/ .social-shadow { display: inline-block; overflow: visible; margin-right: 0; } /* Gradient Offsets */ .offset0 { stop-color: #000000; stop-opacity: 0.5; } .offset1 { stop-color: #000000; stop-opacity: 0.2; } .offset2 { stop-color: #000000; stop-opacity: 0.173; } .offset3 { stop-color: #000000; stop-opacity: 0; } .offset4 { stop-color: #000000; stop-opacity: 0.7; } .offset5 { stop-color: #000000; stop-opacity: 0.1143; } .offset6 { stop-color: #000000; stop-opacity: 0.1106; } .social-shadow { overflow: visible } /* Gradient IDs */ .social-shadow .icon_circle_shadow { fill: url(#icon_circle_gradient); fill-opacity: 0.7; opacity: 1; -webkit-transition: all .4s ease; -moz-transition: all 4s ease; transition: all .4s ease; } .social-shadow .icon_shape_shadow { fill: url(#icon_shape_gradient); fill-opacity: 0.9; } /* Icon Styles */ .social-shadow .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: none; } .social-shadow .icon_shape { fill: #fff } /*============================================= [ Hover Styles ] ==============================================*/ .social-shadow:hover { display: inline-block; width: 134px; height: 138px; cursor: pointer; } .social-shadow:hover .social-shadow { width: 80px; height: 80px; overflow: hidden; } .social-shadow:hover .icon_circle_shadow { opacity: 0 } .social-shadow:hover .icon_shape_shadow { opacity: 0 } .social-shadow:hover .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: none; } .social-shadow:hover .icon_shape { fill: #FFFFFF } .social-shadow:hover .icon_shape { -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); /*animation-name*/ -webkit-animation-name: burst2; -moz-animation-name: burst2; -ms-animation-name: burst2; -o-animation-name: burst2; animation-name: burst2; /*animation-duration*/ -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 40px 38px !important; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } /*============================================= [ KeyFrame Animations ] ==============================================*/ @-webkit-keyframes burst2 { 100% { -webkit-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -webkit-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -webkit-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -webkit-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -webkit-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -webkit-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -webkit-transform: scale(1.4,1.4); animation-timing-function: ease-in; } } @-moz-keyframes burst2 { 100% { -moz-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -moz-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -moz-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -moz-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -moz-transform: scale(1.4,1.4); animation-timing-function: ease-in; } } @keyframes burst2 { 100% { transform: scale(1,1); animation-timing-function: ease-in; } 37% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { transform: scale(1,1); animation-timing-function: ease-out; } 82% { transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { transform: scale(1.4,1.4); animation-timing-function: ease-in; } } /*============================================= [ Inactive Styles ] ==============================================*/ .social-filled { display: inline-block; width: 134px; height: 138px; margin-right: 54px; } .social-filled:hover { cursor: pointer } /* Gradient Offsets */ .offset0 { stop-color: #000000; stop-opacity: 0.5; } .offset1 { stop-color: #000000; stop-opacity: 0.2; } .offset2 { stop-color: #000000; stop-opacity: 0.173; } .offset3 { stop-color: #000000; stop-opacity: 0; } .offset4 { stop-color: #000000; stop-opacity: 0.7; } .offset5 { stop-color: #000000; stop-opacity: 0.1143; } .offset6 { stop-color: #000000; stop-opacity: 0.1106; } .social-filled { width: 80px; height: 80px; overflow: hidden; } .social-filled .icon_circle_shadow { fill: none; fill-opacity: 0; opacity: 0; -webkit-transition: all .4s ease; -moz-transition: all 4s ease; transition: all .4s ease; } .social-filled .icon_shape_shadow { fill: none; fill-opacity: 0; } .social-filled .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: #fff; } .social-filled .icon_shape { fill: #af7ac4 } /*============================================= [ Hover Styles ] ==============================================*/ .social-filled:hover { overflow: visible; -webkit-transform: scale(1.25,1.25); -moz-transform: scale(1.25,1.25); transform: scale(1.25,1.25); } /* Gradient IDs */ .social-filled:hover .icon_circle_shadow { fill: url(#icon_circle_gradient); fill-opacity: 0.7; opacity: 1; } .social-filled:hover .icon_shape_shadow { fill: url(#icon_shape_gradient); fill-opacity: 0.9; -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s; } /* Icon Styles */ .social-filled:hover .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: none; } .social-filled:hover path.icon_shape { fill: #fff; -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); /*animation-name*/ -webkit-animation-name: burst3; -moz-animation-name: burst3; -ms-animation-name: burst3; -o-animation-name: burst3; animation-name: burst3; /*animation-duration*/ -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 40px 38px !important; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } /*============================================= [ KeyFrame Animations ] ==============================================*/ @-webkit-keyframes burst3 { 100% { -webkit-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -webkit-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -webkit-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -webkit-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -webkit-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -webkit-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -webkit-transform: scale(1.4,1.4); animation-timing-function: ease-in; } } @-moz-keyframes burst3 { 100% { -moz-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -moz-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -moz-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -moz-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -moz-transform: scale(1.4,1.4); animation-timing-function: ease-in; } } @keyframes burst3 { 100% { transform: scale(1,1); animation-timing-function: ease-in; } 37% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { transform: scale(1,1); animation-timing-function: ease-out; } 82% { transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { transform: scale(1.4,1.4); animation-timing-function: ease-in; } } /*============================================= [ Inactive Styles ] ==============================================*/ /*Genral*/ .flat-filled .icon > path { fill: #f26c63; -moz-transform: translate(0px ,0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } .flat-filled .icon > .lightning { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } .flat-filled .circle { fill: #fff; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } /*Exceptions*/ #filled-user .collar_right { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } #filled-user .collar_left { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } #filled-lightning .bolt { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } #filled-lightning .highlight { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } #filled-mic .bars_right rect { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } #filled-coffee .top { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); : ; } /*Specifics*/ #filled-browser .green { fill: #FFF } #filled-browser .orange { fill: #FFF } #filled-browser .red { fill: #FFF } #filled-brush .brush_silver { fill: #FFF } #filled-calander .number { fill: #FFF } #filled-camera .lens_inner { fill: #FFF } #filled-clock .seconds { fill: #FFF } #filled-clock .middle { fill: #FFF } #filled-clock .hour { fill: #FFF } #filled-clock .minute { fill: #FFF } #filled-coffee .middle { fill: #FFF } #filled-diamond .middle { fill: #FFF } #filled-diamond .top_3 { fill: #FFF } #filled-disk .top { fill: #FFF } #filled-disk .top_right { fill: #FFF } #filled-disk .text { fill: #FFF } #filled-email .paper { fill: #FFF } #filled-home .hole { fill: #FFF } #filled-location .inner { fill: #FFF } #filled-lock .keyhole { fill: #FFF } #filled-message .dots { fill: #FFF } #filled-picture .sun { fill: #FFF } #filled-picture .mountain { fill: #FFF } #filled-mic .bars_left { fill: #FFF } #filled-mic .bars_right rect { fill: #FFF } #filled-paper .text { fill: #FFF } #filled-paper .corner { fill: #FFF } #filled-pencil .metal { fill: #FFF } #filled-phone .screen { fill: #FFF } #filled-phone .details { fill: #FFF } #filled-robot .eyes { fill: #FFFFFF } #filled-suitcase .buttons { fill: #FFF } #filled-tag .dot { fill: #FFF } #filled-thumbsdown .dot { fill: #FFFFFF } #filled-thumbsup .dot { fill: #FFFFFF } #filled-trash .details { fill: #FFF } #filled-winner .text { fill: #FFFFFF } /*============================================= [ Hover Styles ] ==============================================*/ #filled-browser:hover .circle { fill: #B1EB5B } #filled-browser:hover .screen { fill: #d6d6d6 } #filled-browser:hover .base { fill: #b0b0b0 } #filled-browser:hover .top { fill: #8F8F8F } #filled-browser:hover .green { fill: #AEE42D } #filled-browser:hover .orange { fill: #FFD02C } #filled-browser:hover .red { fill: #E64545 } #filled-brush:hover .brush_base { fill: #00A3C6 } #filled-brush:hover .brush_highlight { fill: #43C1DC } #filled-brush:hover .brush_silver { fill: #C8C8C8 } #filled-brush:hover .brush_tip { fill: #917152 } #filled-brush:hover .circle { fill: #F0A878 } #filled-calander:hover .circle { fill: #F3CF3F } #filled-calander:hover .base_top { fill: #5B3F89 } #filled-calander:hover .left { fill: #848484 } #filled-calander:hover .right { fill: #848484 } #filled-calander:hover .number { fill: #fff } #filled-calander:hover .base_bottom { fill: #644892 } #filled-camera:hover .circle { fill: #F39C12 } #filled-camera:hover .base { fill: #E0DECD } #filled-camera:hover .strip { fill: #3376D2 } #filled-camera:hover .lens { fill: #CAC8B7 } #filled-camera:hover .lens_inner { fill: #A6A495 } #filled-camera:hover .flash { fill: #FFF } #filled-camera:hover .red { fill: #D25133 } #filled-camera:hover .button { fill: #A6A496 } #filled-clock:hover .circle { fill: #02BD85 } #filled-clock:hover .base { fill: #FF8933 } #filled-clock:hover .face { fill: #FFF } #filled-clock:hover .seconds { fill: #FF725F } #filled-clock:hover .middle { fill: #808080 } #filled-clock:hover .hour { fill: #808080 } #filled-clock:hover .minute { fill: #808080 } #filled-coffee:hover .circle { fill: #82D8B5 } #filled-coffee:hover .base { fill: #8F6349 } #filled-coffee:hover .middle { fill: #9C8679 } #filled-coffee:hover .top { fill: #F1F1F1 } #filled-diamond:hover .circle { fill: #02BD85 } #filled-diamond:hover .middle { fill: #D87598 } #filled-diamond:hover .top_3 { fill: #FFC8DB } #filled-diamond:hover .top_2 { fill: #F2A0BD } #filled-diamond:hover .top_1 { fill: #F2A0BD } #filled-diamond:hover .top_left { fill: #D87598 } #filled-diamond:hover .top_right { fill: #D87598 } #filled-diamond:hover .right { fill: #C15179 } #filled-diamond:hover .left { fill: #FFC8DB } #filled-disk:hover .circle { fill: #F3CF3F } #filled-disk:hover .base { fill: #5D699B } #filled-disk:hover .top { fill: #B2B2B2 } #filled-disk:hover .top_right { fill: #747A90 } #filled-disk:hover .bottom { fill: #D9D9C2 } #filled-disk:hover .text { fill: #747A90 } #filled-email:hover .circle { fill: #7D79BC } #filled-email:hover .top { fill: #3DD97F } #filled-email:hover .paper { fill: #FFFFFF } #filled-email:hover .base { fill: #2DB466 } #filled-email:hover .text { fill: #BBBBBB } #filled-film:hover .circle { fill: #8DD0BE } #filled-film:hover .base { fill: #6E6E6E } #filled-film:hover .bottom { fill: #515151 } #filled-film:hover .top { fill: #8C8C8C } #filled-flag:hover .circle { fill: #8DD0BE } #filled-flag:hover .bottom { fill: #FF5400 } #filled-flag:hover .shadow { fill: #C03F00 } #filled-flag:hover .top { fill: #FF5400 } #filled-flag:hover .pole { fill: #676767 } #filled-folder:hover .circle { fill: #82D8B5 } #filled-folder:hover .back { fill: #9C4588 } #filled-folder:hover .paper_back { fill: #D9D9D9 } #filled-folder:hover .paper_front { fill: #fff } #filled-folder:hover .front { fill: #BF67AB } #filled-graph:hover .circle { fill: #E3A7C0 } #filled-graph:hover .bar_left { fill: #7BC156 } #filled-graph:hover .bar_middle { fill: #92D76C } #filled-graph:hover .bar_right { fill: #64A242 } #filled-graph:hover .front { fill: } #filled-graph:hover .dot_4, #filled-graph:hover .dot_3, #filled-graph:hover .dot_2, #filled-graph:hover .dot_1 { fill: #fff } #filled-heart:hover .circle { fill: #02BD85 } #filled-heart:hover .base { fill: #BC4B36 } #filled-heart:hover .left { fill: #db5940 } #filled-home:hover .circle { fill: #02BD85 } #filled-home:hover .base { fill: #F1F1F1 } #filled-home:hover .hole { fill: #C3C3C3 } #filled-home:hover .roof { fill: #D34141 } #filled-lightning:hover .circle { fill: #423D5B } #filled-lightning:hover .bolt { fill: #FFD928 } #filled-lightning:hover .highlight { fill: #FFF3B9 } #filled-location:hover .circle { fill: #4890A8 } #filled-location:hover .base { fill: #B6351B } #filled-location:hover .inner { fill: #7E2412 } #filled-lock:hover .circle { fill: #02AF7E } #filled-lock:hover .base { fill: #C9A80D } #filled-lock:hover .baselight { fill: #D9BC36 } #filled-lock:hover .keyhole { fill: #8A7200 } #filled-lock:hover .bar { fill: #C6C6C6 } #filled-magnify:hover .circle { fill: #F2D65F } #filled-magnify:hover .base { fill: #34B9F1 } #filled-magnify:hover .glass { fill: #8DDDFF } #filled-message:hover .circle { fill: #AC5D9F } #filled-message:hover .back { fill: #FFAD10 } #filled-message:hover .front { fill: #00A3C6 } #filled-message:hover .dots { fill: #006A81 } #filled-mic:hover .circle { fill: #F3CF3F } #filled-mic:hover .base { fill: #40979F } #filled-mic:hover .stand { fill: #5F8083 } #filled-mic:hover .bars_left { fill: #267178 } #filled-mic:hover .bars_right rect { fill: #267178 } #filled-paper:hover .circle { fill: #D6D6B8 } #filled-paper:hover .base { fill: #929292 } #filled-paper:hover .front { fill: #FFFFFF } #filled-paper:hover .corner { fill: #D6D6D6 } #filled-paper:hover .text { fill: #BBBBBB } #filled-pencil:hover .circle { fill: #CDEFE1 } #filled-pencil:hover .wood { fill: #FFC833 } #filled-pencil:hover .base_top { fill: #456FD8 } #filled-pencil:hover .base_bottom { fill: #3258B6 } #filled-pencil:hover .base_middle { fill: #567FE5 } #filled-pencil:hover .tip { fill: #567FE5 } #filled-pencil:hover .eraser { fill: #FF72B1 } #filled-pencil:hover .metal { fill: #C6C6C6 } #filled-phone:hover .circle { fill: #E55D57 } #filled-phone:hover .base { fill: #6F82A4 } #filled-phone:hover .screen { fill: #A5B5D3 } #filled-phone:hover .details { fill: #516078 } #filled-picture:hover .circle { fill: #B1EB5B } #filled-picture:hover .back { fill: #A46B49 } #filled-picture:hover .front { fill: #CE8A61 } #filled-picture:hover .sky { fill: #DCF5FF } #filled-picture:hover .sun { fill: #FF7800 } #filled-picture:hover .mountain { fill: #3B8C1E } #filled-plane:hover .circle { fill: #E88D70 } #filled-plane:hover .bottom { fill: #007D7E } #filled-plane:hover .right { fill: #4ED0D1 } #filled-plane:hover .middle { fill: #3AAAAB } #filled-plane:hover .left { fill: #4ED0D1 } #filled-present:hover .circle { fill: #4890A8 } #filled-present:hover .base { fill: #F1F1F1 } #filled-present:hover .top { fill: #C3C3C3 } #filled-present:hover .ribbon { fill: #D34141 } #filled-robot:hover .circle { fill: #E88D70 } #filled-robot:hover .ears { fill: #39517A } #filled-robot:hover .base { fill: #4C70AF } #filled-robot:hover .highlight { fill: #6384BE } #filled-robot:hover .antenna { fill: #A0ABBD } #filled-robot:hover .eyes { fill: #FFFFFF } #filled-rocket:hover .circle { fill: #4BAE97 } #filled-rocket:hover .engine { fill: #7D7D7D } #filled-rocket:hover .base { fill: #B0CED8 } #filled-rocket:hover .window { fill: #8BABB6 } #filled-rocket:hover .glass { fill: #FFFFFF } #filled-rocket:hover .flame { fill: #FF5400 } #filled-screen:hover .circle { fill: #F8B243 } #filled-screen:hover .stand { fill: #516078 } #filled-screen:hover .base { fill: #6F82A4 } #filled-screen:hover .highlight { fill: #A5B5D3 } #filled-screen:hover .logo { fill: #516078 } #filled-settings:hover .circle { fill: #E3A7C0 } #filled-settings:hover .base { fill: #8BAE5D } #filled-settings:hover .top { fill: #698741 } #filled-spaceship:hover .circle { fill: #02BD85 } #filled-spaceship:hover .light { fill: #FFF3B9 } #filled-spaceship:hover .glass { fill: #8DDDFF } #filled-spaceship:hover .base { fill: #7E8CA6 } #filled-spaceship:hover .circles { fill: #56627A } #filled-storm:hover .circle { fill: #90C0D8 } #filled-storm:hover .cloud { fill: #858585 } #filled-storm:hover .lightning { fill: #FFAD10 } #filled-suitcase:hover .circle { fill: #02BD85 } #filled-suitcase:hover .top { fill: #9A4C1D } #filled-suitcase:hover .bottom { fill: #B75B24 } #filled-suitcase:hover .buttons { fill: #C89211 } #filled-tag:hover .circle { fill: #D6D6B8 } #filled-tag:hover .base { fill: #FFBA00 } #filled-tag:hover .dot { fill: #C38E00 } #filled-thumbsdown:hover .circle { fill: #E74C3C } #filled-thumbsdown:hover .base { fill: #F1CDB0 } #filled-thumbsdown:hover .sleeve { fill: #E1AF45 } #filled-thumbsdown:hover .cuff { fill: #339FA9 } #filled-thumbsdown:hover .dot { fill: #FFFFFF } #filled-thumbsup:hover .circle { fill: #02BD85 } #filled-thumbsup:hover .base { fill: #F1CDB0 } #filled-thumbsup:hover .sleeve { fill: #854D37 } #filled-thumbsup:hover .cuff { fill: #C24C28 } #filled-thumbsup:hover .dot { fill: #FFFFFF } #filled-trash:hover .circle { fill: #90C0D8 } #filled-trash:hover .base { fill: #8C8C8C } #filled-trash:hover .details { fill: #515151 } #filled-trash:hover .lid { fill: #6E6E6E } #filled-user:hover .circle { fill: #D1F274 } #filled-user:hover .body { fill: #44B2B6 } #filled-user:hover .collar_right { fill: #FFFFFF } #filled-user:hover .collar_left { fill: #FFFFFF } #filled-user:hover .head { fill: #F1CDB0 } #filled-user:hover .hair { fill: #AB6125 } #filled-winner:hover .circle { fill: #F8B243 } #filled-winner:hover .ribbon { fill: #5BB3F0 } #filled-winner:hover .base { fill: #1983CD } #filled-winner:hover .text { fill: #FFFFFF } /*============================================= [ Animation Styles ] ==============================================*/ /*LEFT*/ #filled-winner:hover .text, #filled-user:hover .hair, #filled-trash:hover .lid, #filled-thumbsdown:hover .base, #filled-thumbsup:hover .base, #filled-suitcase:hover .buttons, #filled-spaceship:hover .light, #filled-screen:hover .highlight, #filled-rocket:hover .glass, #filled-robot:hover .eyes, #filled-robot:hover .ears, #filled-present:hover .ribbon, #filled-plane:hover .middle, #filled-picture:hover .sun, #filled-phone:hover .screen, #filled-pencil:hover .metal, #filled-mic:hover .bars_left, #filled-message:hover .dots, #filled-lock:hover .keyhole, #filled-lightning:hover .highlight, #filled-home:hover .hole, #filled-heart:hover .left, #filled-graph:hover .bar_left, #filled-folder:hover .paper_front, #filled-flag:hover .pole, #filled-film:hover .bottom, #filled-email:hover .text, #filled-disk:hover .bottom, #filled-disk:hover .text, #filled-diamond:hover .middle, #filled-coffee:hover .middle, #filled-clock:hover .seconds, #filled-camera:hover .strip, #filled-calander:hover .left, #filled-brush:hover .brush_silver, #filled-browser:hover .screen { -webkit-animation-delay: .2s; -moz-animation-delay: 0.2s; -ms-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: left; -moz-animation-name: left; -ms-animation-name: left; -o-animation-name: left; animation-name: left; } /*RIGHT*/ #filled-winner:hover .base, #filled-user:hover .body, #filled-trash:hover .base, #filled-thumbsdown:hover .sleeve, #filled-thumbsup:hover .sleeve, #filled-tag:hover .base, #filled-storm:hover .cloud, #filled-spaceship:hover .base, #filled-screen:hover .base, #filled-rocket:hover .base, #filled-robot:hover .base, #filled-present:hover .base, #filled-picture:hover .mountain, #filled-phone:hover .base, #filled-pencil:hover .base_middle, #filled-paper:hover .base, #filled-mic:hover .bars_right rect, #filled-magnify:hover .glass, #filled-lock:hover .base, #filled-location:hover .inner, #filled-home:hover .base, #filled-graph:hover .bar_middle, #filled-folder:hover .paper_back, #filled-flag:hover .top, #filled-film:hover .base, #filled-email:hover .base, #filled-disk:hover .base, #filled-diamond:hover .right, #filled-coffee:hover .base, #filled-clock:hover .base, #filled-camera:hover .base, #filled-calander:hover .base_top, #filled-browser:hover .base { /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: right; -moz-animation-name: right; -ms-animation-name: right; -o-animation-name: right; animation-name: right; } /*TOP RIGHT*/ #filled-user:hover .head, #filled-thumbsdown:hover .cuff, #filled-thumbsdown:hover .cuff, #filled-suitcase:hover .top, #filled-storm:hover .lightning, #filled-spaceship:hover .circles, #filled-spaceship:hover .glass, #filled-settings:hover .top, #filled-rocket:hover .engine, #filled-robot:hover .highlight, #filled-present:hover .top, #filled-plane:hover .right, #filled-picture:hover .sky, #filled-phone:hover .details, #filled-pencil:hover .eraser, #filled-pencil:hover .base_bottom, #filled-paper:hover .front, #filled-mic:hover .base, #filled-mic:hover .stand, #filled-lock:hover .baselight, #filled-location:hover .base, #filled-lightning:hover .bolt, #filled-home:hover .roof, #filled-heart:hover .base, #filled-graph:hover .bar_right, #filled-graph:hover .dot_4, #filled-flag:hover .bottom, #filled-film:hover .top, #filled-disk:hover .top_right, #filled-diamond:hover .top_right, #filled-diamond:hover .left, #filled-coffee:hover .top, #filled-clock:hover .face, #filled-calander:hover .right, #filled-brush:hover .brush_base, #filled-browser:hover .top { -webkit-animation-delay: .1s; -moz-animation-delay: 0.1s; -ms-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: right-top; -moz-animation-name: right-top; -ms-animation-name: right-top; -o-animation-name: right-top; animation-name: right-top; } /*TOP LEFT*/ #filled-winner:hover .ribbon, #filled-trash:hover .details, #filled-thumbsdown:hover .dot, #filled-thumbsup:hover .dot, #filled-tag:hover .dot, #filled-suitcase:hover .bottom, #filled-settings:hover .base, #filled-screen:hover .stand, #filled-rocket:hover .window, #filled-robot:hover .antenna, #filled-plane:hover .left, #filled-picture:hover .front, #filled-pencil:hover .base_top, #filled-paper:hover .corner, #filled-magnify:hover .base, #filled-lock:hover .bar, #filled-graph:hover .dot_3, #filled-flag:hover .shadow, #filled-email:hover .paper, #filled-disk:hover .top, #filled-diamond:hover .top_left, #filled-diamond:hover .top_3, #filled-clock:hover .minute, #filled-camera:hover .flash, #filled-calander:hover .number, #filled-brush:hover .brush_highlight, #filled-browser:hover .green { /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: left-top; -moz-animation-name: left-top; -ms-animation-name: left-top; -o-animation-name: left-top; animation-name: left-top; } #filled-user:hover .collar_left, #filled-screen:hover .logo, #filled-rocket:hover .flame, #filled-picture:hover .back, #filled-pencil:hover .tip, #filled-paper:hover .text, #filled-message:hover .front, #filled-graph:hover .dot_2, #filled-folder:hover .front, #filled-email:hover .top, #filled-diamond:hover .top_2, #filled-clock:hover .hour, #filled-camera:hover .red, #filled-calander:hover .base_bottom, #filled-browser:hover .orange { -webkit-animation-delay: .05s; -moz-animation-delay: 0.05s; -ms-animation-delay: 0.05s; -o-animation-delay: 0.05s; animation-delay: 0.05s; /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: left-top; -moz-animation-name: left-top; -ms-animation-name: left-top; -o-animation-name: left-top; animation-name: left-top; -webkit-animation-name: left-top; -moz-animation-name: left-top; -ms-animation-name: left-top; -o-animation-name: left-top; animation-name: left-top; } #filled-user:hover .collar_right, #filled-plane:hover .bottom, #filled-pencil:hover .wood, #filled-message:hover .back, #filled-graph:hover .dot_1, #filled-folder:hover .back, #filled-diamond:hover .top_1, #filled-clock:hover .middle, #filled-camera:hover .button, #filled-camera:hover .lens, #filled-camera:hover .lens_inner, #filled-brush:hover .brush_tip, #filled-browser:hover .red { /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: left-top; -moz-animation-name: left-top; -ms-animation-name: left-top; -o-animation-name: left-top; animation-name: left-top; } /*Keyframes*/ @-moz-keyframes left-top { 0% { -webki-transform: translate(-100px, -100px) scale(3,3) } 1% { -webkit-transform: translate(-100px, -100px) scale(3,3) } 100% { -webkit-transform: translate(0px ,0px) scale(1,1) } } @-webkit-keyframes left-top { 0% { -webki-transform: translate(-100px, -100px) scale(3,3) } 1% { -webkit-transform: translate(-100px, -100px) scale(3,3) } 100% { -webkit-transform: translate(0px ,0px) scale(1,1) } } @keyframes left-top { 0% { transform: translate(-100px, -100px) scale(3,3) } 1% { transform: translate(-100px, -100px) scale(3,3) } 100% { transform: translate(0px, 0px) scale(1,1) } } @-moz-keyframes right-top { 0% { -webki-transform: translate(100px, -200px) scale(3,3) } 1% { -webkit-transform: translate(100px, -200px) scale(3,3) } 100% { -webkit-transform: translate(0px ,0px) scale(1,1) } } @-webkit-keyframes right-top { 0% { -webki-transform: translate(100px, -200px) scale(3,3) } 1% { -webkit-transform: translate(100px, -200px) scale(3,3) } 100% { -webkit-transform: translate(0px ,0px) scale(1,1) } } @keyframes right-top { 0% { transform: translate(100px, -200px) scale(3,3) } 1% { transform: translate(100px, -200px) scale(3,3) } 100% { transform: translate(0px, 0px) scale(1,1) } } @-moz-keyframes right { 0% { -webki-transform: translate(100px, 0px) } 1% { -webkit-transform: translate(100px, 0px) } 100% { -webkit-transform: translate(0px ,0px) } } @-webkit-keyframes right { 0% { -webki-transform: translate(100px, 0px) } 1% { -webkit-transform: translate(100px, 0px) } 100% { -webkit-transform: translate(0px ,0px) } } @keyframes right { 0% { transform: translate(100px, 0px) } 1% { transform: translate(100px, 0px) } 100% { transform: translate(0px, 0px) } } @-moz-keyframes left { 0% { -webki-transform: translate(-100px, 0px) } 1% { -webkit-transform: translate(-100px, 0px) } 100% { -webkit-transform: translate(0px ,0px) } } @-webkit-keyframes left { 0% { -webki-transform: translate(-100px, 0px) } 1% { -webkit-transform: translate(-100px, 0px) } 100% { -webkit-transform: translate(0px ,0px) } } @keyframes left { 0% { transform: translate(-100px, 0px) } 1% { transform: translate(-100px, 0px) } 100% { transform: translate(0px, 0px) } } /*============================================= [ Inactive Styles ] ==============================================*/ /*Genral*/ .flat-line .icon > path { stroke: #fff; stroke-width: 3px; fill: transparent; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } .flat-line .circle { stroke: #fff; stroke-width: 3px; fill: #52be7f; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } /*Exceptions*/ .flat-line .icon > .lightning { stroke: #fff; stroke-width: 1.5px; fill: transparent; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-user .collar_right { fill: #52be7f; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-user .collar_left { fill: #52be7f; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-lightning .bolt { stroke: #fff; stroke-width: 3px; fill: transparent; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-lightning .highlight { fill: transparent; stroke: 0px; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-mic .bars_right rect { fill: #52be7f; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-coffee .top { fill: #52be7f; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } /*Specifics*/ #line-browser .green { fill: #FFF; stroke-width: 0px; } #line-browser .orange { fill: #FFF; stroke-width: 0px; } #line-browser .red { fill: #FFF; stroke-width: 0px; } #line-browser .screen { fill: transparent; stroke-width: 0px; } #line-brush .brush_silver { fill: #FFF; stroke-width: 0px; } #line-calander .number { fill: transparent; stroke-width: 0px; } #line-camera .lens_inner { fill: #FFF; stroke-width: 0px; } #line-camera .lens { fill: transparent; stroke-width: 0px; } #line-camera .strip { fill: transparent; stroke-width: 0px; } #line-camera .red { fill: #FFF; stroke-width: 0px; } #line-clock .seconds { fill: #FFF; stroke-width: 0px; } #line-clock .middle { fill: #FFF; stroke-width: 0px; } #line-clock .hour { fill: #FFF; stroke-width: 0px; } #line-clock .minute { fill: #FFF; stroke-width: 0px; } #line-clock .face { fill: transparent; stroke-width: 0px; } #line-coffee .top { fill: transparent; stroke-width: 3px; stroke: #fff; } #line-coffee .middle { fill: #FFF; stroke-width: 0px; } #line-disk .top { fill: #FFF; stroke-width: 0px; } #line-disk .top_right { fill: #FFF; stroke-width: 0px; } #line-disk .text { fill: transparent; stroke-width: 0px; } #line-email .paper { fill: transparent; stroke-width: 0px; } #line-email .text { fill: transparent; stroke-width: 0px; } #line-film .top { fill: transparent; stroke-width: 0px; } #line-film .bottom { fill: transparent; stroke-width: 0px; } #line-folder .paper_front { fill: transparent; stroke-width: 0px; } #line-folder .paper_back { fill: transparent; stroke-width: 0px; } #line-graph .dot_1, #line-graph .dot_2, #line-graph .dot_3, #line-graph .dot_4 { fill: #FFF; stroke-width: 0px; } #line-home .hole { fill: #FFF; stroke-width: 0px; } #line-home .roof { -webkit-transform: translateY(-5px) } #line-location .inner { fill: #FFF; stroke-width: 0px; } #line-lock .keyhole { fill: transparent; stroke-width: 0px; } #line-lock .baselight { fill: transparent; stroke-width: 0px; } #line-magnify .glass { fill: transparent; stroke-width: 0px; } #line-message .dots { fill: transparent; stroke-width: 0px; } #line-picture .sun { fill: #FFF; stroke-width: 0px; } #line-picture .mountain { fill: #FFF; stroke-width: 0px; } #line-mic .bars_left { fill: #FFF; stroke-width: 0px; } #line-mic .bars_right rect { fill: #FFF; stroke-width: 0px; } #line-paper .text { fill: transparent; stroke-width: 0px; } #line-paper .corner { fill: #FFF; stroke-width: 0px; } #line-pencil .metal { fill: #FFF; stroke-width: 0px; } #line-phone .screen { fill: #FFF; stroke-width: 0px; } #line-phone .details { fill: #FFF; stroke-width: 0px; } #line-robot .eyes { fill: #FFFFFF; stroke-width: 0px; } #line-suitcase .buttons { fill: #FFF; stroke-width: 0px; } #line-tag .dot { fill: #FFF; stroke-width: 0px; } #line-thumbsdown .dot { fill: #FFFFFF; stroke-width: 0px; } #line-thumbsup .dot { fill: #FFFFFF; stroke-width: 0px; } #line-trash .details { fill: #FFF; stroke-width: 0px; } #line-winner .text { fill: #FFFFFF; : ; stroke-width: 0px; } #line-spaceship .light { -webkit-transform: translateY(1px); -moz-transform: translateY(1px); transform: translateY(1px); } /*============================================= [ Hover Styles ] ==============================================*/ .flat-line:hover .icon { -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); /*animation-name*/ -webkit-animation-name: line-burst; -moz-animation-name: line-burst; -ms-animation-name: line-burst; -o-animation-name: line-burst; animation-name: line-burst; /*animation-duration*/ -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px !important; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } .flat-line:hover .icon > path { stroke: transparent; stroke-width: 0px; } .flat-line:hover .circle { stroke: transparent; stroke-width: 0px; } /*Exceptions*/ .flat-line:hover .icon > .lightning { stroke: transparent; stroke-width: 0px; } .flat-line:hover #line-user .collar_right { stroke: transparent; stroke-width: 0px; } .flat-line:hover#line-user .collar_left { stroke: transparent; stroke-width: 0px; } .flat-line:hover #line-lightning .bolt { stroke: transparent; stroke-width: 0px; } .flat-line:hover #line-lightning .highlight { stroke: transparent; stroke-width: 0px; } .flat-line:hover #line-mic .bars_right rect { stroke: transparent; stroke-width: 0px; } .flat-line:hover #line-coffee .top { stroke: transparent; stroke-width: 0px; } #line-browser:hover .circle { fill: #B1EB5B } #line-browser:hover .screen { fill: #b0b0b0 } #line-browser:hover .base { fill: #b0b0b0 } #line-browser:hover .top { fill: #8F8F8F } #line-browser:hover .green { fill: #AEE42D } #line-browser:hover .orange { fill: #FFD02C } #line-browser:hover .red { fill: #E64545 } #line-brush:hover .brush_base { fill: #00A3C6 } #line-brush:hover .brush_highlight { fill: #43C1DC } #line-brush:hover .brush_silver { fill: #C8C8C8 } #line-brush:hover .brush_tip { fill: #917152 } #line-brush:hover .circle { fill: #F0A878 } #line-calander:hover .circle { fill: #F3CF3F } #line-calander:hover .base_top { fill: #5B3F89 } #line-calander:hover .left { fill: #848484 } #line-calander:hover .right { fill: #848484 } #line-calander:hover .number { fill: #fff } #line-calander:hover .base_bottom { fill: #644892 } #line-camera:hover .circle { fill: #F39C12 } #line-camera:hover .base { fill: #E0DECD } #line-camera:hover .strip { fill: #3376D2 } #line-camera:hover .lens { fill: #CAC8B7 } #line-camera:hover .lens_inner { fill: #A6A495 } #line-camera:hover .flash { fill: #FFF } #line-camera:hover .red { fill: #D25133 } #line-camera:hover .button { fill: #A6A496 } #line-clock:hover .circle { fill: #02BD85 } #line-clock:hover .base { fill: #FF8933 } #line-clock:hover .face { fill: #FFF } #line-clock:hover .seconds { fill: #FF725F } #line-clock:hover .middle { fill: #808080 } #line-clock:hover .hour { fill: #808080 } #line-clock:hover .minute { fill: #808080 } #line-coffee:hover .circle { fill: #82D8B5 } #line-coffee:hover .base { fill: #8F6349 } #line-coffee:hover .middle { fill: #9C8679 } #line-coffee:hover .top { fill: #F1F1F1 } #line-diamond:hover .circle { fill: #02BD85 } #line-diamond:hover .middle { fill: #D87598 } #line-diamond:hover .top_3 { fill: #FFC8DB } #line-diamond:hover .top_2 { fill: #F2A0BD } #line-diamond:hover .top_1 { fill: #F2A0BD } #line-diamond:hover .top_left { fill: #D87598 } #line-diamond:hover .top_right { fill: #D87598 } #line-diamond:hover .right { fill: #C15179 } #line-diamond:hover .left { fill: #FFC8DB } #line-disk:hover .circle { fill: #F3CF3F } #line-disk:hover .base { fill: #5D699B } #line-disk:hover .top { fill: #B2B2B2 } #line-disk:hover .top_right { fill: #747A90 } #line-disk:hover .bottom { fill: #D9D9C2 } #line-disk:hover .text { fill: #747A90 } #line-email:hover .circle { fill: #7D79BC } #line-email:hover .top { fill: #3DD97F } #line-email:hover .paper { fill: #FFFFFF } #line-email:hover .base { fill: #2DB466 } #line-email:hover .text { fill: #BBBBBB } #line-film:hover .circle { fill: #8DD0BE } #line-film:hover .base { fill: #6E6E6E } #line-film:hover .bottom { fill: #515151 } #line-film:hover .top { fill: #8C8C8C } #line-flag:hover .circle { fill: #8DD0BE } #line-flag:hover .bottom { fill: #FF5400 } #line-flag:hover .shadow { fill: #C03F00 } #line-flag:hover .top { fill: #FF5400 } #line-flag:hover .pole { fill: #676767 } #line-folder:hover .circle { fill: #82D8B5 } #line-folder:hover .back { fill: #9C4588 } #line-folder:hover .paper_back { fill: #D9D9D9 } #line-folder:hover .paper_front { fill: #fff } #line-folder:hover .front { fill: #BF67AB } #line-graph:hover .circle { fill: #E3A7C0 } #line-graph:hover .bar_left { fill: #7BC156 } #line-graph:hover .bar_middle { fill: #92D76C } #line-graph:hover .bar_right { fill: #64A242 } #line-graph:hover .front { fill: } #line-graph:hover .dot_4, #line-graph:hover .dot_3, #line-graph:hover .dot_2, #line-graph:hover .dot_1 { fill: #fff } #line-heart:hover .circle { fill: #02BD85 } #line-heart:hover .base { fill: #BC4B36 } #line-heart:hover .left { fill: #db5940 } #line-home:hover .circle { fill: #02BD85 } #line-home:hover .base { fill: #F1F1F1 } #line-home:hover .hole { fill: #C3C3C3 } #line-home:hover .roof { fill: #D34141 } #line-lightning:hover .circle { fill: #423D5B } #line-lightning:hover .bolt { fill: #FFD928 } #line-lightning:hover .highlight { fill: #FFF3B9 } #line-location:hover .circle { fill: #4890A8 } #line-location:hover .base { fill: #B6351B } #line-location:hover .inner { fill: #7E2412 } #line-lock:hover .circle { fill: #02AF7E } #line-lock:hover .base { fill: #C9A80D } #line-lock:hover .baselight { fill: #D9BC36 } #line-lock:hover .keyhole { fill: #8A7200 } #line-lock:hover .bar { fill: #C6C6C6 } #line-magnify:hover .circle { fill: #F2D65F } #line-magnify:hover .base { fill: #34B9F1 } #line-magnify:hover .glass { fill: #8DDDFF } #line-message:hover .circle { fill: #AC5D9F } #line-message:hover .back { fill: #FFAD10 } #line-message:hover .front { fill: #00A3C6 } #line-message:hover .dots { fill: #006A81 } #line-mic:hover .circle { fill: #F3CF3F } #line-mic:hover .base { fill: #40979F } #line-mic:hover .stand { fill: #5F8083 } #line-mic:hover .bars_left { fill: #267178 } #line-mic:hover .bars_right rect { fill: #267178 } #line-paper:hover .circle { fill: #D6D6B8 } #line-paper:hover .base { fill: #929292 } #line-paper:hover .front { fill: #FFFFFF } #line-paper:hover .corner { fill: #D6D6D6 } #line-paper:hover .text { fill: #BBBBBB } #line-pencil:hover .circle { fill: #CDEFE1 } #line-pencil:hover .wood { fill: #FFC833 } #line-pencil:hover .base_top { fill: #456FD8 } #line-pencil:hover .base_bottom { fill: #3258B6 } #line-pencil:hover .base_middle { fill: #567FE5 } #line-pencil:hover .tip { fill: #567FE5 } #line-pencil:hover .eraser { fill: #FF72B1 } #line-pencil:hover .metal { fill: #C6C6C6 } #line-phone:hover .circle { fill: #E55D57 } #line-phone:hover .base { fill: #6F82A4 } #line-phone:hover .screen { fill: #A5B5D3 } #line-phone:hover .details { fill: #516078 } #line-picture:hover .circle { fill: #B1EB5B } #line-picture:hover .back { fill: #A46B49 } #line-picture:hover .front { fill: #CE8A61 } #line-picture:hover .sky { fill: #DCF5FF } #line-picture:hover .sun { fill: #FF7800 } #line-picture:hover .mountain { fill: #3B8C1E } #line-plane:hover .circle { fill: #E88D70 } #line-plane:hover .bottom { fill: #007D7E } #line-plane:hover .right { fill: #4ED0D1 } #line-plane:hover .middle { fill: #3AAAAB } #line-plane:hover .left { fill: #4ED0D1 } #line-present:hover .circle { fill: #4890A8 } #line-present:hover .base { fill: #F1F1F1 } #line-present:hover .top { fill: #C3C3C3 } #line-present:hover .ribbon { fill: #D34141 } #line-robot:hover .circle { fill: #E88D70 } #line-robot:hover .ears { fill: #39517A } #line-robot:hover .base { fill: #4C70AF } #line-robot:hover .highlight { fill: #6384BE } #line-robot:hover .antenna { fill: #A0ABBD } #line-robot:hover .eyes { fill: #FFFFFF } #line-rocket:hover .circle { fill: #4BAE97 } #line-rocket:hover .engine { fill: #7D7D7D } #line-rocket:hover .base { fill: #B0CED8 } #line-rocket:hover .window { fill: #8BABB6 } #line-rocket:hover .glass { fill: #FFFFFF } #line-rocket:hover .flame { fill: #FF5400 } #line-screen:hover .circle { fill: #F8B243 } #line-screen:hover .stand { fill: #516078 } #line-screen:hover .base { fill: #6F82A4 } #line-screen:hover .highlight { fill: #A5B5D3 } #line-screen:hover .logo { fill: #516078 } #line-settings:hover .circle { fill: #E3A7C0 } #line-settings:hover .base { fill: #8BAE5D } #line-settings:hover .top { fill: #698741 } #line-spaceship:hover .circle { fill: #02BD85 } #line-spaceship:hover .light { fill: #FFF3B9 } #line-spaceship:hover .glass { fill: #8DDDFF } #line-spaceship:hover .base { fill: #7E8CA6 } #line-spaceship:hover .circles { fill: #56627A } #line-storm:hover .circle { fill: #90C0D8 } #line-storm:hover .cloud { fill: #858585 } #line-storm:hover .lightning { fill: #FFAD10 } #line-suitcase:hover .circle { fill: #02BD85 } #line-suitcase:hover .top { fill: #9A4C1D } #line-suitcase:hover .bottom { fill: #B75B24 } #line-suitcase:hover .buttons { fill: #C89211 } #line-tag:hover .circle { fill: #D6D6B8 } #line-tag:hover .base { fill: #FFBA00 } #line-tag:hover .dot { fill: #C38E00 } #line-thumbsdown:hover .circle { fill: #E74C3C } #line-thumbsdown:hover .base { fill: #F1CDB0 } #line-thumbsdown:hover .sleeve { fill: #E1AF45 } #line-thumbsdown:hover .cuff { fill: #339FA9 } #line-thumbsdown:hover .dot { fill: #FFFFFF } #line-thumbsup:hover .circle { fill: #02BD85 } #line-thumbsup:hover .base { fill: #F1CDB0 } #line-thumbsup:hover .sleeve { fill: #854D37 } #line-thumbsup:hover .cuff { fill: #C24C28 } #line-thumbsup:hover .dot { fill: #FFFFFF } #line-trash:hover .circle { fill: #90C0D8 } #line-trash:hover .base { fill: #8C8C8C } #line-trash:hover .details { fill: #515151 } #line-trash:hover .lid { fill: #6E6E6E } #line-user:hover .circle { fill: #D1F274 } #line-user:hover .body { fill: #44B2B6 } #line-user:hover .collar_right { fill: #FFFFFF } #line-user:hover .collar_left { fill: #FFFFFF } #line-user:hover .head { fill: #F1CDB0 } #line-user:hover .hair { fill: #AB6125 } #line-winner:hover .circle { fill: #F8B243 } #line-winner:hover .ribbon { fill: #5BB3F0 } #line-winner:hover .base { fill: #1983CD } #line-winner:hover .text { fill: #FFFFFF } @-webkit-keyframes line-burst { { -webkit-transform: scale(1.1); animation-timing-function: ease-in; } 37% { -webkit-transform: scale(1.3); animation-timing-function: ease-out; } 55% { -webkit-transform: scale(1.17); animation-timing-function: ease-in; } 73% { -webkit-transform: scale(1.05); animation-timing-function: ease-out; } 82% { -webkit-transform: scale(1.2); animation-timing-function: ease-in; } 91% { -webkit-transform: scale(1.3); animation-timing-function: ease-out; } 96% { -webkit-transform: scale(1.2); animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1.1); animation-timing-function: ease-out; } } @-moz-keyframes line-burst { { -moz-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -moz-transform: scale(1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0