CSS3动画特效经典案例腾讯课堂

最新推荐文章于 2024-07-28 20:04:07 发布

空零kl

最新推荐文章于 2024-07-28 20:04:07 发布

阅读量604

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/weixin_43706224/article/details/88117714

版权

Css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.悟空行走动画在这里插入图片描述
2.1 小米官网动画，动画从无到显示2.2星钻官网

练手项目：

<!DOCTYPE html>
<html>
<head>
    <title>animate</title>
    <style type="text/css">
        .big{
            width: 200px;
            height: 400px;
            overflow: hidden;
            position: relative;
            bottom: -100px;

        }
        .big .border{
            position: absolute;
            top: 60px;
            left: 10px;
            right: 10px;
            bottom: 60px;
            border: 2px solid white;
        }
        .big:hover img{
            transition: all 1s;
            transform: scale(1.2);
        }
        .big > img{
            width: 200px;
            height: 300px;
            border: 2px solid white;
            margin-bottom: -350px;
            position: absolute;
            top:50px;
            bottom: 50px;
        }
        .big:hover .border{
            transition: all 1s;
            transform: translateY(10px);
        }
        .big:hover{
            
            transform: translateY(-10px);
        }
    </style>
</head>
<body>
    <div class="big">
        <img src="./images/backgrounds/0.jpg">
        <div class="border">
            
        </div>
    </div>
    
</body>
</html>

3.扑克牌旋转动画
在这里插入图片描述