javascript简单特效—javascript源码下载 收藏 0

html+css+js 黑神话悟空网页设计与制作

html+css+js 黑神话悟空网页设计与制作

网站介绍

1、网站程序：主要使用网页三剑客html+css+javaScript实现网页设计与制作，完成网站的功能设计。制作适用于任何浏览器或设备的精美网站。

2、网站素材：搜集或制作适合网页风格和尺寸的图片，追求优质视觉体验。

3、网站文件：网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件等。

4、网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、Sublime 、HBuilder、Vscode 、Webstorm、Notepad++ 、Text 等任意编辑软件进行编辑修改等操作）。

5、网站布局：主要采用浮动布局。兼容各大主流浏览器、显示效果稳定。

6、网页效果预览：双击html文件或者拖拽html文件到浏览器打开，即可预览当前网页效果。

网站亮点

1、视觉设计：排版布局极简设计，优质的视觉体验等。

2、动效交互：幻灯效果、入场动画、按钮点击、视差功能、锚点功能、图片画廊功能等。

网站文件目录

（1）index.html：首页html；

（2）style：静态资源目录，存放css网页样式文件、js网页特效文件、images网页图片文件等；

（3）css文件夹：存放网页所有css样式表文件文件；

（4）images文件夹：存放网页所有图片资源文件；

（5）js文件夹：存放网页所有网页特效文件；

适用于课程设计、HTML期末大作业等。

34.5K Star！50+个HTML/CSS and JavaScript特效项目！有你想要的！

小长假到来了，大家五一长假有什么节目呢？不妨可以在留言区分享下游玩的攻略！

前段时间在浏览github的时候，无意中发现了这样一个项目！它罗列了50+个基于HTML/CSS跟Javascript实现的小型网页项目，号称是可以让你50+天学习使用不带重样的。老码硬是不厌其烦的把每个项目的demo都点了一遍过去，确实无论是样式还是特效都可谓是美轮美奂，爱不释手！恨不得麻烦就能把它们应用到自己的网页中。那么我们先来看看其中的一些吧，因为实在太多了，本文实在罗列不过来，喜欢的朋友可以到开源地址看看，地址我放文末了！

扩充卡片，点击后显示另外的卡片效果

进度步骤条，点击可进入下一步的特效

酷炫的旋转导航动画

分页动画

动态的登录页模版

漂亮的倒计时特效

等等类似的这样的HTML/CSS Javascript项目有50+个，可以说是应有尽有了，假如你是一个网页设计师，或者美工，亦或者是前端开发者或者想学习前端的后端开发者，我想这些项目都是很不错的资源。都是有直接源码可以参考学习的

针对这些项目，你可以学习到一些设计灵感，你可以学到如何使用网页特效，你可以学习到漂亮的样式效果等等。总而言之，这个项目我个人认为是非常值得学习推荐的，喜欢的童鞋们具体可以去看一下下。我相信你们是可以看有所得的。对了，如果你觉得这篇写的东西对你有用，就分享下吧！

开源地址：https://github.com/bradtraversy/50projects50days

热门开源及工具推荐

ztext – 简单几行代码创建酷炫3D特效文字的开源JS库

把网页上的文字变成酷炫的 3D 风格，还能制作旋转动效，有了 ztext.js，只需要几行代码。

ztext 能做什么

ztext.js 是一个能把常规的平面文字变成 3D 样式的前端开源代码库，让开发者能通过非常简单的 api 创造出酷炫的 3D 文字效果。配合 CSS 动画，可以实现惊艳酷炫的交互效果。

ztext 官网文档截图

ztext.js 库的特点

• 轻量无依赖，支持原生 javascript 和在 Vue / React 中安装使用
• 性能强劲，兼容性强。基于 CSS 的 transform-style 属性实现，超过98%用户的浏览器都支持，而且用于 CSS transform 的动画性能很高
• 功能强大，适用范围广。不仅适用于任何中西文字体，还支持图片/ svg / Emoji 表情符号

支持图片/svg/表情符号

开发上手体验

在开发 PC 端展示型的页面或应用时，运用合适的特效，能让呈现效果印象深刻。把 banner 上的标题变成 3D，搭配设计精美的元素，是一个很见的需求。而常规的方法是使用 canvas，前端需要加载几M大小的 WebGL 库，折腾数小时才能实现。

ztext.js 就是一个适用于这样场景的 js 库，压缩版本大小仅3.8kb，api 也非常简单，而且官网有详细的代码例子，甚至不需要有太扎实的代码基础，copy 改改就能用，快速创建酷炫的 3D 文字特效。配合鼠标悬停的交互，着实能为产品增色不少。

ztext.js 实现 3D 文字的原理

ztext.js 并没有引入真正的第三方 3D 库来实现三维视图，而是通过从 HTML 元素创建图层，来给人一种立体的错觉，基于 CSS 的 transform-style 属性来还原 3D ，视觉效果非常好，作为用户没有发现任何区别，而且很容易结合 CSS3 动画来使用，能够随时调整角度，非常喜欢这种简单酷炫的方式。

免费开源说明

ztext.js 基于 MIT 开源协议在 Github 上开源，任何人都可免费下载用在自己的项目，包括商业用途。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com