css3动画从底部自动上升

最新推荐文章于 2022-09-28 13:10:48 发布

weixin_30247781

最新推荐文章于 2022-09-28 13:10:48 发布

阅读量1.1k

点赞数

原文链接：http://www.cnblogs.com/yuanyuan-1994/p/8809091.html

版权

效果：红色的字和背景从底部慢慢升起



代码
<style>
    .father {
        width: 300px;
        height: 280px;
        border: 1px solid #ccc;
        margin: 50px auto;
    }
    .father  img{
            width: 300px;
            height: 200px;
        }
        .son{
            width: 300px;
            height:80px;
            overflow: hidden;

        }
        .son1{
            animation: sport 1s;
            transform: translateY(0px);
            width: 300px;
            height:80px;
            background: #cd0200;
        }
    @keyframes sport {
            0%   {transform: translateY(80px);opacity: 1;}
            25%  {transform: translateY(50px);opacity: 1}
            50%  {transform: translateY(20px);opacity: 1}
            100% {transform: translateY(0px);opacity: 1}
        }
        h3,p{
            color: #000000;
            font-size: 13px;
        }
        h3{
            padding: 10px 0 10px 10px;
        }
    </style>
</head>
<body>
<div class="father">
        <img src="image/anli1.png">
    <div class="son">
        <div class="son1">
            <h3>标题标题</h3>
            <p>内容内容内容内容内容内容内容内容</p>
        </div>
    </div>
</div>
</body>

转载于:https://www.cnblogs.com/yuanyuan-1994/p/8809091.html

weixin_30247781

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3动画从底部自动上升

效果：红色的字和背景从底部慢慢升起代码<style> .father { width: 300px; height: 280px; border: 1px solid #ccc; margin: 50px auto; } .father img{ width: 300px; ...
复制链接

扫一扫