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

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>
相关推荐
Predestination王瀞潞16 小时前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css
冰暮流星16 小时前
css之box-sizing属性
前端·javascript·css
江拥羡橙16 小时前
css实现拼图样式,响应不同屏幕宽度
vue·less·css3·html5·1024程序员节·calc
倚肆16 小时前
CSS ::before 和 ::after 伪元素详解
前端·css
小九今天不码代码19 小时前
巧用 CSS linear-gradient 实现多种下划线文字特效(纯 CSS 无需额外标签)
css·css3·前端开发·linear-gradient·前端特效·下划线样式·文字特效
守正出琦1 天前
带代码示例的 HTML 标签实操手册
前端·html
yume_sibai1 天前
HTML HTML5基础(1)
前端·html·html5
XianZhe_1 天前
Pug 哈巴狗 便捷的HTML预处理器 上
前端·html·pug·html预处理器
yume_sibai1 天前
HTML HTML5基础(2)
前端·html·html5
守正出琦1 天前
HTML 常用标签速查表
前端·javascript·html