css过渡动画

作者: 眼前人_249d | 来源:发表于2018-07-15 19:54 被阅读0次

CSS3动画
Vue -- 过渡和动画
08_dayCSS动画
Vue中的动画
有用的Vue第三方库
CSS动画
05.React高级部分（下）
10.React中CSS动画19-04-30
web前端-CSS3动画
css动画过渡

<!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属性上调就可以使正常状态下只有图片，鼠标划过图片时，文字的框上移