CSS3简单的2D转换模块 transform(平移、缩放、旋转、倾斜)

css简单2D转换模块
在这里插入图片描述
2D转换模式的练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习转换</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .big{
            width: 300px;
            height: 40px;
            margin: 100px auto;
            text-align: center;
            line-height: 40px;
            background-color: pink;
            list-style: none;
        }
        .big>li{
            width: 300px;
            height: 40px;
        }
        .small>li{
            list-style: none;
            background-color: yellow;
            transform:rotateY(180deg);
            /*默认先翻转*/
            transition: all 1s;
            opacity: 0;
        }
        .big>li:hover .small>li{
            opacity: 1;
            transform:none;
        }

        .big>li:hover .small>li:nth-child(1){
            transition-delay: 0ms;
        }
        .big>li:hover .small>li:nth-child(2){
            transition-delay: 200ms;
        }
        .big>li:hover .small>li:nth-child(3){
            transition-delay: 300ms;
        }
        .big>li:hover .small>li:nth-child(4){
            transition-delay: 400ms;
        }
        .big>li:hover .small>li:nth-child(5){
            transition-delay: 500ms;
        }
        .big>li:hover .small>li:nth-child(6){
            transition-delay: 600ms;
        }
        .big>li .small>li:nth-child(6){
            transition-delay: 0ms;
        }
        .big>li .small>li:nth-child(5){
            transition-delay: 200ms;
        }
        .big>li .small>li:nth-child(4){
            transition-delay: 300ms;
        }
        .big>li .small>li:nth-child(3){
            transition-delay: 400ms;
        }
        .big>li .small>li:nth-child(2){
            transition-delay: 500ms;
        }
        .big>li .small>li:nth-child(1){
            transition-delay: 600ms;
        }
    </style>
</head>
<body>
<ul class="big">
    <li>我是菜单
        <ul class="small">
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
            <li>菜单4</li>
            <li>菜单5</li>
            <li>菜单6</li>
        </ul>
    </li>
</ul>
</body>
</html>

效果
在这里插入图片描述
主要利用表格ul和li制作二级菜单,当鼠标悬停在一级菜单的时候,二级菜单翻转且延时依次展示,当鼠标离开一级菜单li的时候,二级菜单统一依次延时收回。(1)当鼠标未悬停的时候,给一级菜单li设置透明度属性opacity:0,且默认transform:rotateY(180deg);
transition:all 1s;
(2)当鼠标悬停时,设置透明度opacity:1;
transform:none;
(3)依次给二级菜单设置悬停、未悬停的延时
.big>li .small>li:nth-child(5){
transition-delay:300ms;
}
.big>li:hover .small>li:nth-child(3){
transition-delay:200ms;
}

展开阅读全文

没有更多推荐了,返回首页