更新第68个小实例

2021-12-12 17:52:52 +08:00 · 2021-12-12 17:52:52 +08:00 · 45191d10b0
parent fd5f8a7636
commit 45191d10b0
6 changed files with 145 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -71,4 +71,5 @@
 64. HTML5+CSS3小实例之纯CSS实现全屏滚动贴合效果（横屏）
 65. HTML5+CSS3小实例之纯CSS实现点赞的动画效果
 66. HTML5+CSS3小实例之带缩略图的焦点图切换效果
-67. HTML5+CSS3小实例之纯CSS实现一个简单的太阳系
+67. HTML5+CSS3小实例之纯CSS实现一个简单的太阳系
+68. HTML5+CSS3小实例之人物介绍卡片
--- a/css/68.css
+++ b/css/68.css
@ -0,0 +1,107 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 渐变背景 */
+    background: linear-gradient(200deg,#517fa4,#243949);
+}
+.card{
+    /* 相对定位 */
+    position: relative;
+    width: 300px;
+    height: 450px;
+    margin: 20px;
+    background-color: #758a99;
+    border-radius: 20px;
+    /* 溢出隐藏 */
+    overflow: hidden;
+    /* 弹性布局 */
+    display: flex;
+    /* 元素纵向排列 */
+    flex-direction: column;
+    /* 居中 */
+    align-items: center;
+    color: #fff;
+    /* 阴影 */
+    box-shadow: 0 0 30px rgba(0,0,0,0.5);
+    /* 不让其被挤压 */
+    flex-shrink: 0;
+}
+.card .photo img{
+    width: 100%;
+    height: 100%;
+    /* 保持原有尺寸比例，裁切长边 */
+    object-fit: cover;
+}
+/* 默认大图 */
+.card .photo{
+    /* 绝对定位 */
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 0%;
+    overflow: hidden;
+    /* 动画过渡 */
+    transition: 0.5s;
+}
+/* 鼠标移入变小图 */
+.card:hover .photo{
+    top: 30px;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    box-shadow: 0 0 20px rgba(0,0,0,0.8);
+}
+/* 这里加个黑色到透明的渐变背景，可以更好的看清楚名字 */
+.card .photo::before{
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom,transparent 50%,#222);
+}
+.card h1{
+    position: absolute;
+    top: 370px;
+    transition: 0.5s;
+}
+.card:hover h1{
+    top: 170px;
+}
+.card h2{
+    margin-top: 220px;
+    width: 80%;
+    border-bottom: 1px solid rgba(255,255,255,0.3);
+    font-size: 20px;
+    text-align: center;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+}
+.card p{
+    width: 90%;
+    text-indent: 32px;
+    font-size: 16px;
+    margin-bottom: 15px;
+    line-height: 30px;
+}
+.card a{
+    font-size: 14px;
+    color: rgba(255,255,255,0.8);
+    text-decoration: none;
+    border: 1px solid rgba(255,255,255,0.5);
+    padding: 8px 32px;
+    border-radius: 8px;
+}
+.card a:hover{
+    color: #fff;
+    background-color: rgba(255,255,255,0.2);
+}
--- a/html/68.html
+++ b/html/68.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>人物介绍卡片</title>
+    <link rel="stylesheet" href="../css/68.css">
+</head>
+
+<body>
+    <div class="card">
+        <div class="photo"><img src="../images/op/asl/a.jpg" alt=""></div>
+        <h1>艾斯</h1>
+        <h2>“火拳”艾斯</h2>
+        <p>波特卡斯·D·艾斯，日本漫画《航海王》及其衍生作品中的角色。萨博与路飞的结义兄弟。</p>
+        <a href="#">了解更多</a>
+    </div>
+    <div class="card">
+        <div class="photo"><img src="../images/op/asl/s.jpg" alt=""></div>
+        <h1>萨博</h1>
+        <h2>革命军的二把手</h2>
+        <p>萨博，日本漫画《航海王》及其衍生作品中的角色。是路飞与艾斯的结义兄弟。</p>
+        <a href="#">了解更多</a>
+    </div>
+    <div class="card">
+        <div class="photo"><img src="../images/op/asl/l.jpg" alt=""></div>
+        <h1>路飞</h1>
+        <h2>草帽小子</h2>
+        <p>蒙奇·D·路飞，日本漫画《航海王》及其衍生作品中的男主角。是草帽海贼团的船长。</p>
+        <a href="#">了解更多</a>
+    </div>
+</body>
+
+</html>
--- a/images/op/asl/a.jpg
+++ b/images/op/asl/a.jpg
--- a/images/op/asl/l.jpg
+++ b/images/op/asl/l.jpg
--- a/images/op/asl/s.jpg
+++ b/images/op/asl/s.jpg