前端使用css3实现人物卡片介绍动画

前端使用css3实现人物卡片介绍动画，鼠标移入后图片缩小现实出人物简介文字，鼠标移出再恢复。

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>人物介绍卡片</title>
<style>*{margin: 0;padding: 0;}body{/* 弹性布局 让页面元素水平+垂直居中*/display: flex;justify-content: center;align-items: center;/*让页面始终占浏览器总高*/height: 100vh;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(245, 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;}
</style>
</head>
<body><div class="card"><div class="photo"><img src='./img/6.jpeg' alt=""/></div><h1>六道仙人 班</h1><h2>火影忍者</h2><p>火影忍者第三次忍界大战，火之国联合其他四国一起对抗以班为首的晓组织成员的战斗</p><a href="#">了解更多</a></div><div class="card"><div class="photo"><img src='./img/4.jpeg' alt=""/></div><h1>宇智波 佐助</h1><h2>火影忍者</h2><p>火影忍者第三次忍界大战，火之国联合其他四国一起对抗以班为首的晓组织成员的战斗</p><a href="#">了解更多</a></div><div class="card"><div class="photo"><img src='./img/5.jpeg' alt=""/></div><h1>宇智波 班</h1><h2>火影忍者</h2><p>火影忍者第三次忍界大战，火之国联合其他四国一起对抗以班为首的晓组织成员的战斗</p><a href="#">了解更多</a></div>
</body>
</html>

前端使用css3实现人物卡片介绍动画相关推荐

纯CSS3实现人物太空步动画
下载地址https://yy123.ink/frontDetail/8173Michael Jackson的经典太空步动画效果,使用纯CSS3代码实现的人物舞步动画. dd:
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
css3中的animation的动画帧制作-卡通人物的走动效果
css3中的animation的动画帧制作-卡通人物的走动效果代码如下: <!DOCTYPE html> <html lang="en"> <hea ...
重新想，重新看——CSS3变形，过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
【CSS3初探之变形与动画】令人惊叹的CSS3
前言这个标题比较狗血了,我一直知道CSS3可以做很多事情,但是我昨天看到一个人用CSS3华丽的画了一个太极八卦! 若是这个还可以接受,那么我今天就看见一个人用CSS3画了一个叮当猫!!!我突然就在想 ...
超酷的 CSS3 loading 预加载动画特效
给大家介绍一款超酷CSS3 loading预加载动画特效. 该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成. HTML结构 4种loading预加载动画 ...
css3.0动画,CSS3.0实现霓虹灯按钮动画特效的示例代码
今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0实现霓虹灯按钮动画特效 * { font-family: '微软雅黑', ...
Android 卡片翻转动画效果
转载请标明出处:http://blog.csdn.net/android_mnbvcxz/article/details/78570594 Android 卡片翻转动画效果前言前端时间开发一款应用 ...

前端使用css3实现人物卡片介绍动画

前端使用css3实现人物卡片介绍动画，鼠标移入后图片缩小现实出人物简介文字，鼠标移出再恢复。

前端使用css3实现人物卡片介绍动画相关推荐

最新文章

热门文章