UI前端-使用SVG拼水平六边形填充图文效果

最新推荐文章于 2024-05-23 14:09:02 发布

天泽圣音

最新推荐文章于 2024-05-23 14:09:02 发布

阅读量1.5k

点赞数 2

文章标签：前端 ui css3

本文链接：https://blog.csdn.net/shihui2727/article/details/81700969

版权

本文介绍了如何利用SVG和CSS3创建一个水平排列的六边形网格，并将每个六边形填充不同的图像，实现美观的图文效果。通过定义SVG的pattern，可以将图片应用到六边形的填充中，同时设置鼠标悬停时的样式，增加交互体验。

摘要由CSDN通过智能技术生成

之前用SVG做的一个六边形区块链效果：

完整贴码：

css文件：

html,
body {
height: 100%;
width:100%;background:url(images/06.png) no-repeat center;
overflow:hidden;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;