![](https://img-blog.csdnimg.cn/20210327104125197.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
js 创意效果大全
文章平均质量分 88
html+css+js的特效或小项目
北极光之夜。
生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命!
展开
-
简易聊天室代码分享 js+socket.io
js+node+socket.io 只是单纯的代码分享哈,不算正式文章~只是单纯的代码分享哈,不算正式文章~只是单纯的代码分享哈,不算正式文章~重要的话说三遍。原创 2022-12-15 10:04:18 · 2002 阅读 · 2 评论 -
小方块上升组成背景特效 html+css+js
一.先看效果:二.详细实现(后面有完整代码):1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后面将通过js快速生成:<div class="container"> <div class="item"></div></div>2.定义全局css样式,.container的css样式: * { margin: 0; padding: 0; bo原创 2021-10-24 15:40:11 · 1606 阅读 · 8 评论 -
面试官:谈一谈js原型链机制? 我:告辞!
一.速识概念: 原型链可谓是面试频考,所以今天带大家快速了解下JavaScript的原型链机制????。说之前,先明确下面基本的概念(名称与从属关系),这是很重要的:名称从属关系prototype通常我们称之为原型,它是函数的一个属性,它是一个对象。_ _ proto_ _相当于一个连接点,它是对象的一个属性,它也是一个对象。二. 原型链机制(建议跟着步骤敲代码): 其次,我们要知道的第一个点是,对象的 __ proto __ 保存着该对象构造函数的prototy原创 2021-08-07 22:37:52 · 5559 阅读 · 30 评论 -
js随机调色板小特效 html+css
话都不多,先上效果:你好呀,这是一个简单的随机取色器调色板的小案例,应该是比较常见的,所以我下面详细说说是怎么实现的~????二.详细实现(最后有完整代码):1.先定义html标签:<button class="btn">???? 换一换 ????</button><div class="container"></div>.btn为换一换按钮;.container为放全部颜色的大盒子;2.定义基本的全局css样式: * {原创 2021-07-26 20:59:39 · 1071 阅读 · 4 评论 -
vue制作优雅的拟态化微立体计算器
一.话不多,先看效果: 这个效果是我在b站看到一个up写的,感觉拟态化微立体效果很简约却又有种优雅的感觉。????而优雅又怎么能缺了我, <( ̄︶ ̄)> ,所以话不多说,自己马上也整了一个,实现并不难,超详细的制作过程如下(最后附上完整代码):二.超级详细的制作过程:1.首先自然是定义html标签(先别理标签里的vue语法),我定义一个父盒子.calculator,然后定义一个span标签放计算结果,其它按钮都用button标签包裹。计算器的布局采用grid布局,所以在每个按钮里绑定属性原创 2021-07-20 15:38:10 · 1593 阅读 · 14 评论 -
超简单的自定义个性化网页鼠标光标样式 html+css+js
话不多,看效果先:好久不见~ 平常,我们网页的鼠标光标默认是一个白色的箭头,而我换成了一个卡通小萝莉,这样子让网页有趣了许多~其实实现是非常非常简单的,如下:二.实现:1.定义img标签,就以一张图片作为鼠标光标,建议为等宽高的图片: <img class="mouse" src="img/logo.png" alt="">2.初始化页面: *{ margin: 0; padding: 0; box-sizi原创 2021-07-16 21:16:03 · 10478 阅读 · 16 评论 -
抖音便捷小空调特效 html+css+js
先看效果(源码在最后):视频效果如下,有音效 B站: 有位粉丝给我分享了这个效果,我觉得挺有趣,然后研究了研究,具体实现如下(代码可能比较多,但都是比较简单的,加油):实现过程:1.定义标签: <!-- 底层盒子 --> <div class="container"> <!-- 空调整体 --> &l原创 2021-05-12 00:27:50 · 6173 阅读 · 124 评论 -
文字烟雾效果 html+css+js
先看效果(源码在最后):网上看到了这个效果,觉得很有趣,所以也实现下,并不难,过程如下:实现过程:1.定义p标签:<p class="text"> 《一个青年艺术家的画像》中的主人公斯蒂芬·迪达勒斯很大程度上象征着乔伊斯自己。 所有作品中,《一个青年艺术家的画像》作为乔伊斯自传性的小说以其独特和高超的艺术手法而受人推崇。 小说中的很多细节取材于乔伊斯的早期生活,主人公斯蒂芬·迪达勒斯与乔伊斯的早年经历一样,在孤独中成长,原创 2021-05-06 14:13:10 · 3889 阅读 · 8 评论 -
滑动导航栏效果 html+css+js
一.先看效果(完整代码在最后):实现并不难,但是初学 js 时拿来练手也是很不错的~二.实现过程(可一步一步跟着实现):1. 先定义标签。container就是底层盒子,a标签就是导航栏的各个标签,line就是滑动的下划线。:<div class="container"> <a href="#" class="label change">HOME</a> <a href="#" class="label">ARTICL原创 2021-05-01 21:45:42 · 5604 阅读 · 6 评论 -
旋转木马轮播图 html+css+js
先看效果(完整代码在底部):能轮播,点击按钮能切图。鼠标位于图片或按钮上停止轮播。 实现(可跟着一步一步实现):原创 2021-03-31 10:19:31 · 6424 阅读 · 16 评论 -
眼睛跟随鼠标转动的小黄人 html+css+js
眼睛跟随鼠标转动的小黄人 html+css+js先上效果(完整代码在最后)实现过程(可跟着一步一步书写)原创 2021-03-28 18:07:49 · 5151 阅读 · 6 评论 -
俄罗斯方块源码分享 html+css+js
效果: 【html+css+js】俄罗斯方块源码分享 这是在网上跟着黑马的视频做的,然后也加了些自己的想法。完整代码:直接复制用的换个背景视频地址就行~核心 js 部分都有解析。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <原创 2021-03-20 22:03:55 · 9407 阅读 · 17 评论 -
X特效 html+css+js
效果(源码在后面): 实现:1. 定义标签,main是底层盒子,video是背景视频,.cover是X:<main> <video src="video/11.mp4" autoplay loop muted></video> <div class="cover"><原创 2021-03-11 21:52:39 · 1346 阅读 · 6 评论 -
打字机效果 html+css+js
效果(最后有源码):实现:1. 定义标签,文本将写在span标签里,文本先在js的数组存着: <h1> <span class="text" ></span> </h1>2. 定义text基本样式:.text{ font-family: 'fangsong'; display: inline-block; position: relative;原创 2021-03-10 14:12:27 · 7680 阅读 · 28 评论 -
仿网易云官网轮播图 html+css+js
效果:可自动轮播,左右箭头按钮和下方小圆点可切图,鼠标移入时停止自动轮播。视频演示: 【html+css+js】仿网易云轮播图 实现(后面有完整源码):1. 定义标签,看注释:<!-- 底层盒子 --> <main id="main"> <!-- 虚化的背景 --> <div class="bg">原创 2021-03-05 14:48:47 · 10097 阅读 · 16 评论 -
霓虹灯绘画板效果 html+css+js
效果:实现:1. 定义标签,.main是底层盒子,.txt是文字,.dot是图中的小圆圈,用js动态大量添加。 <div class="main"> <h1 class="txt">北极光之夜</h1> <div class="dot" style="--color: red;"></div> </div>style="- -color: red;" 这个是var函数的应用原创 2021-03-03 22:53:18 · 5115 阅读 · 11 评论 -
3D酷炫扭动卡片 html+css+js
看效果,动起来~:实现:1. 定义标签,.card是底层盒子,.card2是呈现卡片效果的盒子,然后里面就是一些图片和文字,字体图标的标签了。: <div class="card"> <div class="card2"> <img src="img/haha.gif" alt="haha"> <h2>北极光之夜</h2> <p class="tx原创 2021-02-20 15:48:40 · 5684 阅读 · 19 评论 -
鼠标点击波纹特效 html+css+js
先看效果,最后有完整源码:实现:定义标签: <div class="card"> <img src="3.3.png" alt="x" width="100%"> <h3>北极光之夜</h3> <p > 生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命! </p> </div>卡片和文字的基本样式原创 2021-02-04 15:24:36 · 4014 阅读 · 3 评论 -
放大镜特效 html+css+js
效果:前言:思路是看up主xiao-high的,然后自己也弄了一个。效果有一个缺点就是图片边缘区域放大不了。实现:定义标签:.frame是底层盒子,img是小图片,宽设置100%,跟底层盒子一样。.circle是放大镜,.circle里的img是放在.circle里的大图片。 <div class="frame"> <img src="25.jpg" width="100%"> <div class="circle">原创 2021-02-03 15:16:45 · 1362 阅读 · 3 评论 -
简约时钟特效 html+css+js
一. 先看效果(实时显示当前时间):二. 实现(最后面有完整代码):1. 定义盒子,.clock是整个钟,.hour是时针,min是分针,sec是秒针。 <div class="clock"> <div class="hour"></div> <div class="min"></div> <div class="sec"></div> </div>原创 2021-01-30 17:01:03 · 8609 阅读 · 30 评论 -
轮播图特效 html+css+js
先看效果:轮播图做法有很多,效果也有很多。下面是一种简单的两边图片模糊,中间图片放大的轮播图效果。鼠标点击左边或右边的图片后,它们会移动到中间并变大,其它图片移动到到两边并模糊。点击最右边图片:点击最左边图片:这个效果是只是有鼠标点击后就轮播,至于鼠标不点击也定时自动轮播的效果以后有时间再出一片文章。实现:1. 定义标签,.kuang是最底层盒子,.item是放图片的盒子,可以写任意张图片盒子,我就写了8张图,不少过3张就行,他们都有一个相同类名.item。其中最后3张图分别再给他们一个类原创 2021-01-23 18:40:00 · 3550 阅读 · 12 评论 -
密码显示与隐藏效果 html+css+js
先看效果:前言:一般在我们要输入密码的时候都可以让自己输入的密码显示或者隐藏,所以我做了一个简约的密码框~实现:定义html的输入框的标签,kuang为底层盒子,password为输入框,conceal是那个小眼睛按钮: <div class="kuang"> <input type="password" placeholder=" 请输入密码......" id='password' > <div class="conceal原创 2021-01-21 00:49:44 · 22255 阅读 · 23 评论 -
导航栏滚动渐变效果 html+css+js
先看效果:实现:1.定义导航栏的文字标签:<div class="tou"> <sapn class="logo"> 北极光。</sapn> <ul class="biao"> <li><a href="#"><a href="#">主页</a></li> <li><a href="#">个人简介</原创 2020-12-24 00:35:30 · 22711 阅读 · 48 评论 -
网页黑夜模式白天模式切换 html+css+js
效果:先言:实现是很简单的,就是背景色的切换,用的是最基础的js;1.定义开关按钮标签,‘bai’就是里面那个小圆圈:<div class="kaiguan" > <div class="bai" id="anniu"></div> </div>2.开关按钮的样式: .kaiguan{ position: absolute; top: 20px;原创 2020-12-21 01:55:04 · 15593 阅读 · 34 评论 -
文字图片视差效果 html+css+js
话不多,先看效果:这是我在网上看到的一外国博主的创意,感觉不错,马上自己也敲了一个,果然不错~实现:1.先定义一段文字,多点,起码能超过浏览器的可视区:<section> <p> The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory原创 2020-12-18 01:05:09 · 2886 阅读 · 4 评论 -
网页随处点击出现小火花简约特效 html+css+js
先看效果,效果是比较简约的:原理:效果就是在网页的任何地方鼠标点击后都出现一个小火花~原理并不复杂,就是鼠标点击后生成一个盒子,盒子里放字体图标或文字,然后操控它们的属性变化,最后再让它们消失就好。(还有小火花是我本地的字体图标,可以用自己的方式引入图标,或只写文字也可)实现:1.写body属性,目的是这样就能获取点击的位置: body{ height: 100vh; }2.定义一个小火花第一次出现的初始样式: .tx{ font-family: '原创 2020-12-16 01:06:54 · 6139 阅读 · 13 评论