css实现三款鼠标悬浮按钮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现三款鼠标悬浮按钮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html { width: 100%; height: 100%; overflow-x: hidden; } body { padding: 0; margin: 0; } .section { width: 100%; height: 400px; padding: 0; position: absolute; border-top: 2px solid #fff; border-bottom: 2px solid #fff; } .one { top: 0px; left: 0px; background: url(//repo.bfw.wiki/bfwrepo/icon/6056bf753c238.jpg) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .one #button { width: 122px; padding: 6px; height: 50px; color: #f6f6f6; font-family: "Montserrat", sans-serif; font-size: 2.5em; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: #fff 2px solid; overflow: hidden; -webkit-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1); -moz-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1); -o-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1); cursor: pointer; box-shadow: 0px 0px 0px #fff; } .one #button:hover { text-shadow: 0px 8px 6px rgba(0, 0, 0, 0.9); box-shadow: 8px 8px 0px #fff, -8px -8px 0px #fff; } .one #button:hover .one { opacity: 1; transform: translate3d(0px, 0px, 0px); } .one #button:hover .two { transform: translate3d(0px, 0px, 0px); } .one #button:hover .three { transform: translate3d(0px, 0px, 0px); } .one #button:hover .four { transform: translate3d(0px, 0px, 0px); } .one #button .ring { width: 100%; height: 100%; position: absolute; background: transparent; top: 0; left: 0; transform: translate3d(0px, 90px, 0px); } .one #button .one { background-color: #FE6B26; -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); -moz-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); -o-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); z-index: -3; z-index: -4; } .one #button .two { background-color: #FE8EFE; -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); -moz-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); -o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); z-index: -3; } .one #button .three { background-color: #841EE4; z-index: -2; -webkit-transition: all 0.7s cubic-bezier(0.55, 0, 0.1, 1); -moz-transition: all 0.7s cubic-bezier(0.55, 0, 0.1, 1); -o-transition: all 0.7s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.7s cubic-bezier(0.55, 0, 0.1, 1); z-index: -3; } .one #button .four { background-color: #3E12FD; z-index: -1; -webkit-transition: all 0.9s cubic-bezier(0.55, 0, 0.1, 1); -moz-transition: all 0.9s cubic-bezier(0.55, 0, 0.1, 1); -o-transition: all 0.9s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.9s cubic-bezier(0.55, 0, 0.1, 1); z-index: -3; } .two { top: 400px; left: 0; background: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .two #button { width: 122px; padding: 16px; height: 50px; color: #f6f6f6; font-family: "Montserrat", sans-serif; font-size: 2.5em; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: transparent; overflow: hidden; -webkit-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1); -moz-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1); -o-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1); cursor: pointer; box-shadow: 0px 0px 0px #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; border: #594A83 solid 8px; z-index: 0; } .two #button::after { position: absolute; content: ""; top: 0px; left: 0px; width: 0%; height: 100%; background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#fff), to(transparent)); background-image: -webkit-linear-gradient(left, #fff, transparent); background-image: -moz-linear-gradient(left, #fff, transparent); background-image: -o-linear-gradient(left, #fff, transparent); z-index: -1; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0