其他
【每日一练】07—CSS实现响应式产品介绍的Hover效果
写在前面
今天我们练习的这个小项目，在很多产品网站或者个人博客上都会用到，它主要的场景，就是在做一个产品说明或者个人文字介绍说明，这是一个非常实用的小项目。
因为在很早之前，我们如果要实现这样的效果，基本都是要通过PS把它处理成6边形的图片，而且每次如果要修改产品的话，都需要再处理一次图片，还是非常麻烦的。
但是今天我们学会了这个CSS技巧，我们完全不需要麻烦设计了，而且现在各大浏览器都是兼容支持的，所以，不用担心，我们写出来的效果不适用，其实，除了最新的一些属性，或者淘汰的属性，浏览器不支持外，现在很多属性，各大浏览器都是支持的，请放心使用。
好了，说了这么多，我们一起来看一下，今天练习的小项目的最终效果：
以上图片就是页面加载完的默认效果，而下面的图片是鼠标移上去的hover效果。
具体实现代码在后面，大家可以自行取阅学习，练习的图片素材，我放在这里了，请自行下载获取。
图片素材下载地址：
百度网盘：https://pan.baidu.com/s/1-hKOAs6UfYvE67-70HK9UA?pwd=tg8u 提取码: tg8u
<!doctype html><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;}写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号