动态过渡效果

最新推荐文章于 2024-07-16 15:40:02 发布

尼古拉斯-阳

最新推荐文章于 2024-07-16 15:40:02 发布

阅读量224

点赞数

文章标签： css css3

本文链接：https://blog.youkuaiyun.com/qq_45020437/article/details/105025040

版权

本文介绍了如何利用CSS3的transition属性来实现元素的平滑动态过渡效果，包括详细代码示例，帮助读者掌握这一前端动效技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果
在这里插入图片描述
实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myLove</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #love{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #232E6D;
        }
        ul{
            height: 200px;
        }
        li{
            float: left;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            margin-right: 20px;
        }
        li:nth-child(1){
            animation: love1 4s infinite;
            background-color: #F62E74;
            animation-delay: 0s;
        }
        li:nth-child(2){