css3小球抛物线

最新推荐文章于 2024-05-18 15:14:09 发布
最新推荐文章于 2024-05-18 15:14:09 发布
阅读量710 收藏
点赞数
文章标签： css3 css html java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aoliei/article/details/123477718
版权

css部分：

 <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body {
            width: 100%;
            height: 100%;
        }
        #ball {
            display: none;
            width:10px;
            height:10px;
            background: red;
            border-radius: 50%;
            position: fixed;
        }
    
</style>

html部分：

<body>
    <div id="ball"></div>
</body>

JavaScript部分

<script>
    var ball = document.getElementById('ball');
    document.onclick = function(e) {
        ball.style.top = e.pageY + 'px';
        ball.style.left = e.pageX + 'px';
        ball.style.transition = 'left 0s, top 0s';
        ball.style.display = 'block';
        setTimeout(function(){
            ball.style.top = window.innerHeight + 'px';
            ball.style.left = '500px';
            ball.style.transition = 'left 1s linear, top 1s cubic-bezier(.08,-0.35,.99,.33)';
        }, 20)
    }
</script>

秃顶的程序员.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3动画-抛物线运动
行之
03-05 1万+
CSS3动画之抛物线今天来说下CSS3动画，目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation，transform，@keyframes，transition等。 GPU硬件加速。
CSS3 小球抛物线动画
YanG_2859390447的博客
03-11 1483
CSS部分： <style> * { padding: 0; margin: 0; } html,body { width: 100%; height: 100%; } #ball { display: none; width:10px; hei
css实现加入购物车动画（水平抛物线）
前端-尔嵘
06-28 4872
在做Vue的练习项目中，遇到了一个动画问题，在做加入购物车时，有个从左上往下抛的动画，当时没有思绪，后来得强哥指导。 <!DOCTYPE html> <html lang="en" style="width:100%;height:100%;"> <head> <meta charset="UTF-8"> <meta ...
css3和js实现抛物线运动
fkcaikengren
03-23 1638
实现抛物线运动 方式一：CSS3实现 我用原生js+css3实现了抛物线效果，查看效果请点击css3抛物线 同样的效果，下面代码是在vue中写的，我将用它来分析如何css3实现抛物线运动。 实现思路： 1）这里需要定一个球图片和一个包裹图片的球盒子，最终的位置是球盒子X轴移动300px，球图片相对于球盒子在Y轴移动了300px。 2）给样式变化加上transition，从而实现过渡效果，而不是瞬间完成。X轴方向是匀速的，所以采用了linear函数；Y轴上速度变化：负数-0-正数，所以你会看到小球先是负速度
vue项目中css3实现加入购物车小球抛物线飞入动画效果
i_ViOLeT_i的博客
05-03 6123
学习Vue中在做移动端商城练习项目时，记录css3实现加入购物车抛物线小球飞入动画效果。下面会介绍我在项目中实现抛物运动的简单方法。 知识点：css3动画（抛物线运动）、vue动态绑定事件（控制小球出现）、vue过渡效果组件（小球进入和消失的过渡效果）、vue过渡效果组件中声明 JavaScript 钩子（控制小球消失） 效果图如下： 点击“添加购物车”，小球出现飞入到购物车，小球消失 一、...
stylie工具轻松搞定css3抛物线动画
andywang821017的博客
05-25 254
自从CSS3引入了动画（transition和@keyframes，还有与之搭配的transform）之后，写动画也变的越来多越来越容易。 可是当我们遇到需要利用数学公式的复杂动画时，却一筹莫展，只能怪小时候数学没学好（可能是语文老师教的）。那么问题来了，但我拿到要实现这样的需求，该如何： 可能我们会去苦恼，加班熬夜的去补功课去解决，可是这样真的很费劲，那么，我们就来分析一...
CSS3 抛物线 加入购物车
一名普通码农的菜地
09-11 3527
CSS3 抛物线 加入购物车 分类： 前端2015-07-31 16:42 151人阅读 评论(0) 收藏 举报 动画效果 目录(?)[+] 前言 项目中用到购物车抛物线动画 一开始使用的是Jquery插件 jquery.fly.js;在手机上使用时一些较手机效果不是很好，因为这个插件会根据抛物线动画时间和距离计算抛物线点轨迹（FPS，说是
Vue实现购物小球抛物线
u010121001的博客
05-04 450
.shop{ position: fixed; top: 300px; left: 40px; } .ball{ position: fixed; left: 32px; bottom: 22px; z-index: 200; transition: all 0.4s cubic-bezier(0.49, -0.2...
Vue实现购物小球抛物线的方法实例
01-21
本文介绍的是利用Vue实现购物小球抛物线的相关内容，下面话不多说了，来一起看看详细的介绍吧 css片段 .shop{ position: fixed; top: 300px; left: 40px; } .ball{ position: fixed; left: 32px; bottom: ...
CSS3小球浮动按钮特效代码
03-20
CSS3小球浮动按钮是一款很有特色的CSS3动画按钮，它和普通的按钮不同，外观也不像普通的按钮，这款按钮由7个点组成，每点击其中一个小点按钮，小球即会滚动到相应的位置，小球有投影，滚动效果也非常逼真。
CSS3小球循环转圈加载特效特效代码
03-20
CSS3小球循环转圈加载特效是一款不规则的转圈，有5个小球互相撞击转圈来实现这款Loading动画特效。
CSS3小球跳动Loading动画特效特效代码
03-20
CSS3小球跳动Loading动画特效是一款多个小球的跳动动画，这些小球按照一定规律不停的跳动，而且小球有投影，非常有3D立体的感觉，是很有创意的一款CSS3 Loading动画特效。
HTML5 + CSS3模拟庆余年中“五竹”的镭射眼动画特效
最新发布
xingyu_qie的专栏
05-18 309
庆余年2已经火热开播了，据说反响强烈啊，不知道这一部里面，五竹的镭射眼会不会表现出来，我还挺想看看他的镭射眼的，我看到底有没有杀死剧中的庆帝。回想第一部，我都快记不清那是几年前开播的了，过会儿我们用算一下，庆余年第一步开播到现在有多久了。先来用CSS3实现一下五竹的镭射眼吧。
css sprites如何使用
codedadi的博客
05-18 390
注意：确保在定位图标时考虑到大图像的尺寸和每个图标的尺寸。例如，如果每个图标都是32x32像素的，并且它们在大图像中水平排列，那么第一个图标的background-position是0 0，第二个图标的background-position是-32px 0，依此类推。在CSS中，定义.icon类以设置所有图标的通用样式（如大小、背景图像等），并为每个图标定义特定的background-position。/* 图标2在大图像中的位置（假设每个图标宽度为32px） *//* 图标1在大图像中的位置 */
TailwindCSS在vite项目中的安装与使用
前端菜菜DayDayUp的博客
05-14 319
TailwindCSS在vite项目中的安装与使用
CSS碎碎念
◝(⑅•ᴗ•⑅)◜..°♡的博客
05-17 272
碎碎念
css去除复选框默认样式
xiaohua0708day的博客
05-17 121
类的样式，包括边框、宽度、高度等。在选中和未选中状态下，我们分别定义了不同的背景颜色，以便在复选框被选中或取消选中时改变其外观。的支持可能有所不同。你可能需要根据实际情况进行调整，以确保在各种浏览器下都能正确显示自定义的复选框样式。属性来覆盖默认的复选框外观。这些属性允许你重置浏览器的默认外观，以便你可以自定义样式。需要注意的是，不同浏览器对。在这个例子中，我们使用了。
vue3点击实现小球抛物线
05-05
实现小球抛物线的过程可以分为两个部分：点击事件和抛物线动画。 首先，我们需要在 Vue3 中实现点击事件，并且获取点击位置的坐标，可以使用 `@click` 绑定点击事件，并且使用 `$event` 参数来获取点击位置的坐标。 ``` <template> <div class="container" @click="onClick"> <div class="ball" :style="{ top: ballTop + 'px', left: ballLeft + 'px' }"></div> </div> </template> <script> export default { data() { return { ballTop: 0, ballLeft: 0, }; }, methods: { onClick(event) { // 获取点击位置的坐标 const x = event.clientX; const y = event.clientY; // 实现抛物线动画 this.throwBall(x, y); }, throwBall(x, y) { // TODO: 实现抛物线动画 }, }, }; </script> <style scoped> .container { position: relative; width: 500px; height: 500px; border: 1px solid #ccc; } .ball { position: absolute; width: 50px; height: 50px; background-color: red; border-radius: 50%; } </style> ``` 接下来，我们需要在 `throwBall()` 方法中实现小球的抛物线动画。抛物线的公式为：$y = a x^2 + b x + c$，其中 $a$ 控制抛物线的弧度，$b$ 和 $c$ 控制抛物线的位置。 我们可以通过设置一个定时器，每隔一段时间更新小球的位置，实现抛物线动画。在每次更新位置时，我们需要根据抛物线公式计算出小球的新坐标。 ``` throwBall(x, y) { const startX = this.ballLeft; const startY = this.ballTop; const endX = x - 25; // 小球的宽度是50px const endY = y - 25; // 小球的高度是50px const a = 0.005; // 控制抛物线的弧度 const b = (endY - a * endX * endX) / endX; // 根据公式计算b const c = startY - a * startX * startX - b * startX; // 根据公式计算c let time = 0; const interval = setInterval(() => { time += 0.1; const ballLeft = startX + (endX - startX) * time; const ballTop = a * ballLeft * ballLeft + b * ballLeft + c; this.ballLeft = ballLeft; this.ballTop = ballTop; if (ballTop >= endY) { clearInterval(interval); } }, 10); }, ``` 最后，我们需要在 CSS 中设置小球的初始位置和样式。 ``` .ball { position: absolute; width: 50px; height: 50px; background-color: red; border-radius: 50%; top: 0; left: 0; transition: top 0.5s ease-out, left 0.5s ease-out; } ``` 这样，我们就完成了 Vue3 中小球抛物线的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值