悬浮动态效果
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <style> @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800%7CRaleway:100,200,300,400,600,700,800,900%7CMontserrat:100,200,300,400,500,600,700,800,900"); .box-shadow { box-shadow: 0px 0px 18px -3px rgba(143, 143, 143, 0.5); } .card:hover { box-shadow: 0px 0px 20px -3px rgba(143, 143, 143, 0.75); } .box-shadow-dark { box-shadow: 3px 3px 11px -3px rgba(0, 0, 0, 0.25); } body { background-color: yellow; font-family: 'Open Sans', Arial, Verdana; } section { padding-top: 2rem; padding-bottom: 2rem; } h6 { color: #990000; } .font-weight-bolder { font-weight: 900; } .display-1, .display-2, .display-3, .display-4 { font-weight: 900; } .heading-big { font-weight: 800; text-transform: uppercase; color: red; margin: 0; padding: .15rem 0; line-height: 1.2; font-size: 2rem; -webkit-transition: color .5s ease-in, border-color .5s ease-in-out; transition: color .5s ease-in, border-color .5s ease-in-out; } .heading-big-square { padding: 1rem 1rem; border: 10px solid red; margin: .5rem auto 1rem auto; } .heading-big:hover { color: #ff9900; border-color: #ff9900; } .card { -webkit-transition: .5s ease; transition: .5s ease; border-radius: 0; -webkit-transform: perspective(3em) rotateX(0deg) rotateY(-1.175deg) rotateZ(-1deg); transform: perspective(3em) rotateX(0deg) rotateY(-1.175deg) rotateZ(-1deg); } .card-header { border-radius: 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0