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

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>
相关推荐
哆啦A梦15883 小时前
36 注册
前端·javascript·html
533_5 小时前
[css] border 渐变
前端·css
杨超越luckly5 小时前
HTML应用指南:利用GET请求获取全国沃尔沃门店位置信息
前端·arcgis·html·数据可视化·门店数据
昔人'5 小时前
css`text-underline-offset` 为文本下划线设置偏移量
前端·css
ybb_ymm7 小时前
前端开发之ps基本使用
前端·css
软件技术NINI9 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
苏打水com9 小时前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
~无忧花开~10 小时前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
嬉皮客11 小时前
TailwindCSS 初探
前端·css
小张成长计划..13 小时前
前端6:CSS3 2D转换,CSS3动画,CSS3 3D转换
前端·3d·css3