css实现卡片悬浮文字弹出动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现卡片悬浮文字弹出动画效果代码
下面为部分代码预览,完整代码请点击下载或在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=Open+Sans:300,400,700); * { box-sizing: border-box; } body { background-image: -webkit-gradient(linear, left top, right top, from(#034378), to(#2d4e68)); background-image: linear-gradient(to right, #034378, #2d4e68); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100vh; font-family: "Open Sans", sans-serif; } a { text-decoration: none; } h1 { font-family: "Open Sans", sans-serif; font-weight: 300; } .row { max-width: 900px; margin: 50px auto 0; } .card { float: left; padding: 0 1.7rem; width: 50%; } .card .menu-content { margin: 0; padding: 0; list-style-type: none; } .card .menu-content::before, .card .menu-content::after { content: ''; display: table; } .card .menu-content::after { clear: both; } .card .menu-content li { display: inline-block; } .card .menu-content a { color: #fff; } .card .menu-content span { position: absolute; left: 50%; top: 0; font-size: 10px; font-weight: 700; font-family: 'Open Sans'; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .card .wrapper { background-color: #fff; min-he.........完整代码请登录后点击上方下载按钮下载查看
网友评论0