css实现50余种按钮悬浮效果代码
代码语言:html
所属分类:悬停
代码描述:css实现50余种按钮悬浮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .button { margin: 0.4em; padding: 1em; cursor: pointer; background: #ececec; text-decoration: none; color: #666; } /* 2D TRANSITIONS */ /* Grow */ .grow { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .grow:hover { transform: scale(1.1); } /* Shrink */ .shrink { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .shrink:hover { transform: scale(0.9); } /* Pulse */ @keyframes pulse { 25% { transform: scale(1.1); } 75% { transform: scale(0.9); } } .pulse { display: inline-block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .pulse:hover { animation-name: pulse; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } /* Pulse Grow */ @keyframes pulse-grow { to { transform: scale(1.1); } } .pulse-grow { display: inline-block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .pulse-grow:hover { animation-name: pulse-grow; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } /* Pulse Shrink */ @keyframes pulse-shrink { to { transform: scale(0.9); } } .pulse-shrink { display: inline-block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .pulse-shrink:hover { animation-name: pulse-shrink; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } /* Push */ @keyframes push { 50% { transform: scale(0.8); } 100% { transform: scale(1); } } .push { display: inline-block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .push:hover { animation-name: push; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: 1; } /* Pop */ @keyframes pop { 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .pop { display: inline-block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .pop:hover { animation-name: pop; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: 1; } /* Rotate */ .rotate { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .rotate:hover { transform: rotate(4deg); } /* Grow Rotate */ .grow-rotate { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .grow-rotate:hover { transform: scale(1.1) rotate(4deg); } /* Float */ .float { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .float:hover { transform: translateY(-5px); } /* Sink */ .sink { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .sink:hover { transform: translateY(5px); } /* Hover */ @keyframes hover { 50% { transform: translateY(-3px); } 100% { transform: translateY(-6px); } } .hover { display: inline-block; transition-duration: 0.5s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hover:hover { transform: translateY(-6px); animation-name: hover; animation-duration: 1.5s; animation-delay: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } /* Hang */ @keyframes hang { 50% { transform: translateY(3px); } 100% { transform: translateY(6px); } } .hang { display: inline-block; transition-duration: 0.5s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hang:hover { transform: translateY(6px); animation-name: hang; animation-duration: 1.5s; animation-delay: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } /* Skew */ .skew { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .skew:hover { transform: skew(-10deg); } /* Skew Forward */ .skew-forward { display: inline-block; transition-duration: 0.3s; transition-property: transform; transform-origin: 0 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .skew-forward:hover { transform: skew(-10deg); } /* Wobble Vertical */ @keyframes wobble-vertical { 16.65% { transform: translateY(8px); } 33.3% { transform: translateY(-6px); } 49.95% { transform: translateY(4px); } 66.6% { transform: translateY(-2px); } 83.25% { transform: translateY(1px); } 100% { transform: translateY(0); } } .wobble-vertical { display: inline-block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .wobble-vertical:hover { animation-name: wobble-vertical; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } /* Wobble Horizontal */ @keyframes wobble-horizontal { 16.65% { transform: translateX(8px); } 33.3% { transform: translateX(-6px); } 49.95% { transform: translateX(4px); } 66.6% { transform: translateX(-2px); } 83.25% { transform: translateX(1px); } 100% { transform: translateX(0); } } .wobble-horizontal { display: inline-block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .wobble-horizontal:hover { animation-name: wobble-horizontal; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } /* Wobble Top */ @keyframes wobble-top { 16.65% { transform: skew(-12deg); } 33.3% { transform: skew(10deg); } 49.95% { transform: skew(-6deg); } 66.6% { transform: skew(4deg); } 83.25% { transform: skew(-2deg); } 100% { transform: skew(0); } } .wobble-top { display: inline-block; transform-origin: 0 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .wobble-top:hover { animation-name: wobble-top; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } /* Wobble Bottom */ @keyframes wobble-bottom { 16.65% { transform: skew(-12deg); } 33.3% { transform: skew(10deg); } 49.95% { transform: skew(-6deg); } 66.6% { transform: skew(4deg); } 83.25% { transform: skew(-2deg); } 100% { transform: skew(0); } } .wobble-bottom { display: inline-block; transform-origin: 100% 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .wobble-bottom:hover { animation-name: wobble-bottom; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } /* BORDER TRANSITIONS */ /* Border Fade */ .border-fade { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .border-fade:hover { box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } /* Hollow */ .hollow { display: inline-block; transition-duration: 0.3s; transition-property: background; transform: translateZ(0); /* Hack to improve performance on mobile/tablet devices */ box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .hollow:hover { background: none; } /* Trim */ .trim { display: inline-block; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .trim:before { content: ""; position: absolute; border: white solid 4px; top: 4px; left: 4px; right: 4px; bottom: 4px; opacity: 0; transition-duration: 0.3s; transition-property: opacity; } .trim:hover:before { opacity: 1; } /* Outline Outward */ .outline-outward { display: inline-block; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .outline-outward:before { content: ""; position: absolute; border: #ececec solid 4px; top: 0; right: 0; bottom: 0; left: 0; transition-duration: 0.3s; transition-property: top right bottom left; } .outline-outward:hover:before { top: -8px; right: -8px; bottom: -8px; left: -8px; } /* Outline Inward */ .outline-inward { display: inline-block; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .outline-inward:before { content: ""; position: absolute; border: #ececec solid 4px; top: -16px; right: -16px; bottom: -16px; left: -16px; opacity: 0; transition-duration: 0.3s; transition-property: top right bottom left; } .outline-inward:hover:before { top: -8px; right: -8px; bottom: -8px; left: -8px; opacity: 1; } /* Round Corners */ .round-corners { display: inline-block; transition-duration: 0.3s; transition-property: border-radius; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .round-corners:hover { border-radius: 1em; } /* SHADOW/GLOW TRANSITIONS */ /* Glow */ .glow { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .glow:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } /* Box Shadow Outset */ .box-shadow-outset { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .box-shadow-outset:hover { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); } /* Box Shadow Inset */ .box-shadow-inset { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); } .box-shadow-inset:hover { box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } /* Float Shadow */ .float-shadow { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ""; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ transition-duration: 0.3s; transition-property: transform opacity; } .float-shadow:hover { transform: translateY(-5px); /* move the element up by 5px */ } .float-shadow:hover:before { opacity: 1; transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ } /* Hover Shadow */ @keyframes hover { 50% { transform: translateY(-3px); } 100% { transform: translateY(-6px); } } @keyframes hover-shadow { 0% { transform: translateY(6px); opacity: 0.4; } 50% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(6px); opacity: 0.4; } } .hover-shadow { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hover-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ""; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ transition-duration: 0.3s; transition-property: transform opacity; } .hover-shadow:hover { transform: translateY(-6px); animation-name: hover; animation-duration: 1.5s; animation-delay: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } .hover-shadow:hover:before { opacity: 0.4; transform: translateY(6px); animation-name: hover-shadow; animation-duration: 1.5s; an.........完整代码请登录后点击上方下载按钮下载查看
网友评论0