css过渡动画

2018-07-15  本文已影响0人  眼前人_249d
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            div{
                width: 50px;
                height: 50px;
                background-color: yellow;
                margin: 20px auto;
                transition: all 1s ease;
            }
            div:hover{
                width:800px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </body>
</html>

设置五个 div 的伪类 :hover 让鼠标划过块时块展开
transition 后 all 让所有的过渡动画生效 1s内完成 ease 为过渡效果的运动效果 开始和结束为匀速 中间为快速 如果为 linear 为匀速

<!DOCTYPE html>
<html>
   <head>
       <title></title>
       <style type="text/css">
           .box{
               width: 535px;
               height:290px;
               margin:20px auto;
               position: relative;
                               overflow:hidden;
           }
           .box .son{
               width: 535px;
               height:290px;
               background-color: black;
               color:white;
               text-align: center;
               position: absolute;
               top: 290px;
           }
           .box:hover .son{
               top:0px;
           }
       </style>
   </head>
   <body>
       <div class="box">
           <img src="../images/qq.jpg" alt="薛之谦" >
           <div class="son"><p>这是薛之谦的照片</p></div>
       </div>
   </body>
</html>

设置一个父类div 里面用<img>标签导入一张图片,在设置子类div里面添加文字“图片的描述”
父类设置居中 开启相对定位,子类开启绝对定位,用top属性使子类位于父类的下面
给父类设置属性overflow为hidden,使超出父类的区域“一剪没”,再给父类设置伪类:hover作用给子类,top属性上调就可以使正常状态下只有图片,鼠标划过图片时,文字的框上移

上一篇 下一篇

猜你喜欢

热点阅读