很哇塞的网页特效
文章平均质量分 63
分享一些很哇塞的网页特效
_老杨_
程序猿老杨头
展开
-
很哇塞的网页特效之摩天轮相册
仿摩天轮的特效相册页面。原创 2023-02-14 11:25:20 · 226 阅读 · 0 评论 -
很哇塞的网页特效之字符雨特效
本篇分享的字符雨特效主要通过JS实现。 实现步骤:1、页面分为50列( 可根据样式中设置的字体大小调整列数,确保铺满整个页面),每列随机选取50个字符。2、字符置于 <span> 标签中展示,设置span样式 display:block 确保字符竖向按列排布。3、初始随机指定每一列中设置下雨效果的字符列表长度和起始位子,即雨点起始位置和雨线长度。4、在requestAnimation...原创 2021-12-14 09:59:14 · 4497 阅读 · 0 评论 -
很哇塞的网页特效之动态阴影文字
本篇分享的动态阴影文字特效通过CSS动画实现,没有JS代码控制。此效果原理比较简单,只是用到了平时较少使用的属性:-webkit-background-clip:指定背景的剪切行为,可设置的值有(border, content,padding,text)。-webkit-text-fill-color:设置文字的填充色。页面效果如下图所示:主要实现步骤:1、先使用伪...原创 2021-11-22 23:03:36 · 467 阅读 · 0 评论 -
很哇塞的网页特效之动态线条文字
本篇分享的动态线条文字特效通过Javascript进行canvas绘画实现。能够在文字范围内动态的随机生成散点。短距离散点之间进行连线,散点在文字范围内随机方向运动,产生动画效果。如下图所示: 上图效果是散点数量递增时的效果,散点数越多越能清晰的分辨出文字。 主要步骤有 1、使用黑色背景白色前景在画布上书写文字,并将画板数据保存起来。 ctx.beginPath(); ctx.fillStyle = "#000"; /...原创 2021-11-20 18:06:41 · 1394 阅读 · 0 评论 -
很哇塞的网页特效之字符串切换
本篇分享的字符串切换特效通过CSS动画实现,没有JS代码控制。 此效果属于相对比较常可能用到的特效。效果如下图所示:切换的字符串用无序列表ul保存,CSS动画通过控制ul的显示位置达到切换效果: <div class="container"> <span class="text"> 新年运势 </span> ...原创 2021-11-20 17:04:33 · 365 阅读 · 0 评论