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

    常见网页特效案例

    案例:网页轮播图 轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,下面小圆圈模块跟随一起变化。 4.点击小圆圈,可以播放相应图片。 ); var focus = document.querySelector('.focus'); var focusWidth = focus.offsetWidth; // 2. var timer = setInterval(function() { //手动调用点击事件 arrow_r.click(); }, 2000); ​ }) 2. document.querySelector('.c-nav'); var lis = c_nav.querySelectorAll('li'); // 2.

    2.9K40发布于 2020-10-26
  • 来自专栏小狐狸说事

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

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

    94530编辑于 2022-11-17
  • 来自专栏小狐狸说事

    7b2美化-网页背景添加粒子特效

    7b2美化-网页背景添加粒子特效 ---- 代码放入后台-底部html标签 <script src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js

    1.4K20编辑于 2022-11-16
  • 来自专栏睡不着所以学编程

    JavaScript之移动端网页特效(2) swiper的使用(多图)

    这节课学习的是移动端的返回顶部,当我们页面滚动到内容以后,就出现返回顶部的标志,只要我们点击就能返回到页面的顶部.

    1.3K10编辑于 2022-09-20
  • 来自专栏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]可以看到第一个手指的一些属性: 网页拖动元素我们已经学会了

    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 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
  • 来自专栏终身学习者

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

    文本输入特效 1.power-mode-input PowerModeInput 可以让你的文本输入框更引人注目。 地址:https://github.com/lindelof/power-mode-input image.png 2.TextInputEffects 简单的样式和效果,可增强文本输入交互。 ---- 按钮操作特效 1.ElasticProgress ElasticProgress 可以创建一个有弹力效果的进度条。 2. vue-particle-effect-buttons 爆发粒子特效按钮组件。 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实现网页导航条特效 space-between; transition: 0.6s; padding: 40px 100px; z-index: 2; font-weight: 700; color: #fff; text-decoration: none; font-size: 2em ; text-transform: uppercase; letter-spacing: 2px; transition: 0;

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

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

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

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

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

    问题描述 我们在浏览网页时或者翻转页面时,经常会看到很多精美的效果的效果。其中,抽屉式网页效果比较常见,它主要由图片和文字通过添加js来实现。 (2)使用overflow标签,使得多余的图片部分隐藏。 (3)通过js来实现图片的移动。 制作过程: (1)为网页添加背景图片,并定义一个容器wrap来规定网页主要内容的大小和它占据的位置,如图1所示。 图1 (2)在wrap里面添加ul列表,在列表中添加主要内容的图片和文字,并为之设置CSS效果。使用overflow属性规定当内容溢出元素框时发生的事情。 图2 ? 图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>樱花特效

    <form action="" method="get"> <button></button> <h2> /images/4f6f6f316cde4398d201cd67e44ddea3.svg" alt=""> <img class="t<em>2</em>" src=".

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

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

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

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

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

    height: 100vh; background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9

    1.8K10编辑于 2024-07-29
  • 【vue】vue2 粒子特效

    Vue粒子特效使用教程(vue-particles插件) 具体实现步骤 1.安装插件 npm install vue-particles -S 2.在main.js中注册 import Vue 是否有hover特效。 hoverMode: String类型。默认true。可用的hover模式有: “grab”, “repulse”, “bubble”。 是否有click特效。 clickMode: String类型。默认true。 可用的click模式有: “push”, “remove”, “repulse”, “bubble” 注意 1.vue-particles双标签中不能包含其他内容 2.vue-particles作为背景可能会和其他元素发送堆叠问题

    22010编辑于 2025-12-15
  • 来自专栏java学习java

    java 11 新特效解读(2

    全新的HTTP 客户端API HTTP,用于传输网页的协议,早在1997年就被采用在目前的1.1版本中。直到2015年,HTTP2才成为标准。 HTTP/1.1和HTTP/2的主要区别是如何在客户端和服务器之间构建和传输数据。HTTP/1.1依赖于请求/响应周期。HTTP/2允许服务器“push”数据:它可以发送比客户端请求更多的数据。 这使得它可以优先处理并发送对于首先加载网页至关重要的数据。 它将替代仅适用于blocking模式的HttpURLConnection(HttpURLConnection是在HTTP 1.0的时代创建的,并使用了协议无关的方法),并提供对WebSocket和HTTP/2的支持

    51820编辑于 2023-10-15
  • 来自专栏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
  • 领券