Web前端学习笔记（四）--- CSS卡贴悬停展开效果

效果图

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/style.css"><script src="js/all.js"></script>
</head>
<body><div class="container"><div class="card"><!--第一个卡片--><div class="face face1"> <!--显示页--><div class="content"> <!--显示页内容--><i class="fab fa-js fa-6x"></i><h3>Script</h3></div></div><div class="face face2"> <!--附页--><div class="content"><p>JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</p><a href="#">Read More</a></div></div></div><div class="card"> <!--第二个卡片--><div class="face face1"><div class="content"><i class="fab fa-html5 fa-6x"></i><h3>Html5</h3></div></div><div class="face face2"><div class="content"><p>HTML5是构建Web内容的一种语言描述方式。</p><a href="#">Read More</a></div></div></div><div class="card"><!--第三个卡片--><div class="face face1"><div class="content"><i class="fab fa-css3-alt fa-6x"></i><h3>CSS3</h3></div></div><div class="face face2"><div class="content"><p>CSS3是CSS（层叠样式表）技术的升级版本。</p><a href="#">Read More</a></div></div></div></div>
</body>
</html>

CSS

body{margin: 0; /*外边距*/padding: 0; /*内边距*/min-height: 100vh;  /*最小高度*/background: #333; /*背景颜色*/display: flex; /*盒模型*/justify-content: center; /*文档X轴布局*/align-items: center; /*文档Y轴布局*/
}
.container{width: 1000px; /*宽度*/position: relative; /*相对定位*/display: flex; /*盒模型*/justify-content: space-between; /*文档X轴内容与内容间空隙相等*/
}
.container .card{position: relative; /*相对定位*/
}
.container .card .face{ width: 300px; height: 200px; transition: 0.5s; /*过渡时间*/
}
.container .card .face.face1{ position: relative; background: #333; display: flex; justify-content: center; align-items: center; z-index: 1; transform: translateY(100px); /*2D转换，Y轴移动*/
}
.container .card:hover .face.face1{ /*此处为card标签悬停时，内容1复位*/background: #ff0057; transform: translateY(0);
}
.container .card .face.face1 .content{opacity: 0.5; /*透明度*/transition: 0.5s;
}
.container .card:hover .face.face1 .content{ /*此处为card标签悬停时，更改封面的透明度*/opacity: 1; /*透明度*/
}
.container .card .face.face1 .content h3{margin: 10px 0 0; padding: 0; color:#fff; text-align: center; /*字体居中*/font-size: 1.5em; /*字体大小*/
}
.container .card .face.face2{position: relative; background: #fff; display: flex; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; /*设置盒子模型内布局，此处为元素的内边距盒边框不会影响最终大小*/box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8); /*阴影*/transform: translateY(-100px); /*2D转换，Y轴移动*/
}
.container .card:hover .face.face2{ /*此处为card标签悬停时，内容2复位*/transform: translateY(0px);
}
.container .card .face.face2 p{margin: 0; padding: 0;
}
.container .card .face.face2 a{margin:  15px 0 0; display: inline-block; /*设置为行内块元素*/text-decoration: none; /*文字样式，此处为了删除下划线*/font-weight: 900; /*字体粗细*/color: #333; padding: 5px; border: 1px solid #333;
}
.container .card .face.face2 a:hover{ /*此处为a标签悬停时*/background: #333; color: #fff;
}

教程地址：原文地址（YouTube）
教程转载：哔哩哔哩（K.Dream）
K.Dream 原贴地址
代码整理：K.Dream

示例源码+图片资源
有需要的小伙伴可以去K.Dream（大佬）博客
当然也可以在海轰的微信公众号：海轰Pro
获取资料（代码来源：K.Dream分享）

Web前端学习笔记（四）--- CSS卡贴悬停展开效果相关推荐

web前端学习笔记（最新）
web前端学习笔记大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
Web前端学习笔记（1）
文章目录一.第一部分 1.1内容一 Web前端导入二.第二部分 2.1内容一 HTML和CSS的定义三.第三部分 3.1内容一宇宙第一编译器Vs Code 3.2内容二快捷键的使用四.第四 ...
web前端学习笔记（2）
文章目录前言二十一.嵌套列表 21.1 嵌套代码 21.2 小练习二十二.表格标签 22.1表格相关标签二十三.表格属性 23.1表格属性二十四.表单input标签 24.1表单标签 24. ...
Web前端学习笔记学习路线图
随着互联网的快速发展, web前端行业发展前景较好,虽然web前端薪资高入门门槛低, 但是俗话说的好:入门容易,精通难.web前端开发的知识点繁多,所以,要想真正全部掌握web前端工程师开发技能,并非 ...
web前端学习笔记总页面
学习资料自学视频求知讲堂web前端html+css 参考文档 MDN 书单你不知道JavaScript JavaScript设计模式和开发实践 css世界 css揭秘什么是web前端开发 we ...
web前端学习笔记——JQuery
web前端开发基础第五章--JQuery 传送门:第一章:HTML | 第二章:CSS | 第三章:html5和CSS3 | 第四章:Javascript(part 1) | 第四章--Javasc ...
极客学院web前端学习笔记（一）概况
终于到暑假啦!暑假开始重新(x)学习web前端,其实html和css早已有所接触,但是js接触较少,直接原因是下学期大概要给学弟学妹们解答一些前端基础相关的问题,所以希望在暑假好好整理归纳一下知识体系 ...
web前端学习笔记（初识HTML）
目录 1.简介 2.Html的历史: 3.常用的工具 4.网页的基本信息: 5.网页的标签: 6.安装我们的idea 7.配置idea 8.特殊符号: 9.链接标签: 10.锚链接: 11.功能性链接 ...
Web前端学习笔记07：CSS_高级技巧_定位
文章目录 CSS高级技巧 1. 元素的显示与隐藏 1.1 display 显示(重点) 1.2 visibility 可见性 (了解) 1.3 overflow 溢出(重点) 1.4 显示与隐藏总结 ...
第四次网页前端学习笔记（css）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 一.css的属性是否重复: 1.rep ...

Web前端学习笔记（四）--- CSS卡贴悬停展开效果

效果图

HTML

CSS

更多

Web前端学习笔记（四）--- CSS卡贴悬停展开效果相关推荐

最新文章

热门文章