首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏前端学习笔记

    常见网页特效案例

    案例:网页轮播图 轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 3.图片播放的同时,下面小圆圈模块跟随一起变化。 4.点击小圆圈,可以播放相应图片。 5.鼠标不经过轮播图,轮播图也会自动播放图片。 6.鼠标经过,轮播图模块, 自动播放停止。 小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle--; // 如果circle < 0 说明第一张图片,则小圆圈要改为第4个小圆圈(3) var flag= true; If(flag){flag = false; do something} 关闭水龙头 利用回调函数动画执行完毕, flag = true 打开水龙头 3. window.pageYOffset 页面被卷去的头部 // console.log(window.pageYOffset); // 3

    2.9K40发布于 2020-10-26
  • 来自专栏Baili Blog

    网页添加鼠标点击特效

    给网站添加“富强、民主、和谐”鼠标点击特效 这个特效、我开始想在自己的博客网页上弄一个玩玩,上百度搜的、开始没把关键字打对、导致找了大半天、心灰意冷之际把“富强、民主、和谐”等字样打上果断找到。 function() { $i.remove(); }); }); }); </script> 效果图: 如果咱们还是个编程小白、又正在搭建WordPress博客网站、其实也可以给我们的页面添加这个js特效

    3.5K60编辑于 2023-03-16
  • 来自专栏幻影龙王

    网页鼠标点击特效代码

    我在网页的源代码中找到了这个鼠标点击特效代码,贴在下面。 代码复制到后台代码填写的地方,刷新网页,有漂亮的点击效果 <script> var a_idx = 0; jQuery(document).ready(function($) {     $("body

    6.3K20发布于 2021-09-08
  • 来自专栏睡不着所以学编程

    JavaScript之移动端网页特效(1)

    这三个中的重点是: targetTouches 我们用targetTouches包含着一个数组,里面包含的是每根手指的各种属性和信息,targetTouches[0]可以看到第一个手指的一些属性: 网页拖动元素我们已经学会了 因为是移动端,所以可以使用CSS3的一些方法: 这样移动的话ul就不用加定位了 现在试做一下: 后面接着做无缝滚动 因为是ul在做过渡效果,所以我们给ul添加一个监听事件: 我们让他过渡完成后就打印一个

    3.2K20编辑于 2022-09-20
  • 来自专栏OECOM

    网页开发背景出现下雪特效

    2015-05-22 17:11:09 今天我来给大家介绍一种网页特效,这种网页特效是是背景出现下雪的效果,非常的绚丽。 如果说下雪不太适合自己的网页,需要飘落一些花瓣或心之类的,那么同样可以使用这个特效,只填一张图片即可实现,废话就不多说了,直接了看代码吧。 <! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页下雪特效--落帆亭</title> <script type="text/javascript // flakeColor : "#ff2727" }); }); </script> </head> <body style="background:#<em>3</em>B<em>3</em>B<em>3</em>B 0;padding:0; font:normal 14px/24px 'MicroSoft YaHei';">

    </body> </html> 这就是简单的在html代码里调用下雪的这个特效

    4K10发布于 2020-07-01
  • 来自专栏钻芒博客

    鼠标点击网页出现爱心特效

    --给WordPress网站添加鼠标点击爆炸五颜六色特效--> <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index 99999999;pointer-events:none;"></canvas><script type="text/javascript" src="调用js的地址"></script>关于js调用地址这里放点击特效的 js链接,上边代码里调用的哪种特效,前端就会展示哪种特效点击爱心特效调用地址:https://60yu.w4i.cn/20190502/aixintexiao.js图片点击爆炸圈圈特效调用地址:https

    4.5K20编辑于 2023-05-16
  • 来自专栏畅所欲言

    很漂亮的网页飘落特效代码

    代码来自以前的写的一篇文章,使用直接把代码复制粘贴到想要显示的网页里的body标签里即可,图片链接最好更新为你自己的,本人不保证稳定性,jQuery库使用的bootcss的cdn加速,如已调用可删除,怕外链失效就全本地化

    3.7K20发布于 2019-03-01
  • 来自专栏森屿暖树

    前端特效学习3

    > </body> </html> css代码 :root { /** 白天样式 **/ --blue-background: #C2E9F6; --blue-border: #72cce3;

    41720编辑于 2022-03-23
  • 来自专栏终身学习者

    网页特效】11 个文本输入和 6 个按钮操作 特效

    文本输入特效 1.power-mode-input PowerModeInput 可以让你的文本输入框更引人注目。 3.typewriterjs 一个简单而强大的原生javascript插件,具有很酷的打字机效果。 地址:https://github.com/tameemsafi/typewriterjs ? 2. vue-particle-effect-buttons 爆发粒子特效按钮组件。 3.nativescript-shine-button NativeScript插件,可为按钮添加发光效果。 6.css-ripple-effect css-ripple-effect 是一款使用纯CSS3制作的炫酷扁平风格按钮点击波特效

    3.4K40发布于 2020-09-03
  • 来自专栏大前端(横向跨端 & 纵向全栈)

    原生JS实现网页导航条特效

    给大家分享一个用原生JS实现的比较实用的网页导航条特效,当页面滚动时,导航条会发生变化,效果如下: ? 以下是代码实现,欢迎大家复制粘贴和收藏。 <! UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS实现网页导航条特效

    9.3K10发布于 2020-11-26
  • 来自专栏前端Q

    网页特效】丝滑的 macOS Dock效果

    今期我们又来做一些花里胡哨的特效,就是模仿 macOS 的 Dock 这个图标放大的效果: ? 01.gif 如果是单纯的逐个图标放大,其实就没什么难度。 04.png 好了,样式的部分都差不多了,接下来就是实现特效的部分。 动画的原理 首先我们了解一下这个效果的原理,举例我们将游标移动到第四个图标上的时候,它会放大。

    2.1K20发布于 2021-07-01
  • 来自专栏算法与编程之美

    前端|手风琴--抽屉式网页特效

    问题描述 我们在浏览网页时或者翻转页面时,经常会看到很多精美的效果的效果。其中,抽屉式网页效果比较常见,它主要由图片和文字通过添加js来实现。 抽屉式网页通过移动鼠标来实现页面的切换,通过改变文字和图片而展现不同的界面,它非常实用而且实现简单。 解决方案 制作抽屉式页面时,主要会用到HTML,CSS和JavaScript。 (3)通过js来实现图片的移动。 制作过程: (1)为网页添加背景图片,并定义一个容器wrap来规定网页主要内容的大小和它占据的位置,如图1所示。 (3)引入jquery文件,并添加js效果。 图3 本篇文章是通过网上视频教学来完成的,在其中加入了我自己认为的重点和理解,如有错误还请指正。 END 实习主编 | 王楠岚 责 编 | 江南沐雪

    4.1K10发布于 2020-08-04
  • 来自专栏前端实验室

    sao气十足的网页特效,让你的网页“动”起来

    不知道大家在浏览网站和博客的时候有没有见到过非常有意思的页面特效呢?今天大师兄就带给大家几个有趣的特效,而且不用写代码,引入就能使用 看板娘 引入方式 <! --给网站添加鼠标点击爆炸五颜六色特效--> <script src="http://zhouql.vip/cdn/blast.js"></script> 鼠标点击自定义文字 引入JQuery <script ="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>樱花特效 /images/4f6f6f316cde4398d201cd67e44ddea3.svg" alt=""> <img class="t2" src=". padding-left: 8px; margin-top: 18px; border-radius: 2px; outline: none; } #app form p:nth-of-type(<em>3</em>)

    1K30编辑于 2022-12-02
  • 来自专栏小狐狸说事

    js代码网页背景粒子特效代码

    声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

    12.1K50编辑于 2022-11-28
  • 来自专栏前端大合集

    学习Particles.js 给网页来点粒子特效

    options: { maxParticles: 200, color: '#9400D3' 属性值类型 默认值 属性详解 selector string 画布元素的CSS选择器 maxParticles integer 100 可选:最大颗粒量 sizeVariations integer 3

    1.8K10编辑于 2024-07-29
  • 来自专栏小狐狸说事

    b2主题中添加网页标题崩溃欺骗搞怪特效标题崩溃特效

    b2主题中添加网页标题崩溃欺骗搞怪特效标题崩溃特效 ---- 效果 离开标签页会提示网页崩溃,点回来复原。 安装 拷贝代码到子主题的child.js里。 document.addEventListener("visibilitychange", function() { if (document.hidden) { document.title = "喔唷,网页崩溃啦 Σ(っ °Д °;)っ"; clearTimeout(titleTime) } else { document.title = "(/≧▽≦/)网页好啦!"

    94530编辑于 2022-11-17
  • 来自专栏蜉蝣禅修之道

    ubuntu 11.10 3D桌面特效及其窗口特效设置

    之后可以继续设置窗口效果,只需要在窗口特效中的那几个特效前打勾并且等待界面刷新完成即可,记住相关特效的启动按键设置及其其他按键设置。 最后如果你的特效没有匹配成功,而且导致了桌面上的工具栏消失,那么你可以重启并且选择ubuntu 2D来恢复2D效果。没有配置成功的原因可能是由于显卡问题或者驱动问题,可能你的系统需要更新。

    1.9K20编辑于 2022-04-02
  • 来自专栏james大数据架构

    网页超过一屏时自动浮动在网页最上方的图层特效

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>adsorption</title> <style type="text/css"> *{ margin: 0; padding: 0; } .header-wrap{ width: 100%; } .header-hd{ width: 980px; height: 150px; margin: 0 auto; background-color: #c

    1.1K50发布于 2018-01-22
  • 来自专栏全栈程序员必看

    CSS3 transition 渐变特效

    transition的使用需要和 hover 搭配使用 transition:属性 持续的时间(s) ease-in/ease(曲线规律) 多少秒后开始(s) transition:all 持续时间(s) // 简易写法

    61210编辑于 2022-09-14
  • 来自专栏JAVA

    新春烟花特效 HTML:打造你的节日专属网页

    如何用HTML和JavaScript在网页上实现炫丽的烟花特效呢?本文将从零开始,带领小白用户创建一个简单却生动的烟花效果。 引言 烟花特效是许多节日主题网页中的亮点,为用户带来愉悦的视觉体验。通过学习和实现这个效果,你不仅可以提升自己的前端开发技能,还能让你的网页更具吸引力。 本文将结合HTML5的 <canvas> 元素与JavaScript,手把手教你如何实现一个动态烟花特效。 新春烟花特效 HTML:打造你的节日专属网页 正文 1. 3. 添加样式 我们需要为 <canvas> 设置样式,让它占满整个屏幕。 实现烟花特效 下面是实现烟花特效的主要代码。

    1.2K10编辑于 2025-01-20
  • 领券