CSS实现小球边界碰撞回弹

 如何通过CSS实现一个物体在屏幕中无限的边界碰撞回弹呢?我们可以使用动画效果实现 

代码

我们只做一个小球,通过定位属性叠加动画的方式, 让小球在屏幕中进行运动,通过设置animation的alternate属性来设置回弹。最后,只需要设置两个运动的持续时间不同就能完成多方向的边界碰撞事件了。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {position: absolute;top: 0;left: 0;width: 100px;height: 100px;background-color: orange;border-radius: 50%;animation: w_move 2.5s linear infinite alternate,h_move 3.2s linear infinite alternate;}@keyframes w_move {to {left: calc(100vw - 100px);}}@keyframes h_move {to {top: calc(100vh - 100px);}}</style></head><body><div></div></body>
</html>

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

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

相关文章

智能优化算法应用:基于人工电场算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于人工电场算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于人工电场算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.人工电场算法4.实验参数设定5.算法结果6.参考…

运维03:LAMP

黄金架构LAMP 什么是LAMP LAMP是公认的最常见&#xff0c;最古老的黄金web技术栈 快速部署LAMP架构 #停止nginx&#xff0c;并且把nginx应用卸载了 systemctl stop nginx yum remove nginx -y#关闭防火墙 iptables -F #清空防火墙规则&#xff0c;比如哪些请求允许进入服…

06 数仓平台MaxWell

Maxwell简介 Maxwell是由Zendesk公司开源&#xff0c;用 Java 编写的MySQL变更数据抓取软件&#xff0c;能实时监控 MySQL数据库的CRUD操作将变更数据以 json 格式发送给 Kafka等平台。 Maxwell输出数据格式 Maxwell 原理 Maxwell工作原理是实时读取MySQL数据库的二进制日志…

C# 热键注册工具类

写在前面 介绍一个验证过的热键注册工具类&#xff0c;使用系统类库user32.dll中的RegisterHotkey函数来实现全局热键的注册。 代码实现 [Flags]public enum KeyModifiers{Alt 1,Control 2,Shift 4,Windows 8,NoRepeat 0x4000}public static class HotKeyHelper{[DllImp…

01、pytest:帮助你编写更好的程序

简介 ​pytest框架可以很容易地编写小型、可读的测试&#xff0c;并且可以扩展以支持应用程序和库的复杂功能测试。使用pytest至少需要安装Python3.7或PyPy3。PyPI包名称为pytest 一个快速的例子 content of test_sample.py def inc(x):return x1def test_ansewer():assert i…

OpenCV-Python:图像卷积操作

目录 1.图像卷积定义 2.图像卷积实现步骤 3.卷积函数 4.卷积知识考点 5.代码操作及演示 1.图像卷积定义 图像卷积是图像处理中的一种常用操作&#xff0c;主要用于图像的平滑、锐化、边缘检测等任务。它可以通过滑动一个卷积核&#xff08;也称为滤波器&#xff09;在图像…

MySQL之时间戳(DateTime和TimeStamp)

MySQL之时间戳&#xff08;DateTime和TimeStamp&#xff09; 文章目录&#xff1a; MySQL之时间戳&#xff08;DateTime和TimeStamp&#xff09;一、DateTime类型二、TimeStamp类型三、DateTime和TimeStamp的区别 当插入数据时&#xff0c;需要自动记录一个时间时候&#xff0c…

人工智能_机器学习059_非线性核函数_poly核函数_rbf核函数_以及linear核函数效果对比---人工智能工作笔记0099

人工智能_机器学习059_非线性核函数介绍---人工智能工作笔记0099 那么我们应该如何调整这个SVC的参数,也就是我们应该使用哪种核函数,比较合适呢?这取决于我们的数据,适合使用哪个核函数,正好我们有 提供的score = accuracy_score(y_test,y_pred) 这样的评分函数,我们可以根据…

保护你的数据:深入了解安全测试!

安全测试是一种非功能性测试。与功能测试不同&#xff0c;功能测试关注的是软件的功能是否正常工作&#xff08;软件做什么&#xff09;&#xff0c;非功能测试关注的是应用程序是否被正确设计和配置。 安全测试的主要目标&#xff1a; 识别资产-需要保护的东西&#xff0c;如…

STM32单片机项目实例:基于TouchGFX的智能手表设计(1)项目介绍及GUI界面基础

STM32单片机项目实例&#xff1a;基于TouchGFX的智能手表设计&#xff08;1&#xff09;项目介绍及GUI界面基础 一、项目介绍 1.1方案提供 1.2主控选择 1.3硬件平台 1.4 开发环境 1.5 关于华清 二、GUI界面基础 2.1.1 嵌入式绘图系统 2.1.1 色彩格式 2.1.1帧缓冲区 …

CleanMyMac X2024最新免费Mac中文版安装包下载

CleanMyMac X for Mac中文2024版只需两个简单步骤就可以把系统里那些乱七八糟的无用文件统统清理掉&#xff0c;节省宝贵的磁盘空间。cleanmymac x个人认为X代表界面上的最大升级&#xff0c;功能方面有更多增加&#xff0c;与最新macOS系统更加兼容&#xff0c;流畅地与系统性…

【Vulnhub 靶场】【Prime (2021): 2】【简单 - 中等】【20210509】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/prime-2021-2,696/ 靶场下载&#xff1a;https://download.vulnhub.com/prime-2021/Prime-2.ova 靶场难度&#xff1a;简单 - 中等 发布日期&#xff1a;2021年5月9日 文件大小&#xff1a;3.7 GB 靶场作者&am…

能源企业管理ERP系统都有哪些?可以帮助企业解决哪些难点

能源企业在不同的发展阶段面对的经营压力以及遇到的管理问题各异&#xff0c;随着部分产品结构的复杂化&#xff0c;日常经营管理工作也愈加繁琐。 有些能源企业内部存在信息传递不畅、经营数据统计不及时、部门协作效率低、多仓库和多平台数据不统一等情况&#xff0c;而这些…

RH850P1X芯片学习笔记-Overview

文章目录 Outline产品列表功能框图特点Pin和引脚功能CPU系统CPUFPU浮点运算单元中断处理保护机制指令缓存Local RAMGlobal RAM处理器间通信和相互排斥机制 操作模式中断功能DMA电源供电Reset控制单元时钟控制单元CSIH-SPIMCAN看门狗计时器系统计时器GTM通用定时器模块外设互联P…

openCV在Visual Studio2019下的集成使用

文章目录 下载OpenCV工具选择合适库文件使用visual studio创建空项目测试运行运行结果 下载OpenCV工具 官网下载实在太慢&#xff0c;还老实下不下来。下面从网上找到些别人分享的一些版本&#xff08;从3.4到4.7&#xff09;放到了网盘里&#xff0c;请按需下载使用。 链接&a…

轻量封装WebGPU渲染系统示例<43>- PBR材质与阴影实(源码)

原理简介: 1. 基于rendering pass graph实现。 2. WGSL Shader 基于文件系统和宏机制动态组装。 当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/PBRShadowTest.ts 当前示例运行效果: 此示例基于此渲染系统实现&a…

Ribbon-IRule 修改负载均衡的规则

1、负载均衡规则描述 &#xff08;1&#xff09;整体关系 &#xff08;2&#xff09;规则描述 内置负载均衡规则类规则描述RoundRobinRule简单轮询服务列表来选择服务器。它是Ribbon默认的负载均衡规则。AvailabilityFilteringRule对以下两种服务器进行忽略: (1)在默认情况下&…

1-4、调试汇编程序

语雀原文链接 文章目录 1、执行过程第一步&#xff1a;源程序第二步&#xff1a;编译连接第三步&#xff1a;执行 2、DOSBox运行程序第1步 进入EDIT.EXE第2步 编写源程序第3步 编译第4步 连接第5步 执行完整过程 3、DEBUG跟踪执行过程加载程序到内存执行程序debug和源程序数字…

软件平台架构设计与技术管理之道笔记

软件平台架构设计与技术管理之道笔记 认知 领导软件平台各方面的工作&#xff0c;对技术底蕴、思维模式、决策能力、工作风格、文化铸造等方面都有极高的要求&#xff0c;可以称之为“领域智慧”。认知盲区的代价是巨大的&#xff0c;“不知”比“不会”的后果更严重&#xf…

探讨Unity中的动画融合技术(BlendTree)

动画在游戏和虚拟现实应用中扮演着关键的角色&#xff0c;而动画融合技术则是使角色动作更加流畅和逼真的核心。在Unity引擎中&#xff0c;我们可以使用动画混合树&#xff08;Blend Trees&#xff09;来实现这一目标。本篇技术博客将深入讨论动画融合技术的实现原理、在Unity中…