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

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>
相关推荐
Alice-YUE1 天前
【css学习笔记8】html5css3新特性
css·笔记·学习
沐墨专攻技术1 天前
二、网页的“化妆师”:从零学习 CSS
css·笔记·学习
BillKu1 天前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
少年阿闯~~1 天前
transition(过渡)和animation(动画)——CSS
前端·css·动画·过渡
Async Cipher1 天前
CSS 继承 (Inheritance)
前端·css
闲人编程1 天前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
昔人'1 天前
css 高度从 0 到 auto 的动画效果 `interpolate-size: allow-keywords`
前端·css
冲!!1 天前
SCSS 中的Mixins 和 Includes,%是什么意思
前端·css·scss
梦6501 天前
CSS新特性
css
李昊哲小课1 天前
HTML 完整教程与实践
前端·html