html+css+js炫酷特效+加速粒子效果

最新推荐文章于 2024-04-30 16:57:21 发布
VIP文章 最新推荐文章于 2024-04-30 16:57:21 发布
阅读量6.3k 收藏 88
点赞数 19
分类专栏： javaScript特效 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/preserveXing/article/details/123573297
版权

完整目录

1.效果展示

在这里插入图片描述
在这里插入图片描述

2.思路

2.0布局

<body>
    <div class="sence">  //总容器 存放 火箭 以及添加的 <i>

        <div class="scoker"> //居中的火箭  会有个after的尾火焰
            <img src="./3.png" alt="">
        </div>

    </div>
</body>

2.1让火箭 位于屏幕的中心–flex

*{
   
    margin: 0;
    padding: 0;
}
.sence{
   
//和屏幕一样大小  火箭居中
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #02060a;
    overflow: hidden;
}

在这里插入图片描述

2.2让火箭 上下不停的移动

.scoker{
   
    position: relative; //让火焰 after的定位相对于他  父相子绝
    animation: move 0.2s linear infinite;//上下移动
}
@keyframes move {
   
    0%,100%{
   
        transform: translateY(0px);
    }
    25%{
   
        transform: translateY(-5px);
    }
    50%{
   
        transform: translateY(0px);
    }
    75%{
   
        transform: translateY(5px);
    }
}

2.3利用::after 制造 尾部的火焰

.scoker::after{
   
    content: "";
    position: absolute;
    top:
最低0.47元/天 解锁文章
门前大桥下.
关注
  • 19
    点赞
  • 踩
  • 88
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
【HTML——炫酷粒子】（效果+代码）| HTML前端多彩粒子特效（附代码）
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
10-03 2058
分享一个HTML——炫酷粒子的效果。【HTML——炫酷粒子】（效果+代码）| HTML前端多彩粒子特效（附代码）
H5粒子漂浮上升渐变背景特效
06-24
H5粒子漂浮上升渐变背景特效是一款基于HTML5 Canvas实现的蓝绿渐变背景和漂浮的粒子元素动画结合背景特效。
html+css+js实现炫酷网页特效
10-02
html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+c
前端：用css打造炫酷3d特效- css3d立方体
weixin_41472569的博客
01-31 1103
一个三维物体(一个长方体)，它围绕着一个轴旋转。我已经有过一些与css 3d一起工作的经验，并且我脑海里开始出现了一个解决方案。我搜索了像“css 3d立方体”这样的关键词来确认我的想法。 对技术感兴趣的朋友可以加我前端学习裙 学习编号：落叶，213126486，一起讨论进步~ 削尖轴 让我提醒你关于浏览器轴的事情。不是战争轴心，而是数字线路.。在三维笛卡尔坐标系中，我们都学到了同样的...
jquery 背景特效实现_「网络特效」12 个炫酷背景特效库
weixin_39537298的博客
11-10 904
1.particles-bg地址：https://github.com/lindelof/particles-bg效果：2.particles-bg-vue地址：https://github.com/lindelof/awesome-web-effect这是一个基于VUE的粒子动画组件。3.jquery.ripples地址：https://github.com/sirxemic/jquery.ri...
HTML+CSS+JS实现粒子旋涡（代码实例）
追求细节，成就完美
06-23 714
一个HTML文本实现粒子旋涡特效
CSS-动效 纯css粒子动效 | 转圈圈 | 上下弹动
WangYan的博客
10-14 2263
粒子动效 旋转 弹动
Python 程序的输出 | 第一套
热门推荐
努力是为了站在万人之中，成为别人的光
03-06 3万+
预测以下 python 程序的输出： 程序一： r = lambda q: q * 2 s = lambda q: q * 3 x = 2 x = r(x) x = s(x) x = r(x) print (x) 输出： 24 解释： 在上述程序中，r 和 s 是 lambda 函数或匿名函数，q 是这两个函数的参数。在第一步中，我们将 x 初始化为 2。在第二步中，我们将 x 作为参数传递给 lambda 函数 r，这将返回存储在 x 中的 x*2。也就是说，现在 x = 4。同样，在第三步中，我们将
css粒子效果
Haines
11-23 947
css粒子
分享66个菜单导航JS特效，总有一款适合您
zy19830907的博客
12-04 95
分享66个菜单导航JS特效，总有一款适合您
分享100个好看且实用的JavaScript特效
zy0412326的专栏
05-29 2万+
分享100个好看且实用的JavaScript特效 分享100个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这100个Js也是花了很多时日！ 下面是PPT的名字，我放了一些图片，所有图片全都放进去是不行的100个图太多，大家下载后可以看到。 彩色发光的黑洞CSS3特效 纯CSS3边框按钮悬停特效 HTML5彩虹波浪动画特效 ECharts企业组织架构图代码 CSS3 SVG清空回收站按钮特效 HTML5打雷闪电下雨特效 jQuery数字百分比加载
黑色粒子特效-科技风-js动画-网页背景动效-跟随鼠标移动背景效果-源码
09-30
很多博客背景的科技风粒子特效，html源码，可以F12全屏当作背景版也可以自己开发到页面里当作背景特效。黑色的粒子特效，使用canvas绘制，可以跟随鼠标的移动变换背景粒子，很有科技感
js+css时钟效果 js+css时钟效果
04-18
js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+...
js+css炫酷3d立体卡通文字特效特效代码
03-20
这是一款效果使用纯js和CSS3制作的炫酷3D立体卡通文字特效。该特效通过js代码来克隆字母的内容，并通过 CSS text-shadow属性和transform属性将字母渲染为3D立体效果。
前端html+js+css 粒子特效
03-30
前端html+js+css 粒子特效
HTML+CSS+JS的爱心代码.zip
06-19
HTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码....
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 642
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 735
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 25
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用HTML+CSS+JS写一个炫酷的时钟显示效果
05-10
好的，下面是一份使用 HTML+CSS+JS 实现炫酷时钟的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Cool Clock</title> <style type="text/css"> body { background-color: #333; } .clock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .clock .hour, .clock .minute, .clock .second { position: relative; width: 70%; height: 70%; margin: auto; border-radius: 50%; background-color: #333; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; } .clock .hour:before, .clock .minute:before, .clock .second:before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); height: 50%; width: 5px; background-color: #fff; border-radius: 5px; } .clock .hour { z-index: 3; } .clock .hour:before { height: 30%; } .clock .minute { z-index: 2; } .clock .minute:before { height: 40%; } .clock .second { z-index: 1; } .clock .second:before { height: 50%; } .clock .tick { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); height: 10%; width: 5px; background-color: #fff; border-radius: 5px; transform-origin: center 90%; animation: tick 1s linear infinite; } .clock .tick:nth-child(5n+1) { height: 20%; } .clock .tick:nth-child(10n+1) { height: 30%; } .clock .tick:nth-child(15n+1) { height: 40%; } .clock .tick:nth-child(20n+1) { height: 50%; } @keyframes tick { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="clock"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> </div> <script type="text/javascript"> function updateClock() { var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var hourHand = document.querySelector(".hour"); var minuteHand = document.querySelector(".minute"); var secondHand = document.querySelector(".second"); var hourAngle = (hour % 12) / 12 * 360 + minute / 60 * 30; var minuteAngle = minute / 60 * 360; var secondAngle = second / 60 * 360; hourHand.style.transform = "rotate(" + hourAngle + "deg)"; minuteHand.style.transform = "rotate(" + minuteAngle + "deg)"; secondHand.style.transform = "rotate(" + secondAngle + "deg)"; } setInterval(updateClock, 1000); </script> </body> </html> ``` 这份代码实现了一个圆形的时钟，时钟的样式可以通过 CSS 进行自定义。时钟的指针是通过 CSS 的 `transform: rotate()` 属性来控制旋转角度的，指针的角度是根据当前时间计算出来的。时钟上的刻度线是通过 CSS 的 `animation` 属性来实现的，用 `transform-origin` 控制旋转中心，用 `@keyframes` 定义动画。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值