最近很多小伙伴留言想要星空和流星特效,于是写了这篇文章准备介绍如何部署。 image.png 1....创建JS文件 在butterfly/source/js/创建一个universe.js文件,或者添加到自己的js文件中 function dark() {window.requestAnimationFrame...window.requestAnimationFrame(t)}()}; dark() image.png 代码的这一部分要求data-theme也就是主题为dark暗色主题,因此仅在暗色主题生效,随后将js...CSS样式 /* 背景宇宙星光 */ #universe{ display: block; position: fixed; margin: 0; padding: 0; border
前言 最近真是越来越对CSS感兴趣了,于是再来整一手,夜晚的星星,再配合上皎洁的月光,这唯美的星空,它来了! 今天带领大家,用CSS实现一下,这美丽的星空。...开始实现星空 我是找了张图片,这毕竟功力有限,目前还不能人造星~,下面说一下如何将它放置在夜空中,并实现眨眼睛的效果: 运用了一个span标签,将此图片作为其背景图,来生成星星: var screenW...var rate = Math.random() * 1.5; span.style.animationDelay = rate + 's'; 现在来看看我们美丽的星空吧~: 星空.gif 最后再给星星加一个...做法:将月亮放到一个容器中,用容器来做移动的特效,月亮本身只关注光辉就好。
效果图如下: JS代码如下: 将上面js代码添加到网站底部即可!
前言 一款jQuery+CSS3的文字背景粒子动画特效,一共6种粒子效果,每种文字背景的粒子效果都不同,有漂浮的有坠落的等等。 0x001 特效演示 图片 0x002 Fires 特效 1....JS 代码 function fire() { $.each($(".particletext.fire"), function(){ var firecount...JS 代码 function lines() { $.each($(".particletext.lines"), function(){ var linecount...JS 代码 function hearts() { $.each($(".particletext.hearts"), function(){ var heartcount...JS 代码 function bubbles() { $.each($(".particletext.bubbles"), function(){ var bubblecount
看了很多博客都有自己的粒子特效背景,参照网上的代码,给handsome主题添加了粒子背景,效果如下: ?...blue_js效果 使用方法: 点开外观设置,开发者设置,自定义输出body 尾部的HTML代码,将下面JS代码复制进去 !
background: rgba(255, 255, 255, 0.2); } $(function(){ FSS("containergaofuxi", "output"); $(".color li").mouseover
今天介绍两款插件,一个可以给代码加特效,给写代码增添一点乐趣;一个可以更换自己喜欢的背景。 外加一个自动补全不区分大小写的配置。...效果 插件 + 更换后的背景 视频内容 自动补全区分大小写前后对比 ? ?...插件安装 代码特效插件-Power mode II 依次点击“File>Settings>Pluging” 搜索框搜索插件 注:搜索插件可能会搜索不出来,多试几次,可能是 pycharm 版本问题吧。...背景更换插件-Background Image Plus ? 下好后重启 pycharm,特效插件就可以看到效果了,接下来按照下面步骤更换背景 ? ?...图片路径 背景透明度 背景样式 确定 不区分大小写 ? Setting>Editor>1>2>3 步骤2,是把 √ 取消掉 不区分大小写 ?
2015-05-22 17:11:09 今天我来给大家介绍一种网页特效,这种网页特效是是背景出现下雪的效果,非常的绚丽。...如果说下雪不太适合自己的网页,需要飘落一些花瓣或心之类的,那么同样可以使用这个特效,只填一张图片即可实现,废话就不多说了,直接了看代码吧。 网页下雪特效--落帆亭 <!...,当然这个效果并不是这么简单,还需要有一点点的js控制,这里我将他封装在了一个js文件里,只需要在使用时引入即可。
这些商家在这个平台上发布自己的活动,这些活动需要程序员来使用网页代码来实现,下面我来说一下微信平台上通过向上滑动屏幕实现整个页面变换的特效,先来看一下代码吧: 微信手机端滑动特效.../zepto.min.js"> <script type="text...是用来放置每个滑动页面的主<em>背景</em>,如果需要在每个<em>背景</em>上添加其他元素的话,可以在相应的div下添加即可。...这个<em>特效</em>引入了一些其他的文件,分别为reset.css、animations.css、layout.css、page.css、zepto.min.<em>js</em>、touch.<em>js</em>和index.<em>js</em>,其他的文件没有必要说
SegmentEffect 地址:https://github.com/codrops/SegmentEffect 背景分割装饰特效。...8.ImageGridMotionEffect 地址:https://github.com/codrops/ImageGridMotionEffect 为背景网格的图像提供运动悬停特效。...9.jquery.adaptive-backgrounds.js 地址:https://github.com/briangonzalez/jquery.adaptive-backgrounds.js adaptive-background.js...https://github.com/NiklasKnaack/jquery-warpdrive-plugin query-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的...这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动。 12.RainEffect 使用WebGL在不同场景下的一些实验性降雨和水滴效应。
一个轻量级的创建粒子背景的 JavaScript 库。 简介 particles.js用来在 web 中创建炫酷的浮动粒子特效。它调用的粒子动画效果,让网页背景更有科技感。颜色还可以任意切换哦。...我们先来看一下效果图: 标准版: 星空版: 泡泡版: 下雪版: 利用它能做些什么呢? 做网站一个好的UI界面很重要,如果在背景上加上炫酷的粒子特效会使网页更加大气。...particles.js插件实现的这种散射的原子颗粒特效就是不错的选择。 尤其在页面没有适合的背景时,它能立即提升网站的格调。比如说: 嗯,效果挺不错的吧。...注意两个点: particles.js是粒子动画主要的库,我们肯定是要引入的 粒子配置(json格式) Demo中的style.css 我们也可以引入,可以在css中设置你喜欢的背景颜色哦~ 下面介绍重中之重...(更多配置,请查看GitHub最新版本) 前端实验室还有更多好玩使用的开源项目,下方公众号后台回复particles获取大师兄给大家准备好的星空背景登陆页面Demo!
什么是Canvas 看见本站动态背景了吗?它就是基于Canvas技术实现的。 Canvas 是 HTML5 中一个新特性,开发者绘制一系列图形。...通过和JavaScript配合,可以使静态的图形动起来~ 如何自定义Canvas背景? 首先,需要将要引入的背景文件,放入网站的目录下,并且保证可以读取。...然后进入主题设置,自定义JS,中填入下面的代码: #例如 同款主题设置全透明CSS样式: .post{ background: rgba(255, 255, 255, 0.8); } 如果还要修改侧边栏样式
直接上代码 放到你的script 标签中 具体效果参考博客页面 (function($){ $.fn.snow = function(options){ v...
给大家分享一个用原生JS实现的翻书效果图,效果如下: 实现代码如下,欢迎大家复制粘贴。 原生JS实现翻书特效...800px) rotateY(-180deg)'; setTimeout(function () { // 翻页后瞬间更换下一页的背景...rightPage.style.transform = 'perspective(800px) rotateY(0deg)'; // 更换翻页纸正面背景...topNode.style.backgroundImage = 'url(images/' + (index % 2 + 1) + '.jpg)'; // 更换翻页纸背面背景
今天给大家分享一个用CSS 3.0扭曲实现的滚动倾斜背景特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏。 CSS 3.0扭曲实现的滚动倾斜背景特效
之前一直注重模块的视觉滚动特效以至于忽略了图片背景的视觉差滚动特效,今天把小清新主题更新了图片背景视觉差特效,记录下代码,有喜欢的自己参考教程自己动手操作下。...这是在网络上找到的一款超级轻量级的jQuery视觉滚动特效代码,该插件使用CSS background-position属性和简单的js代码来完成页内滚动时的背景图片视觉差效果,效果演示可以前往 小清新主题...教程代码如下: 首先我们需要在html中添加视觉差特效的class类和data-paralasic属性,例如: ...JS代码: 复制如下代码,放在js中即可或者直接放在网页的底部(记得添加代码), jQuery(window).bind('scroll', function () ...是不是非常简单,其实就是简单的两步,复制js代码修改class类的名称,然后在div框架添加data-paralasic属性就行了,大功告成,闪人。。。
给大家分享一个原生JS实现的书本立体特效,效果如下: 实现这个特效需要的三张图片如下: 第一张图:0.jpg 第二张图 1.jpg 第三张图:3.jpg 实现代码如下,欢迎大家复制粘贴。 原生JS实现书本立体特效 <style type
给大家分享一个用原生JS实现的涟漪按钮特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏。 原生JS...实现按钮涟漪特效 * { margin: 0; padding:
分享一个用原生JS实现的文字滚动效果,这种效果通常用在网页中一些局部展示信息,如新闻、动态、充值记录等,效果如下: ? 实现代码如下: 原生JS...实现目录滚动特效 body { font-size: 12px; line-height: 24px
领取专属 10元无门槛券
手把手带您无忧上云