css实现分页效果

最新推荐文章于 2025-04-29 09:50:37 发布

.ASEN.

最新推荐文章于 2025-04-29 09:50:37 发布

阅读量1.1k

点赞数

分类专栏： HTML作业文章标签：动画 css3 css

本文链接：https://blog.youkuaiyun.com/weixin_47304332/article/details/125073254

版权

HTML作业专栏收录该内容

8 篇文章

订阅专栏

这篇博客展示了如何使用CSS实现列表项的过渡效果。通过设置li元素的宽度、高度、边框、圆角、内边距和文本对齐方式，以及添加鼠标悬停时的背景颜色和缩放变换，实现了平滑的交互体验。代码中详细定义了样式规则，并给出了包含1到5的列表实例。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      li{
        width: 50px;
        height: 50px;
        float: left;
        border: #1b956b 1px solid;
        border-radius: 35px;
        margin-right: 10px;
        text-align: center;
        line-height: 50px;
        list-style: none;
        transition: all 0.5s;
      }

      li:hover{
        background-color: #a5f5cd;
        transform: scale(1.1);
      }
    </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>

</body>
</html>

在这里插入图片描述