C语言六边形蜂巢数组,关于使用svg构建六边形蜂巢列表的方式

最新推荐文章于 2022-09-19 20:30:54 发布

化学小辣鸡toto

最新推荐文章于 2022-09-19 20:30:54 发布

阅读量136

点赞数

SVG CSS样式响应式布局媒体查询动画效果

关键词由CSDN通过智能技术生成

ul,p{margin:0;padding:0;

}ul{list-style:none;border:1px solid #333333;overflow:hidden;

}li.hex{float:left;font-size:20px;

}svg{width:100%;color:#3bc292;

}svg path{fill:transparent; /*内部透明填充色*/stroke:#3bc292; /*边框色*/stroke-width:6; /*边框宽度*/stroke-linecap:round; /*描边端点表现形式*/stroke-linejoin:round; /*描边转角的表现方式*/stroke-miterlimit:4;stroke-dasharray:20; /*创建虚线，20px实线，20px虚线重复*/animation:dash 5s linear infinite; /*动画名每次速度匀速无限次*/transition:0.3s;-moz-transition:0.3s; /*Firefox 4*/-webkit-transition:0.3s; /*Safari 和 Chrome*/-o-transition:0.3s; /*Opera*/

}svg text{fill:#3bc292; /*文本填充色*/transition:0.3s;-moz-transition:0.3s; /*Firefox 4*/-webkit-transition:0.3s; /*Safari 和 Chrome*/-o-transition:0.3s; /*Opera*/

}svg text.time{font-size:0.8em;

}svg p.title{text-align:center;font-size:1.5em;transition:0.3s;-moz-transition:0.3s; /*Firefox 4*/-webkit-transition:0.3s; /*Safari 和 Chrome*/-o-transition:0.3s; /*Opera*/

}svg text.num{font-size:0.8em;

}svg:hover path{stroke:#3bc292;fill:#69c2a3;

}svg:hover text, svg:hover p.title{fill:#ffffff;color:#ffffff;

}svg.red path{stroke:#f56f6f;animation-play-state:paused;

}svg.red:hover path{fill:#f56f6f;

}svg.yellow path{stroke:#f5b140;animation-play-state:paused;

}svg.yellow:hover path{fill:#f5b140;

}@keyframes dash{to {

stroke-dashoffset:120; /*虚线在原路径下的偏移量*/

}}/*** SPACING AND SIZING *****************************************************************/@media (min-width: 1401px){.hex {

width:12.5%;margin:0 0.5%;

}.hex:nth-child(13n+1){margin-left:2.5%;

}.hex:nth-child(13n+8),.hex:nth-child(13n+9),.hex:nth-child(13n+10),.hex:nth-child(13n+11),.hex:nth-child(13n+12),.hex:nth-child(13n+13){margin-top:-3%;margin-bottom:-3%;

}.hex:nth-child(13n+8){margin-left:9.25%;

}}

@media (max-width: 1400px) and (min-width: 1201px){.hex {

width:15%;margin:0 0.5%;

}.hex:nth-child(11n+1){margin-left:2.5%;

}.hex:nth-child(11n+7),.hex:nth-child(11n+8),.hex:nth-child(11n+9),.hex:nth-child(11n+10),.hex:nth-child(11n+11){margin-top:-3.6%;margin-bottom:-3.6%;

}.hex:nth-child(11n+7){margin-left:10.5%;

}}

@media (max-width: 1200px) and (min-width: 901px){.hex {

width:19%;margin:0 0.3%;

}.hex:nth-child(9n+1){margin-left:1%;

}.hex:nth-child(9n+6),.hex:nth-child(9n+7),.hex:nth-child(9n+8),.hex:nth-child(9n+9){margin-top:-4.6%;margin-bottom:-4.6%;

}.hex:nth-child(9n+6){margin-left:10.5%;

}}

@media (max-width: 900px) and (min-width: 601px){.hex {

width:24%;margin:0 0.3%;

}.hex:nth-child(7n+1){margin-left:0.8%;

}.hex:nth-child(7n+5),.hex:nth-child(7n+6),.hex:nth-child(7n+7){margin-top:-6%;margin-bottom:-6%;