CSS卡贴悬停展开效果

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

代码区

以下代码为本人填写，转载请注明教程地址和本贴地址

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;
}

JS

 //i标签可替换图片，内容请自行下载

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

CSS卡贴悬停展开效果相关推荐

html 鼠标经过展开,CSS3效果：鼠标悬停背景展开效果
看腻导航栏背景变色的hover效果,我们看一下比较特殊的hover效果. 分析我们观察到,当鼠标悬停在导航栏的项目中,出现从中间向左右展开的背景效果:移开时,又从左右向中间收缩.可以做出如下分析: ...
html5页面中鼠标悬停效果,CSS实例：非常不错的鼠标悬停TIP效果！_div+css布局教程...
在实际开发中,我们会给图片加上alt.给链接加上title,为了出故障预备,也可以提醒用户的内容是什么,或仅仅是tip提示.今天我们介绍一款不错的鼠标悬停TIP效果,图片如下: 这样的效果在实际开发中 ...
html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
css悬停动画,CSS卡片悬停动画效果实现
技术概述尝试给卡片添加鼠标悬停动画效果,主要使用CSS3的 transition(属性渐变),scale,z-index实现. 技术详述添加卡片阴影注册鼠标悬停事件,当事件触发,修改边框 box ...
视频直播APP源码，通过css控制div内容展开更多/收起效果
视频直播APP源码,通过css控制div内容展开更多/收起效果一. 实现思路需要设置一个变量控制展开 / 收起效果提前写好最高高度的class样式,超出这个高度多余内容会隐藏只有在列表数据长度 ...
html图片折叠,CSS 实现图片鼠标悬停折叠效果
CSS 实现图片鼠标悬停折叠效果 1. 实现要点折叠是由多个块级元素来完成的; 图片是以背景图片的方式呈现出来的; 给每个块级元素设置同一张背景图片,通过background-position来控 ...
CSS实现鼠标悬停图片时的边框变色效果
CSS实现鼠标悬停图片时的边框变色效果,CSSS双边框,鼠标悬停变色效果,用CSS实现的图片双边框效果,鼠标悬停经过时显示背景色,很简单的效果,网上常见,代码不复杂,用的是一些基本的CSS知识. &l ...
135.HTML+CSS 回忆碎片悬停效果
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:https://github.co ...
html 点击加号展开代码,纯css实现加号一个的效果（代码示例）
本篇文章给大家带来的内容是关于纯css实现加号一个的效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现下图的加号效果: 若想实现这个效果, 只需一个p元素即可搞定. ...
仅使用HTML和CSS实现的标签云效果
标签云的效果在博客和网站上不难见到,它其实就是带有超链接的某些关键字,为了达到强调主题的作用.通常出现概率比较大或者受欢迎的标签文字显示比较大,相反的就显示的小. 来源于TagCrowd.com 我们 ...

CSS卡贴悬停展开效果

CSS卡贴悬停展开效果

效果图

代码区

html

CSS

JS

CSS卡贴悬停展开效果相关推荐

最新文章

热门文章