CSS动画学习实现轮播图及3D骰子

最新推荐文章于 2024-01-16 21:04:57 发布

前端菜菜阿海

最新推荐文章于 2024-01-16 21:04:57 发布

阅读量434

点赞数 2

分类专栏：前端学习手记文章标签： css animation html

本文链接：https://blog.csdn.net/zxh996/article/details/118463506

版权

本文介绍了CSS动画的基础知识，包括animation和transition属性，并通过实例展示了如何使用CSS创建轮播图和3D骰子效果。通过学习这些案例，读者能够更好地理解和应用CSS动画。

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

前言

CSS功能非常强大，可以通过纯CSS实现轮播图功能和3D骰子，在此之前需要先了解CSS是如何实现动画功能的，所以我整理了CSS动画的知识点，帮助大家理解，仅供参考学习。

一、CSS动画元素认识

1.animation属性

在这里插入图片描述
代码如下（示例）：

    <style>
        div {
    
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            animation-name: run;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        /*  可简写成下面代码  */
        /*  animation: run 5s linear 2s infinite alternate; */
        }
        @keyframes run {
    
            0% {
    
                background-color: pink;
                left: 0;
                top: 0;
            }
            25% {
    
                background-color: aquamarine;
                left: 200px;
                top: 0;
            }
            50% {
    
                background-color: thistle;
                left: 200px;
                top: 200px;
            }
            75% {
    
                background-color: yellowgreen;
                left: 0;
                top: 200px;
            }
            100% {
    
                background-color: pink;
                left: 0;
                top: 0;
            }
        }
    </style>
</head>
<body>
<div></div>
</body>