鼠标移入盒子多角度有规律四散 (孔雀开屏)

css 复制代码
    <style>
        body{
            background-color: #F6F6F6;
        }
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        #box{
            width: 200px;
            height: 300px; 
            margin: 200px auto;
            
        }

        #box ul{
             position: relative;
        }

        #box ul li{
            width: 200px;
            height: 300px;
            background-color: cyan;
            position: absolute;
            left: 0;
            top: 0;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
            transition: all linear 1s;
            /* 修改动画过渡中心点 */
            transform-origin: bottom center; 
            background: url(./true.jpg) no-repeat;
            background-size: 100% 100%;
        }

        #box:hover ul li:nth-child(1){
            transform: rotate(-80deg) translate(0,-400px);
        }

        #box:hover ul li:nth-child(2){
            transform: rotate(-30deg) translate(0,-400px);
        }

        #box:hover ul li:nth-child(3){
            transform: rotate(20deg) translate(0,-400px);
        }

        #box:hover ul li:nth-child(4){
            transform: rotate(70deg) translate(0,-400px);
        }

        #box:hover ul li:nth-child(5){
            transform: rotate(120deg) translate(0,-400px);
        }

        #box:hover ul li:nth-child(6){
            transform: rotate(70deg) translate(0,-400px);
        }

    </style>
html 复制代码
<body>
    <div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
Eiceblue10 小时前
使用 C# 发送电子邮件(支持普通文本、HTML 和附件)
开发语言·c#·html·visual studio
涔溪11 小时前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
超级土豆粉11 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
忧郁的蛋~12 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
然我12 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
呆呆的心13 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟13 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
AA-代码批发V哥14 小时前
CSS之布局详解指南
css