div+css实现立体3d悬浮上升按钮效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现立体3d悬浮上升按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400'); body { margin:0; padding:0; background:#ccc; font-family: 'Roboto Condensed', sans-serif; } ul { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:flex; margin:0; padding:0; } ul li { list-style:none; margin:0 5px; } ul li a .fa { font-size: 40px; color: #262626; line-height:80px; transition: .5s; padding-right: 14px; } ul li a span { padding:0; margin:0; position:absolute; top: 30px; color: #262626; letter-spacing: 4px; transition: .5s; } ul li a { text-decoration: none; display:absolute; display:block; width:210px; height:80px; background: #fff; text-align:left; padding-left: 20px; transform: rotate(-30deg) skew(25deg) translate(0,0); transition:.5s; box-shadow: -20px 20px 10px rgba(0,0,0,.5); } ul li a:before { content: ''; position: absolute; top:10px; left:-20px; height:100%; width:20px; background: #b1b1b1; transform: .5s; transform: rotate(0deg) skewY(-45deg); } ul li a:after { content: ''; position: absolute; bottom:-20px; left:-10px; height:20px; width:100%; background: #b1b1b1; transform: .5s; transform: rotate(0deg) skewX(-45deg); } ul li a:hover { transform: rotate(-30deg) skew(25deg) translate(20px,-15px); box-shadow: -50px 50p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0