上百款hover悬浮按钮css动画特效
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.css"> <style> @import "https://fonts.googleapis.com/css?family=Roboto:400,700";@font-face{font-weight:400;font-style:normal;font-family:codropsicons;src:url(../fonts/codropsicons/codropsicons.eot);src:url(../fonts/codropsicons/codropsicons.eot?#iefix) format("embedded-opentype"),url(../fonts/codropsicons/codropsicons.woff) format("woff"),url(../fonts/codropsicons/codropsicons.ttf) format("truetype"),url(../fonts/codropsicons/codropsicons.svg#codropsicons) format("svg")}*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box}.cf:before,.cf:after{content:'';display:table}.cf:after{clear:both}body{background:#cfd8dc;color:#37474f;font-weight:400;font-size:1em;font-family:raleway,Arial,sans-serif}.support{font-weight:700;padding:2em 0 0;font-size:1.4em;color:#ee2563;display:none}a{color:#7986cb;text-decoration:none;outline:0}a:hover,a:focus{color:#3f51b5}.hidden{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.container{margin:0 auto;text-align:center;overflow:hidden}.content{padding:2em 1em 5em;z-index:1;max-width:1000px;margin:0 auto}.content h2{margin:0 0 2em}.content p{margin:1em 0;padding:0 0 2em;font-size:.85em}.box{padding:4.5em 0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center}.codrops-header{padding:3em 190px 4em;letter-spacing:-1px}.codrops-header h1{font-weight:200;font-size:4em;line-height:1;margin-bottom:0}.codrops-header h1 span{display:block;font-size:40%;letter-spacing:0;padding:.5em 0 1em;color:#a8b3b8}.codrops-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.25em;text-align:center}.codrops-links::after{position:absolute;top:0;left:50%;width:1px;height:100%;background:#bfcacf;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg)}.codrops-icon{display:inline-block;margin:.5em;padding:0;width:1.5em;text-decoration:none}.codrops-icon:before{margin:0 5px;text-transform:none;font-weight:400;font-style:normal;font-variant:normal;font-family:codropsicons;line-height:1;speak:none;-webkit-font-smoothing:antialiased}.codrops-icon span{display:none}.codrops-icon--drop:before{content:"\e001"}.codrops-icon--prev:before{content:"\e004"}.content--related{text-align:center;font-weight:600}.media-item{display:inline-block;padding:1em;margin:1em 0 0;vertical-align:top;-webkit-transition:color .3s;transition:color .3s}.media-item__img{opacity:.8;max-width:100%;-webkit-transition:opacity .3s;transition:opacity .3s}.media-item:hover .media-item__img,.media-item:focus .media-item__img{opacity:1}.media-item__title{font-size:.85em;margin:0;padding:.5em}@media screen and (max-width:50em){.codrops-header{padding:3em 10% 4em}}@media screen and (max-width:40em){.codrops-header h1{font-size:2.8em}} .bg-1 { background: #eceff1; color: #37474f } .bg-2 { background: #7986cb; color: #eceff1 } .bg-3 { background: #37474f; color: #fff } .button { float: left; min-width: 150px; max-width: 250px; display: block; margin: 1em; padding: 1em 2em; border: none; background: 0 0; color: inherit; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale } .button:focus { outline: none } .button>span { vertical-align: middle } .bg-1 .button { color: #37474f; border-color: #37474f } .bg-2 .button { color: #eceff1; border-color: #eceff1 } .bg-3 .button { color: #fff; border-color: #fff } .button--size-s { font-size: 14px } .button--size-m { font-size: 16px } .button--size-l { font-size: 18px } .button--text-upper { letter-spacing: 2px; text-transform: uppercase } .button--text-thin { font-weight: 300 } .button--text-medium { font-weight: 500 } .button--text-thick { font-weight: 600 } .button--round-s { border-radius: 5px } .button--round-m { border-radius: 15px } .button--round-l { border-radius: 40px } .button--border-thin { border: 1px solid } .button--border-medium { border: 2px solid } .button--border-thick { border: 3px solid } .button--winona { overflow: hidden; padding: 0; -webkit-transition: border-color .3s,background-color .3s; transition: border-color .3s,background-color .3s; -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1); transition-timing-function: cubic-bezier(.2,1,.3,1) } .button--winona::after { content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; color: #3f51b5; -webkit-transform: translate3d(0,25%,0); transform: translate3d(0,25%,0) } .button--winona>span { display: block } .button--winona.button--inverted { color: #7986cb } .button--winona.button--inverted:after { color: #fff } .button--winona::after,.button--winona>span { padding: 1em 2em; -webkit-transition: -webkit-transform .3s,opacity .3s; transition: transform .3s,opacity .3s; -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1); transition-timing-function: cubic-bezier(.2,1,.3,1) } .button--winona:hover { border-color: #3f51b5; background-color: rgba(63,81,181,.1) } .button--winona.button--inverted:hover { border-color: #21333c; background-color: #21333c } .button--winona:hover::after { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } .button--winona:hover>span { opacity: 0; -webkit-transform: translate3d(0,-25%,0); transform: translate3d(0,-25%,0) } .button--ujarak { -webkit-transition: border-color .4s,color .4s; transition: border-color .4s,color .4s } .button--ujarak::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #37474f; z-index: -1; opacity: 0; -webkit-transform: scale3d(.7,1,1); transform: scale3d(.7,1,1); -webkit-transition: -webkit-transform .4s,opacity .4s; transition: transform .4s,opacity .4s; -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1); transition-timing-function: cubic-bezier(.2,1,.3,1) } .button--ujarak.button--round-s::before { border-radius: 2px } .button--ujarak.button--inverted::before { background: #7986cb } .button--ujarak,.button--ujarak::before { -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1); transition-timing-function: cubic-bezier(.2,1,.3,1) } .button--ujarak:hover { color: #fff; border-color: #37474f } .button--ujarak.button--inverted:hover { color: #37474f; border-color: #fff } .button--ujarak:hover::before { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } .button--wayra { overflow: hidden; width: 245px; -webkit-transition: border-color .3s,color .3s; transition: border-color .3s,color .3s; -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1); transition-timing-function: cubic-bezier(.2,1,.3,1) } .button--wayra::before { content: ''; position: absolute; top: 0; left: 0; width: 150%; height: 100%; background: #37474f; z-index: -1; -webkit-transform: rotate3d(0,0,1,-45deg) translate3d(0,-3em,0); transform: rotate3d(0,0,1,-45deg) translate3d(0,-3em,0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: -webkit-transform .3s,opacity .3s,background-color .3s; transition: transform .3s,opacity .3s,background-color .3s } .button--wayra:hover { color: #fff; border-color: #3f51b5 } .button--wayra.button--inverted:hover { color: #3f51b5; border-color: #fff } .button--wayra:hover::before { opacity: 1; background-color: #3f51b5; -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg); -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1); transition-timing-function: cubic-bezier(.2,1,.3,1) } .button--wayra.button--inverted:hover::before { background-color: #fff } .button--tamaya { overflow: hidden; color: #7986cb; min-width: 180px } .button--tamaya.button--inverted { color: #37474f; border-color: #37474f } .button--tamaya::before,.button--tamaya::after { content: attr(data-text); position: absolute; width: 100%; height: 50%; left: 0; background: #7986cb; color: #fff; overflow: hidden; -webkit-transition: -webkit-transform .3s; transition: transform .3s; -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1); transition-timing-function: cubic-bezier(.2,1,.3,1) } .button--tamaya.button--inverted::before,.button--tamaya.button--inverted::after { background: #fff; color: #37474f } .button--tamaya::before { top: 0; padding-top: 1em } .button--tamaya::after { bottom: 0; line-height: 0 } .button--tamaya>span { display: block; -webkit-transform: scale3d(.2,.2,1); transform: scale3d(.2,.2,1); opacity: 0; -webkit-transition: -webkit-transform .3s,opacity .3s; transition: transform .3s,opacity .3s; -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1); transition-timing-function: cubic-bezier(.2,1,.3,1) } .button--tamaya:hover::before { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } .button--tamaya:hover::after { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } .button--tamaya:hover>span { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } .button--rayen { overflow: hidden; padding: 0; width: 230px } .button--rayen.button--inverted { color: #fff } .button--rayen::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #7986cb; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } .button--rayen.button--inverted::before { background: #fff; color: #37474f } .button--rayen>span { display: block } .button--rayen::before,.button--rayen>span { padding: 1em 2em; -webkit-transition: -webkit-transform .3s; transition: transform .3s; -webkit-transition-timing-function: cubic-bezier(.75,0,.125,1); transition-timing-function: cubic-bezier(.75,0,.125,1) } .button--rayen:hover::before { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } .button--rayen:hover>span { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } .button--pipaluk { width: 240px; padding: 1.5em 3em; color: #fff } .button--pipaluk.button--inverted { color: #7986cb } .button--pipaluk::before,.button--pipaluk::after { content: ''; border-radius: inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-transition: -webkit-transform .3s,background-color .3s; transition: transform .3s,background-color .3s; -webkit-transition-timing-function: cubic-bezier(.25,0,.3,1); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0