CSS 实现楼梯与小球动画

CSS 实现楼梯与小球动画

效果展示

在这里插入图片描述

CSS 知识点

  • CSS动画使用
  • transform属性使用

页面整体布局

<div class="window"><div class="stair"><span style="--i: 1"></span><span style="--i: 2"></span><span style="--i: 3"></span><span style="--i: 4"></span><span style="--i: 5"></span><span style="--i: 6"></span><span style="--i: 7"></span><span style="--i: 8"></span><span style="--i: 9"></span><span style="--i: 10"></span></div>
</div>

实现整体容器样式

.window {position: relative;width: 340px;height: 480px;background: #fff;border-radius: 170px;border: 4px solid #114b64;box-shadow: 0 0 0 12px #fff;overflow: hidden;
}
.window .stair {position: absolute;width: 100%;right: calc(-100% + 0px);top: 100px;animation: stairs 1s linear infinite; // 动画部分
}
.window .stair span {position: absolute;top: calc(var(--i) * 40px);right: calc(var(--i) * 40px);width: 100%;min-height: 40px;background: #114b64;border-bottom: 4px solid #fff;border-top-left-radius: 4px;
}

实现楼梯动画

@keyframes stairs {0% {transform: translateX(0) translateY(0);}100% {transform: translateX(40px) translateY(-40px);}
}

实现小球

.window::after {content: "";position: absolute;top: 190px;left: calc(50% + 45px);width: 30px;height: 30px;border-radius: 50%;background: #f44336;animation: bounce 1s ease-in-out infinite;
}

实现小球动画

@keyframes bounce {0%,100% {transform: translateY(-1px);}50% {transform: translateY(-40px);}
}

完整代码下载

完整代码下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/439150.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jmeter学习(2)变量

1&#xff09;用户定义的变量 路径&#xff1a;添加-》配置元件-》用户定义的变量 用户定义的变量是全局变量&#xff0c;可以跨线程组被调用&#xff0c;但在启动运行时获取一次值&#xff0c;在运行过程中不再动态获取值。 注意的是&#xff0c;如果在某个线程组定义了全…

使用GitLab CI构建持续集成案例

1. 部署GitLab &#xff08;1&#xff09;基础准备 解压软件包并导入镜像&#xff1a; [rootmaster ~]# curl -O http://mirrors.douxuedu.com/competition/Gitlab-CI.tar.gz [rootmaster ~]# tar -zxvf Gitlab-CI.tar.gz [rootmaster ~]# ctr -n k8s.io image import gitla…

linux基础指令的认识

在正式学习linux前&#xff0c;可以简单认识一下linux与win的区别 win&#xff1a;是图形界面&#xff0c;用户操作更简单&#xff1b;在刚开始win也是黑屏终端 指令操作&#xff0c;图形界面就是历史发展的结果。Linux&#xff1a;也存在图形界面比如desktop OS&#xff1b;但…

基于拥堵模型的轻量级平台公交室内情况监控系统

论文标题&#xff1a;Bus Indoor Situation Monitoring System Based on Congestion Model Using Lightweight Platform 作者信息&#xff1a;Dong Hyun Kim, Yun Seob Kim, 和 Jong Deok Kim* 所属机构&#xff1a;Pusan National University, Department of Computer Scienc…

网页打不开、找不到服务器IP地址

现象&#xff1a;网络连接ok&#xff0c;软件能正常使用&#xff0c;当网页打不开。 原因&#xff1a;DNS 配置错误导致网站域名无法正确解析造成。 影响DNS设置的&#xff1a;VPN软件、浏览器DNS服务选择、IPv4属性被修改。 1、VPN代理未关闭 2、浏览器DNS解析选择 3、以太…

Python | 使用Seaborn绘制KDE核密度估计曲线

核密度估计&#xff08;KDE&#xff09;图&#xff0c;一种可视化技术&#xff0c;提供连续变量概率密度的详细视图。在本文中&#xff0c;我们将使用Iris Dataset和KDE Plot来可视化数据集。 什么是KDE图&#xff1f; KDE图&#xff0c;全称核密度估计图(Kernel Density Est…

【JAVA开源】基于Vue和SpringBoot的旅游管理系统

本文项目编号 T 063 &#xff0c;文末自助获取源码 \color{red}{T063&#xff0c;文末自助获取源码} T063&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析5.4 用例设计 六、核…

k8s的学习和使用

为什么用k8s&#xff0c;不用docker&#xff1f; k8s更适合复杂的微服务架构和大规模的容器应用。 Pods(Pod) Pod是k8s最小可部署单元&#xff0c;他包含一个或多个相关容器。这些容器共享网络命名空间和存储卷&#xff0c;他们通常协同工作来构成一个应用程序。 Serv…

微信小程序处理交易投诉管理,支持多小程序

大家好&#xff0c;我是小悟 1、问题背景 玩过微信小程序生态的&#xff0c;或许就有这种感受&#xff0c;如果收到投诉单&#xff0c;不会及时通知到手机端&#xff0c;而是每天早上10:00向小程序的管理员及运营者推送通知。通知内容为截至前一天24时该小程序账号内待处理的交…

哪款百元头戴式耳机性价比高?四款大火爆全网的机型盘点推荐!

在繁忙的生活节奏中&#xff0c;寻找一片属于自己的宁静空间&#xff0c;成为了许多人的内心渴望。头戴式降噪耳机&#xff0c;正是那把打开音乐世界的钥匙。它不仅能够隔绝外界的喧嚣&#xff0c;还能将您带入一个纯净无瑕的音乐世界。无论是沉浸在古典乐的悠扬旋律中&#xf…

66 使用注意力机制的seq2seq_by《李沐:动手学深度学习v2》pytorch版

系列文章目录 文章目录 系列文章目录动机加入注意力总结代码定义注意力解码器训练小结练习 我们来真的看一下实际应用中&#xff0c;key&#xff0c;value&#xff0c;query是什么东西&#xff0c;但是取决于应用场景不同&#xff0c;这三个东西会产生变化。先将放在seq2seq这个…

平面电磁波的电场能量磁场能量密度相等,能量密度的体积分等于能量,注意电场能量公式也没有复数形式(和坡印廷类似)

1、电场能量密度和磁场能量密度相等(实数场算的) 下面是电场能量密度和磁场能量密度的公式&#xff0c;注意这可不是坡印廷定理。且电场能量密度没有复数表达式&#xff0c;即不是把E和D换成复数形式就行的。注意&#xff0c;一个矢量可以转化为复数形式&#xff0c;两个矢量做…

深入计算机语言之C++:C到C++的过度

&#x1f511;&#x1f511;博客主页&#xff1a;阿客不是客 &#x1f353;&#x1f353;系列专栏&#xff1a;从C语言到C语言的渐深学习 欢迎来到泊舟小课堂 &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 一、什么是C C&#xff08;c plus plus&#xff…

使用NumPy进行线性代数的快速指南

介绍 NumPy 是 Python 中用于数值计算的基础包。它提供了处理数组和矩阵的高效操作&#xff0c;这对于数据分析和科学计算至关重要。在本指南中&#xff0c;我们将探讨 NumPy 中可用的一些基本线性代数操作&#xff0c;展示如何通过运算符重载和内置函数执行这些操作。 元素级…

Linux 文件 IO 管理(第四讲:软硬链接和动静态库)

Linux 文件 IO 管理&#xff08;第四讲&#xff1a;软硬链接和动静态库&#xff09; 软硬链接操作与现象软链接硬链接 解释软链接硬链接作用 动静态库初识静态库怎么做库&#xff08;开发角度&#xff09;怎么用库&#xff08;使用角度&#xff09;安装当前目录直接使用 动态库…

打卡第一天 B2005 字符三角形

今天是我打卡第一天&#xff0c;就做个水题吧(#^.^#) 题目描述 给定一个字符&#xff0c;用它构造一个底边长 55 个字符&#xff0c;高 33 个字符的等腰字符三角形。 输入格式 输入只有一行&#xff0c;包含一个字符。 输出格式 该字符构成的等腰三角形&#xff0c;底边长…

全新一区PID搜索算法+TCN-LSTM+注意力机制!PSA-TCN-LSTM-Attention多变量时间序列预测(Matlab)

全新一区PID搜索算法TCN-LSTM注意力机制&#xff01;PSA-TCN-LSTM-Attention多变量时间序列预测&#xff08;Matlab&#xff09; 目录 全新一区PID搜索算法TCN-LSTM注意力机制&#xff01;PSA-TCN-LSTM-Attention多变量时间序列预测&#xff08;Matlab&#xff09;效果一览基本…

今日凌晨,ChatGPT重磅更新!—— 我心目中的终极AGI界面

今日凌晨&#xff0c;ChatGPT重磅更新&#xff01;—— 我心目中的终极AGI界面 我心目中的终极 AGI 界面是一张空白画布&#xff08;canvas&#xff09;。 今日凌晨&#xff0c;OpenAI 发布 canvas&#xff0c;一个与 ChatGPT 合作写作和编程的新界面&#xff01; canvas&…

MySQL 启动失败 (code=exited, status=1/FAILURE) 异常解决方案

目录 前言1. 问题描述2. 查看错误日志文件2.1 确认日志文件路径2.2 查看日志文件内容 3. 定位问题3.1 问题分析 4. 解决问题4.1 注释掉错误配置4.2 重启 MySQL 服务 5. 总结结语 前言 在日常运维和开发过程中&#xff0c;MySQL数据库的稳定运行至关重要。然而&#xff0c;MySQ…