css布局实现用户社交信息卡片效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现用户社交信息卡片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.11.2.css"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; } body{ font-family: sans-serif; background: url(//repo.bfw.wiki/bfwrepo/image/605ad0acca3fe.png); background-size: cover; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .card{ position: relative; overflow: hidden; text-align: center; box-shadow: 0 0 10px #146ec273; } .section{ padding: 60px 40px; background: #74b9ffaa; } .message,.notif{ position: absolute; top: 40px; font-size: 24px; cursor: pointer; color: #fff; } .message{ right:40px } .notif{ left: 40px; } .pic{ position: relative; width: 150px; height: 150px; margin: auto auto 20px auto; padding: 4px; border: 2px solid #6a89cc; border-radius: 50%; } .pic img{ width: 100%; height: 100%; border-radius: 50%; } .pic::before{ content: ""; width: 100%; height: 100%; position: absolute; border: 1px solid #3c6382; left: 0; top: 0; box-sizing: border-box; border-radius: 50%; animation: animate 1.5s linear infinite; } @keyframes animate{ to{ transform: scale(1.5); opacity: 0; } } .name{ color: #f1f1f1; font-size: 28px; letter-spacing: 2px; text-transform: inherit; } .tag{ font-size: 18px; color: #222; } .bottom-section{ position: relative; display: flex; justify-content: center; align-items: center; background-color: #f1f1f1; padding: 60px 40px; font-size: 28px; text-transform: inherit; } .border{ width: 1px; height: 20px; background: #bbb; margin: 0 30px; } .bottom-section span{ font-size: 14px; display: block; } .social-media{ position: absolute; width: 100%; top: -30px; left: 0; z-index: 1; } .so.........完整代码请登录后点击上方下载按钮下载查看
网友评论0