码迷,mamicode.com
首页 > 其他好文 > 详细

过渡转换

时间:2020-03-31 14:20:42      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:nat   class   his   tran   lin   stand   指示   nbsp   16px   

当鼠标指示外框时显示隐藏内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;}
            ul,ol,li{list-style: none;}
            a{text-decoration: none;color: black;}
            
            .box{width: 300px;height: 30px;line-height: 30PX;}
            .F1,.F2,.F3{width: 300px;height: 30px; border-bottom: 1px solid blue;
            background-color: lightskyblue;}
            .T1,.T2,.T3{width: 300px;background-color:lightgray;overflow:hidden;height: 0px;transition:height 1s ease;}
            .T1,.T2,.T3{}
            .M1:hover .T1{height:100px;}
            .M2:hover .T2{height: 160px;}
            .M3:hover .T3{height:230px;}    
        </style>
    </head>
    <body>
        
        <div class="box">
            <ul class="M1">
                <li class="F1">First Menu</li>
                <li class="T1">Well, the way they make shows is, they make one show.
That show‘s called a pilot. Then they show that show to the people who make shows, and on the strength of that ne show they decide if they‘re going to make more shows.
                </li>
            </ul>
            
            <ul class="M2">
                <li class="F2">Second Menu</li> 
                <li class="T2">Like you, I used to think the world was this great place where everybody livedby the same standards I did,then sone kid with a nail showed ne I was living in his world, a world where chaos rules not order, a world
where righteousness is not rewarded. That‘s Cesar‘s world, and if you‘re not willing to play by his rules, then you‘re gonna have to pay the price.
                </li>
            </ul>
            
            <ul class="M3">
                <li class="F3">Third Menu</li> 
                <li class="T3">You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don‘t know exactly when we turned on each other, but I know hat seven of us survived the slide... and only five made it out. Now we took an oath, that I‘m breaking now. We
said we‘d say it was the snow that killed the other two,but it wasn‘t. Nature is lethal but it doesn‘t hold a candle to man.
                </li>
            </ul>
        
        </div>
        
    </body>
</html>

 

过渡转换

标签:nat   class   his   tran   lin   stand   指示   nbsp   16px   

原文地址:https://www.cnblogs.com/LLiRo/p/12604633.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!