HTML+CSS实现明星卡片制作
今天在B站偶然刷到一个视频，点击跳转，视频是制作一张折叠卡片，觉得效果很不错，并且对CSS3和HTML5都能进一步学习和复习，所以仿作一个易烊千玺卡片，喜欢的小伙伴一起动手做起来叭。
效果实现
卡片的首页是一张图片
易烊千玺(封面页)
在鼠标经过后有一个卡片翻开的效果，并且有视频播放，卡片的底页会写文本，鼠标离开后自动卡片自动合上
易烊千玺(封底页)
核心思想：
三个盒子重叠在一起，鼠标未经过的时，第一个盒子（卡片首页）显示，鼠标经过时，第一个盒子和第二个盒子的容器（二者在一个容器里）沿着Y轴转动180°就可以实现背面（第二个第三个盒子）卡片显示。
源代码
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折叠卡片</title>
<link rel="stylesheet" href="./card.css">
</head>
<body>
<div class="card">
<!-- 封面页 -->
<div class="card-outside">
<div class="card-outside-container">
<!-- 正面 -->
<div class="card-front">
<div class="card-front-top">
<img src="http://pic1.win4000.com/wallpaper/2018-10-17/5bc690bbf1a4c.jpg" alt="">
<!-- 图片我为了大家能够能直接复制代码使用用了网上的链接 -->
</div>
<div class="card-front-footer">
View Me
</div>
</div>
<!-- 正面结束 -->
<!-- 反面 -->
<div class="card-back">
<video class="video-container" autoplay muted loop>
<source src="https://ugcsjy.qq.com/uwMROfz2r57EIaQXGdGnC2ddDmY0gCKxs_YQn4ev8GMVk_hh/shg_17463489_50001_2bc92c4ea3673275b3b99c5e4b9fb949.f622.mp4?sdtfrom=v1010&guid=81692f1683159df52f51fdbf768b6b0d&vkey=7FF1E36F39042804691528609695C6488A4DA61DB6C7C1C9BA6DCBA5E4CD711144DB683CD6BA1104CCF10B015FD5D06B68F64262669415CD2EAF7239ECB0C84F425FDB3AFC4E28BCCE9A67BA0C25CB86699BF264860069226577F88FF6C4C27CC4F767A261AFFAFF94886719B8101897C0D4558D3E2E6045410FFC1E4120B89F">
</video>
<!-- 视频我为了大家能够能直接复制代码使用也用了网上的链接，可自行更改 -->
</div>
</div>
</div>
<!-- 封面页结束 -->
<!-- 封底页 -->
<div class="card-inside">
<div class="card-inside-container">
<h3>For urban lovers</h3>
<p>Hans your smile,had been flurried my time passag </p>
<p>love one i think the smile boy</p>
<a href="#" class="btn">view deals</a>
</div>
</div>
<!-- 封底页结束 -->
</div>
</body>
</html>
CSS部分代码
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
html,
body {
height: 100%;
width: 100%;
}
body {
background: linear-gradient(to right, #ebdabb, #e3d96c)
}
.card {
width: 300px;
height: 340px;
background-color: #e3d9c6;
position: absolute;
/* 块级盒子垂直居中 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease;
}
.card-outside,
.card-inside {
/* 父级元素有定位 */
position: absolute;
right: 0;
width: 300px;
height: 340px;
}
.card-outside {
z-index: 100;
/* 透视表示从那个位置看元素，加了透视动画效果才能更清晰
并且透视必须加给父盒子 */
perspective: 1000px;
}
.card-front,
.card-back {
width: 100%;
height: 100%;
position: absolute;
right: 0;
background-color: #e3d9c6;
}
.card-outside-container {
width: 100%;
height: 100%;
/* transform-style控制子元素是否开启三维立体环境 */
transform-style: preserve-3d;
/* 旋转的中心点 */
transform-origin: left;
transition: all 1s ease;
}
.card:hover .card-outside-container {
transform: rotateY(-180deg);
/* 鼠标经过的时候盒子容器旋转180° */
}
.card:hover {
width: 600px;
}
.card-front-top {
width: 100%;
height: 260px;
background-color: pink;
/* 裁剪路径变成多边形 */
clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
}
.card-front-footer {
font-size: 26px;
color: #ff40a1;
font-weight: 600;
text-align: center;
}
.card-front-top img {
width: 100%;
height: 100%;
}
.card-back {
/* 卡片的背面要旋转180°让卡片展开的时候背面的视频可以出现 */
transform: rotateY(180deg);
}
.video-container {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}
.card-inside {
/* 让封底页实现在封面页的下面 */
z-index: 99;
}
.card-inside-container {
width: 300px;
height: 100%;
display: flex;
/* 将主轴设为纵向 */
flex-direction: column;
/* 元素先把行填满剩下的元素居中 */
justify-content: space-between;
align-items: center;
text-align: center;
font-size: 24px;
color: #ff40a1;
font-weight: 700;
padding: 20px;
box-sizing: border-box;
}
.card-inside-container p {
color: #333;
font-size: 20px;
}
.card-inside-container .btn {
width: 90%;
height: 50px;
line-height: 50px;
border: 3px solid #ff40a1;
color: #ff40a1;
border-radius: 5px;
}
学习总结
-
transition-timing-function属性
-
指定切换效果的速度，通常用简写的方式也就是直接作为transition的第三个参数
值 描述 linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)） ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)） cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
-
-
transform-style: preserve-3d;
默认是不开启3D效果的
transform-style控制子元素是否开启三维立体环境，代码要写给父级，影响的是子盒子。 -
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度
-
object-fit 一般用于
img和video标签，一般可以对这些原素进行保留原始比例的剪切、缩放或者直接进行拉伸等 -
cover有点类似于视频或者图片（保持原比例下）充满整个盒子
-
属性值 描述 fill 默认，不保证保持原有的比例，内容拉伸满整个内容容器 contain 保持原有尺寸比例。内容被缩放 cover 保持原有尺寸比例。但部分内容可能被剪切，类似于放大 none 保留原有元素内容的长度和宽度，也就是说内容不会被重置
-
-
clip-path属性;意味裁剪路径的意思，让我们可以很便捷的生成各种几何图形;是CSS的新属性
- clip-path 通过定义特殊的路径，实现我们想要的图形。而这个路径，正是 SVG 中的 path
属性值 描述 circle 裁剪成圆形 ellipse 裁剪成椭圆形 polygon 裁剪成多边形 -
简单理解为：属性值带的参数其实就是每一个的点每个点用逗号分开，数值（50%，0）可以理解为坐标（x，y）。
-
例如
clip-path: polygon(50% 0,0 100%, 100% 100%);就是(50%,0) 和 (0,100%) , (100%,100%)把这三个点连接起来就是绘制后的图形也就是下图的三角形ABC
三角形ABC
-
box-border属性：定义了计算一个元素的总宽度和总高度的方法
在css盒模型的默认定义里，你对一个元素所设置的width 与 height只会应用到这个元素的内容区。如果这个元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。所以一旦添加border和padding就需要不断的去减小width，确保盒子总大小不变。
-
content-box是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 -
border-box告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px（宽度帮你定死），那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。这样就不需要我们再进行计算。大多数情况下，这使得我们更容易地设定一个元素的宽高。width= border + padding + 内容的宽度height= border + padding + 内容的高度
-
网友评论