前端笔记之10.18-HTML+CSS学完

最新推荐文章于 2025-12-30 15:54:36 发布

原创最新推荐文章于 2025-12-30 15:54:36 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

前端学习专栏收录该内容

20 篇文章

订阅专栏

本文介绍了使用CSS实现过渡效果、雪碧图动画、变形平移、旋转等技术，通过实例展示了如何创建一个跑动的米兔动画以及制作时钟效果。还探讨了响应式布局中的断点设置，并提到了移动端的完美视口概念。此外，讨论了Less预处理器的使用和弹性盒模型在布局中的优势。最后，强调了理解像素和响应式设计在移动设备上的重要性。

1.过渡效果：（在之前做小米练习时已经做过啦）

四个属性：

2.米兔的练习：

实现一个简单的动画效果：

思路：雪碧图+过渡的分步效果：

但还有一个问题，这个只是实现了鼠标移上去切换的效果，没有自动的效果，这就引入了我们要学的------动画：

3.动画效果：

然后用这个效果做了一个小应用：

让这个少年跑起来！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mito</title>
<style>
.img1{
    height: 256px;
    width: 256px;
    background-image: url("../img/bg2.png");
    margin: 0 auto;
    animation: run 1s steps(6) infinite;
}
@keyframes run{
    from{
        background-position: 0 0;
    }
    to{
        background-position: -1536px 0;
    }
}


</style>
     
</head>
<body>
    <div class="img1"></div>
</body>