div+css实现炫酷按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现炫酷按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root{ /* color type A */ --line_color : #555555 ; --back_color : #FFECF6 ; /* color type B */ /* --line_color : #1b1919 ; --back_color : #E9ECFF ; */ /* color type C */ /* --line_color : #00135C ; --back_color : #DEFFFA ; */ } .button{ position : relative ; z-index : 0 ; width : 240px ; height : 56px ; text-decoration : none ; font-size : 14px ; font-weight : bold ; color : var(--line_color) ; letter-spacing : 2px ; transition : all .3s ease ; } .button__text{ display : flex ; justify-content : center ; align-items : center ; width : 100% ; height : 100% ; } .button::before, .button::after, .button__text::before, .button__text::after{ content : '' ; position : absolute ; height : 3px ; border-radius : 2px ; background : var(--line_color) ; transition : all .5s ease ; } .button::before{ top : 0 ; left : 54px ; width : calc( 100% - 56px * 2 - 16px ) ; } .button::after{ top : 0 ; right : 54px ; width : 8px ; } .button__text::before{ bottom : 0 ; right : 54px ; width : calc( 100% - 56px * 2 - 16px ) ; } .button__text::after{ bottom : 0 ; left : 54px ; width : 8px ; } .button__line{ position : absolute ; top : 0 ; width : 56px ; height : 100% ; overflow : hidden ; } .button__line::before{ content : '' ; position : absolute ; top : 0 ; width : 150% ; height : 100% ; box-sizing : border-box ; border-radius : 300px ; border : solid 3px var(--line_color) ; } .button__line:nth-child(1), .button__line:nth-child(1)::before{ left : 0 ; } .button__line:nth-child(2), .button__line:nth-child(2)::before{ right : 0 ; } .button:hover{ letter-spacing : 6px ; } .button:hover::before, .button:hover .button__text::before{ width : 8px ; } .button:hover::after, .button:hover .button__text::after{ width : calc( 100% - 56px * 2 - 16px ) ; } .button__drow1, .button__drow2{ position : absolute ; z-index : -1 ; border-radius : 16px ; transform-origin : 16px 16px ; } .button__drow1{ top : -16px ; left : 40px ; width : 32px ; height : 0; transform : rotate( 30deg ) ; } .button__drow2{ top : 44px ; left : 77px ; width : 32px ; height : 0 ; transform : rotate(-127deg ) ; } .button__drow1::before, .button__drow1::after, .button__drow2::before, .button__drow2::after{ content.........完整代码请登录后点击上方下载按钮下载查看
网友评论0