让我们先来看看实现的效果

html代码

<!DOCTYPE html>
<html lang="zh-Hans"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第十九天</title><link rel="stylesheet" href="style.css">
</head><body><!-- 开始 --><div class="card"><div class="photo"><img src="1.jpg"></div><h1>马云 Jack Ma</h1><h2>阿里巴巴 alibaba.com</h2><p>马云，男，汉族，中共党员，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市谷来镇。</p><a href="#">了解更多</a></div><div class="card"><div class="photo"><img src="2.jpg"></div><h1>马化腾 Pony</h1><h2>腾讯 tencent.com</h2><p>马化腾，汉族，1971年10月29日生于广东省东方县八所港，广东省汕头市潮南区人。</p><a href="#">了解更多</a></div><div class="card"><div class="photo"><img src="3.jpg"></div><h1>刘强东 Richard Liu</h1><h2>京东 jd.com</h2><p>刘强东，男，汉族，1973年3月10日生（另一说法：1974年2月14日），江苏宿迁人，祖籍湖南湘潭。</p><a href="#">了解更多</a></div>
</body></html>

css代码

:root {--background-color: #2c3e50;--border-color: #7591AD;--text-color: #34495e;--color1: #EC3E27;--color2: #fd79a8;--color3: #0984e3;--color4: #00b894;--color5: #fdcb6e;--color6: #e056fd;--color7: #F97F51;--color8: #BDC581;--a_border_color: #86a3b3;--h2_border_color: #8ea2b8;--a_hover_background_color: #86a3b3;--font_color: #e8f6fd;
}* {margin: 0;padding: 0;
}html {font-size: 14px;
}body {width: 100vw;height: 100vh;background-color: var(--background-color);display: flex;justify-content: center;align-items: center;font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}.card {/* flex布局下元素不安比例缩放 */flex-shrink: 0;flex-grow: 0;position: relative;width: 300px;height: 450px;overflow: hidden;margin: 20px;background-color: var(--border-color);border-radius: 20px;display: flex;justify-content: flex-start;align-items: center;/* flex子元素纵向排列 */flex-direction: column;/* 增加一个阴影 */box-shadow: 0 0 30px #2c2c2c;/* 给字体一个颜色 */color: var(--font_color);
}.photo{position: absolute;/* 默认为放大 */width: 100%;height: 100%;overflow: hidden;transition: 0.5s;
}
.photo::before{/* 通过before增加渐变背景实现遮罩，看起来清晰一些 */position: absolute;content: '';width: 100%;height: 100%;background-image: linear-gradient(to top,#333,transparent);
}
.card:hover .photo::before{/* 缩小时隐藏 */display: none;
}
.photo img{/* 图片高宽均为100% *//* 然后按照cover缩放，裁切长边 */width: 100%;height: 100%;object-fit: cover;}
/* 鼠标移动到上面变小 */
.card:hover .photo{width: 120px;height: 120px;top: 30px;border-radius: 50%;box-shadow: 0 0 20px #111;
}
h1{position: absolute;top: 380px;transition: 0.5s;
}
.card:hover h1{position: absolute;top: 170px;
}
h2{margin-top: 220px;font-weight: normal;text-align: center;margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid var(--h2_border_color);
}
p{width: 90%;/* 段落缩进2个字符大小 */text-indent: 2em;font-size: 16px;margin-bottom: 10px;line-height: 30px;
}
a{color: var(--font_color);text-decoration: none;padding: 12px;border: 1px solid var(--a_border_color);border-radius: 8px;
}a:hover{color: #fff;background-color: var(--a_hover_background_color);
}

今日份知识总结

今天用到了很多前面的知识，有的不是新知识，但是我们复习一下

标签	作用
margin	设置四个方向的外边距
padding	设置四个方向的内边距(负值无效)
flex-shrink	flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。
flex-grow	flex-grow 属性用于设置或检索弹性盒子的扩展比率。。注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。
flex-start	靠左
object-fit	object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
text-indent	text-indent 属性规定文本块中首行文本的缩进。
em	字符单位
text-decoration	text-decoration 属性规定添加到文本的修饰。
border	border 简写属性在一个声明设置所有的边框属性。

简单说一下设计思路：
html部分：
这个部分就很简单了，就是收集资料，然后用标签写出来就好了，没啥好说的吧

css部分：
这里东西比较多，说几个重点：

缩放用到的主要是一个w，h100%的变化，我们给一个transition 0.5s，让变化看起来很平滑(注意还有一个名字的top值改变，名字从底部到上面)
在没有变化的时候，为了让名字看起来清晰一些，我们用到了一个图片的渐变色(设置为absolute)这样，可以让白色的名字显得更明显(缩小后取消)
box-shadow是用来锦上添花的，然后注意小块有个border的小横线，用border-bottom来调整
object-fit控制裁剪

基本就是这些啦，第十九天啦，加油啊！
有什么问题，我们评论区见呀！T.T！！！

[100天挑战100个前端效果]第十九天---人物介绍卡片效果(猜猜是哪三个大佬？)相关推荐

HTML+CSS制作人物介绍卡片效果
HTML+CSS制作人物介绍卡片效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-Hans">&l ...
[100天挑战100个前端效果]第十六天---炫彩数字时钟
炫彩数字时钟让我们先来看看实现的效果 html代码 css代码今日份知识总结让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang=&qu ...
[100天挑战100个前端效果]第十二天---3D图片(图片素材甚是优秀！)
3D图片让我们先来看看实现的效果 html代码 css代码素材图片今日份知识总结让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang= ...
【前端学习】前端学习第十九天：浏览器对象模型（BOM）中的对象
在介绍BOM中的对象之前,首先来了解一下URL的概念,URL全称为统一资源定位符,是互联网是标准资源地址,互联网上每一个文件都有一个唯一的URL: window对象给我们提供了一个location属性 ...
挑战用100美元赚100万美元
推荐一部纪录片,中文译名各种各样,英文原名是<Undercover billionaire>,出自 Discovery networks,挑战用100美元赚100万美元(估值百万美元的企业 ...
html5页面可见xing,【前端资源网页插件】全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了类似全屏滚动效果尤其在微信里面我自己开发了一个快速构建此类项目的控件与市面上大部分控件不同的是此控件还支持元素的动画效果并提供多种元素效果基于zepto. ...
【jQuery】前端项目实践案例6——制作产品放大镜效果（仿京东淘宝图片效果）
使用jQuery制作产品放大镜效果实现效果: 使用jQuery制作产品放大镜效果实现原理: 通过设置图像的 CSS 属性( left 和 top ),来实现图像的移动. 使用jQuery制作产品放大镜 ...
用100元买100支笔c语言,用C编程!有100块钱,买100支笔,其中钢笔3元,圆珠笔2元,铅笔0.5元,问各买多少支?...
题目: 用C编程!有100块钱,买100支笔,其中钢笔3元,圆珠笔2元,铅笔0.5元,问各买多少支? 解答: 完整程序如下: main(){ int i3,i2,i05; for (i3=0;i3 猜 ...
min-width:100%和max-width:100%的区别
1.width:100%和width:auto width:100%,设定对象的宽度占父元素的100%不论设定元素的margin值是多少,不包含margin: width:auto,根据设定对象的实际 ...

[100天挑战100个前端效果]第十九天---人物介绍卡片效果(猜猜是哪三个大佬？)

人物介绍卡片效果

让我们先来看看实现的效果

html代码

css代码

今日份知识总结

[100天挑战100个前端效果]第十九天---人物介绍卡片效果(猜猜是哪三个大佬？)相关推荐

最新文章

热门文章