简单的svg蜂巢图加web字体

svg, font, hexagon

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2153
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.divs {
    width: 1200px;
    height: 500px;
    margin: 80px auto;
}
.divs img {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    opacity: 0.6;
    background: rgba(255, 255, 0, 0.3);
}
.divs div.s1s {
    width: 300px;
    height: 200px;
    float: left;
}
.divs div.s1s a {
    margin-left: 60px;
}
.divs div.s1s ul {
    width: 200px;
    margin: 25px 40px;
}
.divs div.s1s ul li {
    color: white;
    font-size: 16px;
    text-align: center;
}
.divs div.s2s {
    width: 300px;
    margin-left: 25em;
    float: left;
}
#svg {
    width: 150px;
    height: 102px;
    position: relative;
}
ul li {
    list-style-type: none;
}
ul {
    margin: 0 auto;
    padding: 0;
    position: relative;
    float: left;
    overflow: hidden;
}
ul li {
    margin-top: 10px;
}
ul li:hover a span.fa {
    color: red;
}
.s1s .as1:hover span {
    color: red;
}
.s2s ul li:hover {
    animation: play 5s linear infinite;
}
@keyframes play {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
ul:nth-child(2) {
    position: absolute;
    margin-top: 60px;
    margin-left: 6em;
}
ul:nth-child(3) {
    position: absolute;
    margin-top: 60px;
    margin-left: -6em;
}
ul:nth-child(4) {
    position: absolute;
    margin-top: 14.7em;
}
.as span.fa {
    position: absolute;
    display: inline-block;
    margin-top: -4.5em;
    margin-left: -14px;
    color: white;
    font-size: 30px;
    padding: 2em 0;
    width: 6em;
    height: 1.5em;
    text-align: center;
}
.as1 span.fa {
    position: absolute;
    display: inline-block;
    margin-top: -0.7em;
    margin-left: -5.5em;
    color: white;
    font-size: 30px;
    padding: 2em 0;
    width: 6em;
    height: 1.5em;
    text-align: center;
}

body{background: #222}

HTML

<ul>
            <marquee direction="up" scrollamount="3">
                <li>通过云端的道路，</li>
                <li>只亲吻攀登者的足迹。</li>
                <li>彩云飘在空中，</li>
                <li>自然得意洋洋，</li>
                <li>但最多只能换取几声赞美；</li>
                <li>唯有化作甜雨并扎根于沃壤之中，</li>
                <li>才能给世界创造芳菲。</li>
                <li> 要装进一杯新泉，</li>
                <li>你就必须倒掉已有的陈水；</li>
                <li>要获取一枝玫瑰，</li>
                <li>你就必须放弃到手的蔷薇；</li>
                <li>要多一份独特的体验，</li>
                <li>你就必须多一份心灵的创伤。</li>
            </marquee>
        </ul>

</div>
    <div class="s2s">
        <ul>
            <li>
                <a href="#" class="as">
                    <svg version="1.1" viewBox="0 0 600 516.8" id="svg">
                        <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 " fill="white" fill-opacity="0.3" stroke="black" stroke-width="2" />
                    </svg>
                    <span class="fa fa-fighter-jet"></span>
                </a>
            </li>
            <li>
                <a href="#" class="as">
                    <svg version="1.1" viewBox="0 0 600 516.8" id="svg">
                        <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 " fill="white" fill-opacity="0.3" stroke="black" stroke-width="2" />
                    </svg>
                    <span class="fa fa-bank"></span>
                </a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="#" class="as">
                    <svg version="1.1" viewBox="0 0 600 516.8" id="svg">
                        <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 " fill="white" fill-opacity="0.3" stroke="black" stroke-width="2" />
                    </svg>
                    <span class="fa fa-anchor"></span>
                </a>
            </li>
            <li>
                <a href="#" class="as">
                    <svg version="1.1" viewBox="0 0 600 516.8" id="svg">
                        <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 " fill="white" fill-opacity="0.3" stroke="black" stroke-width="2" />
                    </svg>
                    <span class="fa fa-gavel"></span>
                </a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="#" class="as">
                    <svg version="1.1" viewBox="0 0 600 516.8" id="svg">
                        <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 " fill="white" fill-opacity="0.3" stroke="black" stroke-width="2" />
                    </svg>
                    <span class="fa fa-bell"></span>
                </a>
            </li>
            <li>
                <a href="#" class="as">
                    <svg version="1.1" viewBox="0 0 600 516.8" id="svg">
                        <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 " fill="white" fill-opacity="0.3" stroke="black" stroke-width="2" />
                    </svg>
                    <span class="fa fa-bug"></span>
                </a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="#" class="as">
                    <svg version="1.1" viewBox="0 0 600 516.8" id="svg">
                        <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 " fill="white" fill-opacity="0.3" stroke="black" stroke-width="2" />
                    </svg>
                    <span class="fa fa-asterisk"></span>
                </a>
            </li>
        </ul>
    </div>
</div>