【每日一练】07—CSS实现响应式产品介绍的Hover效果
web前端开发
共 3918字，需浏览 8分钟
·
2022-06-17 15:54
写在前面
今天我们练习的这个小项目，在很多产品网站或者个人博客上都会用到，它主要的场景，就是在做一个产品说明或者个人文字介绍说明，这是一个非常实用的小项目。
因为在很早之前，我们如果要实现这样的效果，基本都是要通过PS把它处理成6边形的图片，而且每次如果要修改产品的话，都需要再处理一次图片，还是非常麻烦的。
但是今天我们学会了这个CSS技巧，我们完全不需要麻烦设计了，而且现在各大浏览器都是兼容支持的，所以，不用担心，我们写出来的效果不适用，其实，除了最新的一些属性，或者淘汰的属性，浏览器不支持外，现在很多属性，各大浏览器都是支持的，请放心使用。
好了，说了这么多，我们一起来看一下，今天练习的小项目的最终效果：
以上图片就是页面加载完的默认效果，而下面的图片是鼠标移上去的hover效果。
具体实现代码在后面，大家可以自行取阅学习，练习的图片素材，我放在这里了，请自行下载获取。
图片素材下载地址：
百度网盘：https://pan.baidu.com/s/1-hKOAs6UfYvE67-70HK9UA?pwd=tg8u 提取码: tg8u
<html><head><meta charset="utf-8"><title>【每日一练】07—CSS实现响应式产品介绍的Hover效果</title></head><body><div class="container"><!-- 01 hexagon begin--><div class="hexagon"><div class="shape"><img src="img1.png"><div class="content"><div><h2>主动的人</h2><p>主动的人，往往也是更加努力的人，他们的创造力也会更强，因为他们懂得自己的命运在自己手中，不想供手让别人操控自己的命运</p></div></div></div></div><!--01 hexagon end--><div class="hexagon"><div class="shape"><img src="img2.png"><div class="content"><div><h2>主动的人</h2><p>往往运气也会越来越好，因为他们清楚的知道自己想要什么，他们关注自己的目标而努力，因此会朝着目标前进，自然就会运气好，运气越好越努力，越努力运气越好</p></div></div></div></div><!--02 hexagon end--><div class="hexagon"><div class="shape"><img src="img3.png"><div class="content"><div><h2>主动的人</h2><p>他们会拥有更多的机会，因为他们知道机会从来都不会从天而降，只有抓住机会才会拥有成功的可能，这个世界有很多机会，就是看机会来临时，你能把握住</p></div></div></div></div><!--03hexagon end--><div class="hexagon"><div class="shape"><img src="img4.png"><div class="content"><div><h2>主动的人</h2><p>他们也会更容易成功，因为他们做事情不拖延，没有懒癌症，心态也会更加积极主动，对自己做的事情负责，能够做到今日事今日毕，甚至是提前完成工作与自己的任务</p></div></div></div></div><!--04 hexagon end--></div></body></html>
*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;}.container{position: relative;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}.hexagon{position: relative;width: 350px;height: 400px;margin: 50px 20px 70px;}.hexagon:before{content: '';position: absolute;bottom: -70px;width: 100%;height: 60px;background: radial-gradient(rgba(0,0,0,0.15),transparent,transparent);border-radius: 50%;transition: 0.5s;}.hexagon:hover:before{opacity: 0.8;transform: scale(0.8);}.hexagon .shape{position: absolute;top: 0;left: 0;width: 100%;height: 100%;clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);transition: 0.5s;}.hexagon:hover .shape{transform: translateY(-30px);}.hexagon .shape img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}.hexagon .shape .content{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: linear-gradient(45deg, #727373, rgba(99, 104, 107, 0.5));opacity: 0;transition: 0.5s;padding: 20px;text-align: center;color: #fff;}.hexagon:hover .shape .content{opacity: 1;}
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号
评论