使用CSS3新增属性实现动画集锦

最新推荐文章于 2024-05-21 15:50:51 发布

VantageCesar

最新推荐文章于 2024-05-21 15:50:51 发布

阅读量389

点赞数

分类专栏： Web前端开发文章标签： css3

本文链接：https://blog.csdn.net/xiomarazark/article/details/108323824

版权

本文展示了如何使用CSS3的新特性，如animation、transform等，制作各种动画效果，包括简单阴影盒子动画、bilibili置顶动画、3D导航栏旋转、淡入淡出和切换动画等。通过实例代码，帮助读者掌握CSS3实现动画的方法。

摘要由CSDN通过智能技术生成

现如今，不仅JavaScript和JQuary等技术能够实现简单动画，CSS3也能代替JavaScript实现一些简单的动画了！下面就跟我一起操练起来吧！

简单阴影盒子动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阴影盒子动画</title>
<style>
    .banner{
    
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-top: 30px;
        transition: all .5s;
    }
    div:hover{
    
        box-shadow: 0px 10px 5px #888888;
        margin-top: 20px;
    }
</style>
</head>
<body>
    <center>
        <div class="banner">FloatBox</div>
    </center>      
</body>
</html>

效果图如下：
box1

bilibili置顶动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩置顶动画</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        @-webkit-keyframes fly {
    
            0% {
    
                background-position-x: 0;
            }
            25% {
    
                background-position-x: -150px;
            }
            50% {
    
                background-position-x: -300px;
            }
            75% {
    
                background-position-x: -450px;
            }
            100% {
    
                background-position-x: -600px;
            }
        }
        a{
    
            display: block;
        }
        .rocket-con {
    
            position: fixed;
            background: url('rocket_top.png');
            width: 150px;
            height: 175px;
            cursor: pointer;
            z-index: 99;
            bottom: 0;
            left: 50%;
            margin-left: 490px;
        }

        .rocket-con:hover.fly {
    
            -webkit-animation: fly .4s steps(1) infinite;
            background-image: url('rocket_frame.png');
        }
    </style>
</head>
<

最低0.47元/天解锁文章

VantageCesar

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用CSS3新增属性实现动画集锦

现如今，不仅JavaScript和JQuary等技术能够实现简单动画，CSS3也能代替JavaScript实现一些简单的动画了！下面就跟我一起操练起来吧！CSS3实现简单动画简单阴影盒子动画bilibili置顶动画3D导航栏旋转动画简单导航栏遮罩动画一遮罩动画二淡入淡出动画切换动画简单阴影盒子动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta
复制链接

扫一扫