zoukankan      html  css  js  c++  java
  • css蜂窝样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>蜂窝</title>
        <style> 
        .boxFw{
            800px;
            margin: 0 auto;
            padding: 0;
        }
        .boxFw>li{
             130px;
            height: 74px;
            background-color: #2722226b;
            float: left;
            list-style-type: none;
            margin: 40px 10px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        img{
             40%;
            height: 70%;
            margin: 0 auto;
            display: flex;
            border-radius: 60%;
            z-index: 1;
            border: 2px solid #ccc;
        }
        .boxFw>li::before{
            content: '';
             130px;
            height: 74px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #3e35358f;
            transform:  rotate(60deg);
        }
        .boxFw>li::after{
            content: '';
             130px;
            height: 74px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #3e35358f;
            transform:  rotate(120deg);
            -webkit-transform:  rotate(120deg);
        }
        .active{
            transform: rotate(360deg) scale(1.2);
            transition: 1s;
            -webkit-transition: 1s;
            -o-transition: 1s;
        }
        .activewremove{
            transform: rotate(0deg) scale(1);
            transition: 1s;
            -webkit-transition: 1s;
            -o-transition: 1s;
        }
        </style>
    </head>
    <body>
        <ul class='boxFw'>
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
            <li style="margin-left: 85px;"><img src="./img/6.jpg" alt=""></li>
            <li><img src="./img/7.jpg" alt=""></li>
            <li><img src="./img/8.jpg" alt=""></li>
            <li><img src="./img/9.jpg" alt=""></li>
            <li><img src="./img/10.jpg" alt=""></li>
            <li><img src="./img/11.jpg" alt=""></li>
            <li><img src="./img/12.jpg" alt=""></li>
            <li><img src="./img/13.jpg" alt=""></li>
            <li><img src="./img/14.jpg" alt=""></li>
        </ul>
    </body>
    <script>
        var eleme = document.getElementsByTagName("img")
        for(var i=0;i<eleme.length;i++){
            eleme[i].onmouseover = function () {
                this.classList.add("active")
                this.classList.remove("activewremove")
            };
            eleme[i].onmouseout = function () {
                this.classList.add("activewremove")
                this.classList.remove("active")
            };
        }
    </script>
    </html>
  • 相关阅读:
    SQLServer 2008数据库查看死锁、堵塞的SQL语句
    Jmeter(三)简单的HTTP请求(非录制)
    watir中不能打开页面中的URL超链接解决办法
    我要搬博客到这里来,请协助
    Jmeter(一)精简测试脚本
    性能测试机中存在大量的TIME_WAIT状态的连接,影响并发压力的发起
    ruby+watir随机而不重复获取Menu菜单的元素
    Eclipse中安装Ruby的插件org.rubypeople.rdt
    TCP连接各状态数量、以及TCP各状态变迁流程
    ruby+watirwatir3.0上实现快照/截图
  • 原文地址:https://www.cnblogs.com/lihong-123/p/12761506.html
Copyright © 2011-2022 走看看