HTML——css-transition与animation练习---图片、logo从中心到上部逐渐变小

最新推荐文章于 2023-03-05 23:53:25 发布

only_tao

最新推荐文章于 2023-03-05 23:53:25 发布

阅读量293

点赞数

分类专栏： HTML 文章标签： html css css3

本文链接：https://blog.csdn.net/only_tao/article/details/104128962

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

使qq的图片逐渐从中心向上逐渐变小

<html>
<head>
    <title>
        css-transition与animation组合练习
    </title>
    <style>
    .div{
       text-align: center;  
    }
    .picture{
        margin-top: 200px ;
        width: 150px;
        height: 165px;
    }
    /* hover与.picture之间一定要加上空格 */

    /*********************
     *以下为使用transition* 
     *********************/
    html:hover .picture{
       transition-delay: 300ms;
       transition-duration: 2s;
       transition-timing-function: ease;
       width: 50px;
       height: 55px;
       margin-top: 0px;
 
    }

    /********************
    * 以下为使用animation*
    ********************/

    /*html:hover .picture {
        animation-name: img;
        animation-delay: 300ms;
        animation-duration: 2s; 
        animation-fill-mode: forwards; // 使之不会重新变化 
    }
    @keyframes img{
        to{
           width: 50px;
           height: 55px;
           margin-top: 0px;
        }
    }
    */
    
    .ten{
        color:rgb(36, 63, 219);
        font-family: 'Times New Roman', Times, serif;
        font-size: 30px;
        text-shadow: 3px 3px  3px   rgb(90, 160, 226);
        opacity: 1;
        /* 不透明度0~1 */
    }
    /* 👇碰到html就会触发效果 */


    /*******************
     *以下使用transition* 
     *******************/
    html:hover .ten{
        transition-delay: 300ms;
        transition-duration: 2s;
        font-size: 10px;
        opacity: 0;
    }

    /******************
     *以下使用animation*
     ******************/

    /*html:hover .ten{
        animation-name: font;
        animation-delay: 300ms;
        animation-duration: 2s ;
        animation-fill-mode: forwards;
    }
    @keyframes font{
        to{
            font-size: 0px;
            margin-top: 0px;
            // color: white; 
            text-shadow: initial;
        }
    }*/
    
    </style>
</head>
<body>
    <p style="text-align:center ;">图片、logo从中心到上部逐渐变小的动画</p>
    <div class="div">
        <img src="tencent.PNG"  alt="qq" class="picture" >
        <!-- 放入图片 -->
        <p class="ten">Tencent</p>
        <!-- 文字说明 -->
    </div>
</body>
</html>

only_tao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——css-transition与animation练习---图片、logo从中心到上部逐渐变小

使qq的图片逐渐从中心向上逐渐变小<html><head> <title> css-transition与animation组合练习 </title> <style> .div{ text-align: center; } .picture{ ...
复制链接

扫一扫