小动效
文章平均质量分 69
不停留
这个作者很懒,什么都没留下…
展开
-
CSS页面效果——极光晃动
在上述代码中,我们创建了一个黑色背景的页面,并使用::before和::after伪元素来创建两个极光效果的图层。通过linear-gradient创建了一个从绿色到蓝色、红色、紫色再回到绿色的渐变背景,并使用animation来实现晃动效果。你可以根据需要调整极光的颜色、大小、速度等参数,以获得不同的效果。原创 2024-06-29 16:47:52 · 235 阅读 · 0 评论 -
CSS页面效果——随机闪动的星空、loading效果、星星闪动
三种不同形状的星星样式(.pentagram-star、.triangle-star、.hexagon-star)分别定义了各自的形状和颜色,并应用了相同的闪烁动画 blink。通过以上的 HTML、CSS 和 JavaScript 代码的配合,实现了随机分布、不同形状、有先后顺序闪烁的星星效果,模拟出了夜空繁星的景象。body 样式设置了背景为从顶部的 #000033(较深的蓝色)到底部的 #000000(黑色)的线性渐变,营造出夜空的效果。元素 star-field,用于容纳后续创建的星星。原创 2024-07-03 12:20:01 · 912 阅读 · 0 评论 -
CSS页面效果——点击 电池充电
为 .battery-level 元素的宽度变化添加平滑过渡效果,使其在充电过程中宽度的增加看起来更加自然。通过上述布局和逻辑的结合,实现了一个简单的华为手机电池充电效果的模拟。首先,创建一个名为 .battery 的容器,用于表示电池的外观。”的文字提示,通过绝对定位将其放置在电池容器的中心位置。在电池容器内部,创建一个 .battery-level 元素,用于表示充电的进度。初始时,其宽度为 0。当充电进度的宽度达到 100%时,使用 clearInterval 方法清除定时器,停止充电进度的增加。原创 2024-07-03 11:44:47 · 510 阅读 · 0 评论 -
canvas流星雨 数据流
canvas数据直线流动最近做平台优化的时候,有两个涉及到了canvas的需求,初有成效,在此分享下。先看需求效果(如下图 ps:用手机视频做的动图请忽略粗糙的观感)大概的意思是背景图中的城市空中有很多的数据衔接,之前就是单纯的一张效果背景图,现在产品让优化下,添加些动态效果,于是乎就想到了用canvas首先声明以下所需要的变量const numberLine = 56;//光线数量const tail = 400; //光线长度const canvas = document.querySele原创 2021-03-24 15:24:26 · 518 阅读 · 0 评论 -
js光线汇聚 css漂流球 信息流汇聚
接锅的一个优化项目,有一张背景图产品经理觉得太丑太呆想要让他动起来。原图如下观之,确实有点呆板。那怎么动起来呢?除了做gif图就只能是靠强大的css和js了。下面是成品(自制的gif有点渣,关键看效果哈)css漂流球transform是css3最具颠覆性的特征之一,可以实现元素的位移translate、旋转rotate、变形skew、缩放scale。知道了这个那么漂流球就好做多了,只需要定义一下球的运动轨迹@keyframes ball-move { 0% {transform:trans原创 2021-04-27 11:08:45 · 590 阅读 · 0 评论