网页设计中超炫的3D闪光粒子效果就是这么做出来的！
引言：在网页设计当中，如果希望做出一些超炫的banner图设计。那必不可少的需要用到ps特效制作。这节课您将学习如何结合不同的图像，用卡通的形象创建非常漂亮的闪烁文字效果的3D风格标志！渲染文字整体及局部的颜色和光影，得到非常绚丽的效果！
1、新建一个1800 * 1350像素的文件，分辨率为300像素。确定好双击背景图层填充图层样式，设置渐变叠加，参数及效果如下图。
2、输入自己喜欢的文字，文字用黑色。字体最好粗一点，这样效果更明显。
3、把文字栅格化图层，然后复制一层，把前背景色设置为白黑，如下图。
4、对文字副本执行：滤镜 & 纹理& 彩色玻璃，参数及效果如下图。
5、选择菜单：选择 & 色彩范围，然后用吸管吸取黑色部分，如下图，确定好得到想要的选区。
6、保持选区，再选择菜单：选择 & 调整边缘，参数设置如下图，记得勾选输出选项中的颜色净化。
7、确定好得到一个带有蒙版的图层，白色边线都消失了。
8、双击图层添加图层样式，设置图案叠加，参数及效果如下图。
9、把前，背景颜色设置为黑白，如下图。
10、再执行：滤镜 & 纹理 & 彩色玻璃，参数设置如下图。
11、创建色阶调整图层加强一下对比，确定好按Ctrl + Alt + G 创建剪贴蒙版。
12、把前景色设置为白色，选择画笔工具选择好合适的笔刷，再调出画笔设置面板，设置如下图。然后在文字周围添加一些白色的小点，需要不断调整画笔的不透明度。
13、对小点图层执行：滤镜 & 纹理 & 彩色玻璃，如下图。
14、把小点及文字图层合并，再复制一层，对副本执行：3D & 从图层创建3D明信片。
15、旋转角度并加上透视效果，参数如下图。确定后新建一个图层，把新建图层与文字图层合并。
16、给当前图层添加图层样式，设置投影机渐变叠加，参数及效果如下图，确定后把填充改为：0%。
17、把当前图层复制一层，移动原图层的下面，添加图层蒙版，用黑白渐变拉出下图所示的效果。
18、修改一下投影的颜色，去掉渐变叠加，确定后把填充改为：0%。
19、把原文字图层复制一层，把填充及不透明度都改为：100%，并清除图层样式，把混合模式改为“叠加”如下图。
20、把当前图层复制一层，然后添加图层样式，选择“斜面和浮雕”及等高线，参数设置如下图，确定后把填充改为：0%，，效果如下图。
21、把图层混合模式改为“滤色”，效果如下图。
22、创建色阶调整图层，参数设置如下图，确定好按Ctrl + Alt + G 创建剪贴蒙版。
23、为了增强效果，把当前文字图层复制一层，转为智能对象后适当高斯模糊处理。
24、根据需要渲染一下文字颜色。
25、在背景图层上面新建一个图层，加上一些斜纹背景如下图。
26、执行：滤镜 & 扭曲 & 选择扭曲，如下图。
27、把混合模式改为“正片叠底”，不透明度改为：25%。
28、把当前图层复制一层，添加图层蒙版，用黑白渐变拉出下图所示的效果。
最终效果：
Adobe讲师PS入门到精通全集
简介：由Adobe官方讲师：万晨曦老师亲自录制，幽默风趣，通俗易懂的讲解，让学习软件从此不再是头疼枯燥的事情，好评如潮，备受追捧的一套Photoshop入门教程！
戳“阅读原文”一元快速轻松入门PS！
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点做效果图时，大家用的是啥软件？
您的位置： >>
>> 话题内容
您是第 4491 位浏览者 / 有 6 条回复
6年前 发表1F
我用的是FIREWOKS，感觉挺方便的，但是有的效果，还需要在PS里面才能完成，感觉也挺麻烦的，大家说说，你们是用的什么？
6年前 发表2F
PS 没有第二选择~
6年前 发表3F
楼上说的，就是我要说的
6年前 发表4F
樓上的樓上說的，就是我要說的...
6年前 发表5F
往上数三层，就是我想说的。。。
6年前 发表6F
楼上+10086
。。。。。。。。。。。
6年前 发表7F
@#￥……&*自动回复：有楼上，有真相#￥%……&）（*&……%
站酷讨论组
你未加入讨论组，无法在本组发言！
简介：网页设计相关的讨论、交流……
============================================
◆ 拒绝无意义的话题及回复。
◆ 拒绝成品设计求助（如作图、改图等）。
◆ 拒绝任何形式的硬软广告。
◆ 企业招聘及项目合作，请发布至论坛相关版块。
============================================
我们都是各个行业的设计师，为了更好的交流设计、分享快乐而聚在一起。因此也请大家配合我们，共同维护良好的交流环境。：）这个网页的效果怎么做出来_百度知道
这个网页的效果怎么做出来
鼠标悬停到某张图片上就弹出两个链接按钮
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
把那两个按钮设置成隐藏，然后你鼠标要放的那个地方你hover，在这个hover里面写两个按钮的display:block
能贴下代码吗？还有，为什么这个网页不能保存到本地，点保存后没反应
不能保存到本地这个我不清楚，不过你保存到本地效果也不好，因为图片什么的保存不下来，你还不如直接在网页里查看源代码代码我稍后给你发过去，稍等，手机里面写代码不方便
你试试，我没有测试过
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。请问这样的网页效果是通过什么源码实现的？_百度知道
请问这样的网页效果是通过什么源码实现的？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
是谷歌的一个插件你直接查看源代码 照搬过来不就能用了
采纳率：31%
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。页面效果简单做（一）
简介：有自己写的，也有网上看到的，即使是别人写的也会对其改动，或添加注释，并保持统一的编码风格，便于阅读。目标是不用第三方库即可完成（浏览器原生），简单做，能够阐述逻辑和原理清楚即可，因此可能考虑不是最周详的，包括跨浏览器的问题，如果你打算使用在项目中使用最好测试清楚，还可能要进一步修改之。注意：打算提供在线例子的，但短时间内没有静态空间，所以例子的事情要稍等一阵子。已提供在线例子。1、简易拖放效果使用了 DOM 1 的方式登记事件，其实无必要 DOM Level 2 的 addEventListener，因为根据鼠标事件，同一时刻通常 document 只有一个 mousemove/mouseup 事件。&meta charset="utf-8" /&
&title&拖放 DD&/title&
SimpleDrag = function(el) {
this._x = this._y = 0;
el.onmousedown = delegate(this, this.start);
this.move = delegate(this, this.move);
function delegate(object, fn){ // 绑定当前 this，并且修正浏览器兼容问题 e ||
window.event
return function(e) {
return fn.call(object, (e || window.event));
SimpleDrag.prototype = {
start : function(e) {
this._x = e.clientX - this.el.offsetL
this._y = e.clientY - this.el.offsetT
document.onmousemove = this.
document.onmouseup = this.
move : function(e) {
this.el.style.left = e.clientX - this._x + "px";
this.el.style.top
= e.clientY - this._y + "px";
// 停止拖动
stop : function() {
document.onmousemove = document.onmouseup =
.dragable{
background-color:#C4E3FD;
width:50 height:50
.dragEl_1{
.dragEl_2{
&div class="dragable dragEl_1"&1&/div&
&div class="dragable dragEl_2"&2&/div&
new SimpleDrag(document.querySelector(".dragEl_1"));
new SimpleDrag(document.querySelector(".dragEl_2"));
2、上下滚动内容原理是取出最尾元素放到前头。&html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&上下滚动内容&/title&
&ul id="scroll"&
&ol id="scrollA"&
* @param {Element} el 列表元素
* @param {Number} interval 动画时间间隔
* @param {Boolean} canstop 是否可以鼠标移入时候暂停动画
function ScrollContent(el, interval, canstop) {
interval = interval || 3000;
function scroll() {
var lastEl = el.firstC
while (lastEl.nodeType != 1)
// 找到最后一个元素
lastEl = lastEl.nextS
el.appendChild(el.removeChild(lastEl)); // 把最后一个元素放到前头
var t = window.setInterval(scroll, interval);
if (canstop) {
el.onmouseover = function() {
if (t) window.clearInterval(t);
el.onmouseout = function() {
t = window.setInterval(scroll, interval);
new ScrollContent(document.getElementById('scroll'), 1000);
new ScrollContent(document.getElementById('scrollA'), 500, true);
&/html& 3、左右滚动内容原理跟前者一样，只不过是把元素换为字符串，应该是更简单的了。&meta charset="utf-8" /&
&title&水平字幕滚动&/title&
&div class="content1"&这是一段滚动的文字&/div&
&div class="content2"&这是一段滚动的文字&/div&
* @param {Element} el 列表元素
* @param {Number} interval 动画时间间隔
* @param {Boolean} canstop 是否可以鼠标移入时候暂停动画
function ScrollContent_Hoz(el, interval, canstop) {
interval = interval || 500;
var arr = el.innerHTML.split("");
function scroll() {
arr.push(arr.shift());
el.innerHTML = arr.join("");
var t = window.setInterval(scroll, interval);
if (canstop) {
el.onmouseover = function() {
if (t) window.clearInterval(t);
el.onmouseout = function() {
t = window.setInterval(scroll, interval);
new ScrollContent_Hoz(document.querySelector('.content1'));
new ScrollContent_Hoz(document.querySelector('.content2'), null, true);
4、多级联动下拉菜单联动本身并无多大难点，只是 onchange 事件的运用即可。值得一提的是这个演示了日历控件所涉及的日历生成算法——当然这是后话了。&meta charset="UTF-8"&
&title&联动 Select 下拉&/title&
&select id="year"&
&option value="0"&--请选择--&/option&
&/select&年
&select id="month"&
&option value="0"&--请选择--&/option&
&/select&月
&select id="day"&
&option value="0"&--请选择--&/option&
&/select&日
function initSelect(selectEl, i, end) {
selectEl.length = 1;
for (; i &= i++) {
selectEl.add(new Option(i, i), null);
} catch (e) {
selectEl.add(new Option(i, i));
var year = document.getElementById("year");
var month = document.getElementById("month");
var day = document.getElementById("day");
initSelect(year, );
year.onchange = function() {
if (this.value != 0) {
initSelect(month, 1, 12);
month.length = 1;
day.length = 1;
month.onchange = function() {
if (this.value != 0) {
var m30 = {
if (this.value == 2) { // 二月份特别处理
if (isLeapYear(year.value))
initSelect(day, 1, 29);
else initSelect(day, 1, 28);
} else if (this.value in m30) // 三十天的月份
因为2、4、6、9、11月份都是30天，如果把它们放在一个数组中，那么还要遍历来判断是否相等，则比较麻烦了，于是在这里把这些都当成对象来处理，使用 in 判断即可
initSelect(day, 1, 30);
initSelect(day, 1, 31);
} else day.length = 1;
// 判断闰年的条件：能被4整除且不能被100整除 或 能被100整除且能被400整除
function isLeapYear(y) {
return (y % 4 == 0 && y % 100 != 0)
|| (y % 100 == 0 && y % 400 == 0);
5、Tab 多选项卡主要控制 tab display:block/none 来显示与隐藏，原理比较简单。使用方法：new SimpleTab(document.querySelector('.tab2')).jump(0);。代码比较长，所以只贴 JS 部分。完整代码参见 HTML。/////////////////////--------------------公共方法 -------------START
var emptyStr = '';
// 允许用户输入 .abc/abc 的 CSS Selector，推荐 abc 即可
function removeFirstDot(str){
if(str && str.charAt(0) === '.'){
var arr = str.split(emptyStr);
arr.shift();
return arr.join(emptyStr);
* 增加元素样式。
* @param {String} cls
Element.prototype.addCls = function (cls) {
cls = removeFirstDot(cls);
var _cls = this.classN
if (_cls.indexOf(cls) === -1) {
// not found, so add it
if (_cls === '')this.className =
else this.className += ' ' +
* 移除元素样式。
* @param {String} cls
Element.prototype.removeCls = function (cls) {
cls = removeFirstDot(cls);
var _cls = this.classN
var reg = new RegExp('\\s?\\b' + cls + '\\b', 'ig');
if (reg.test(_cls))
this.className = _cls.replace(reg, '');// remove it
/////////////////////--------------------公共方法 -------------END
SimpleTab = function(container) {
var ul = container.querySelector('ul');
this.buttons = ul.children, // tab候选栏strip
this.tabs = container.querySelector('.content').
ul.onclick = onTabChooserPressHandler.bind(this);
* 跳到指定的 tab，仿佛好象点击那样
* @param {int} index
SimpleTab.prototype.jump = function(index){
var btn = this.buttons[index];
onTabChooserPressHandler.call(this, {
target : btn,
currentTarget : this.el.querySelector('ul')
var onPressed_ClassName = 'selected';
// 登记的单击事件是整个 tan panel
function onTabChooserPressHandler(e) {
// 搜索 el 下的 li 元素，到容器为止
var el = e.
if (el.tagName != 'LI')
var buttons = e.currentTarget.children, // tab候选栏strip
tabs = e.currentTarget.parentNode.querySelector('.content').
!buttons.length && console.log('该控件未发现任何 strip。');
for (var nextIndex = 0, j = buttons. nextIndex & nextIndex++)
if (buttons[nextIndex] == el)
// 获取 nextIndex
// 查找与 index 相等的 item 设置其高亮，否则移除样式。
var btn, showT
for (var i = 0, j = buttons. i & i++) {
btn = buttons[i], showTab = tabs[i];
if (nextIndex == i && btn.className.indexOf(onPressed_ClassName) == -1) { // 找到目标项
btn.addCls(onPressed_ClassName);
showTab.addCls(onPressed_ClassName);
this.currentIndex = // 保存当前游标
} else if (btn == el && btn.className.indexOf(onPressed_ClassName) != -1) {
// 已在当前项
} else if (btn.className.indexOf(onPressed_ClassName) != -1) {
btn.removeCls(onPressed_ClassName);
showTab.removeCls(onPressed_ClassName);
new SimpleTab(document.querySelector('.tab2')).jump(0);6、全屏幕遮罩及 ESC 键盘事件响应一般这是全局性的组件，设置为“单例”即可。全屏幕基本是 CSS 还有一个 JS 的小尾巴，因为似乎用 CSS 不容易设置高度，用 JS 做还是比较可行的。&meta charset="UTF-8"&
&title&全屏幕遮罩及 ESC 键盘事件响应&/title&
&div class="mask"&&/div&
width: 100%;
z-index: 9999999;
background-color: rgba(0, 0, 0, 0.5);
// 获取页面内容高度赋予 mask
document.querySelector('.mask').style.height = document.body.scrollHeight + 'px';
// 键盘事件
function onEnterAndEsc(e){
var keycode = e.which || e.keyC
switch(keycode){
case 13: //enter
// 如果 form 里有 action，按下回车自动提交
case 339: //exit
case 340: //back
var mask = document.querySelector('.mask');
mask.parentNode.removeChild(mask);
document.onkeydown = onEnterAndE
7、消息对话框和这里其他的组件一样，对话框也是一个非常雏形的组件，仅仅完成了 fixed 定位、居中、关闭这几样功能，——可能样式方面的代码还着墨的比较多。至于背景遮罩，前面一个例子就有，有兴趣的童鞋可以看看怎么把两者组装起来。另外对话框拖放也是一个功能点，咱们在第一个例子的时候已经有介绍了。动手能力强的童鞋也可以试着自己把它们封装在一起，形成完整的对话框组件——这里就不再赘述了。 &meta charset="UTF-8"&
&title&MsgBox&/title&
&div class="msgbox"&
&h1&确认&/h1&
&div class="topCloseBtn closeAction"&×&/div&
&div class="inner"&
益力多，你今日饮左未？
&div class="btn"&
&div class="closeAction"&确认&/div&
background-color: #
border: 1px solid #d3d3d3;
width: 50%;
min-width: 300
max-width: 400
z-index: ;
min-height: 100
.msgbox h1 {
font-size: .9
text-align:
padding: 5px 0;
letter-spacing: 3
.msgbox .topCloseBtn {
text-align:
line-height: 16
height: 16
background-color:
.msgbox .inner {
margin-top: 0;
padding: 10
background-color: #f7f7f7;
text-align:
border: 1px solid #
min-height:50
line-height:50
.msgbox .btn {
width: 70%;
text-align:
.msgbox .btn & div {
display: inline-
max-width: 80
text-align:
border: 1px solid #d3d3d3;
padding: 3px 10
letter-spacing: 3
box-sizing: border-
background-color: #f7f7f7;
font-size: .9
function MsgBox(msgbox) {
// 计算居中
msgbox.style.left = (window.innerWidth / 2 - msgbox.clientWidth / 2) + 'px';
msgbox.style.top = (window.innerHeight / 2 - msgbox.clientHeight / 2) + 'px';
// 平均分按钮宽度
var btn = msgbox.querySelector('.btn'), btns = msgbox.querySelectorAll('.btn&div');
var j = btns.length, width = btn.clientWidth / j - 12; // 要减去间隙
// 登记关闭事件
[].forEach.call(msgbox.querySelectorAll('.closeAction'), function(closeBtn){
closeBtn.onclick = function(){
msgbox.parentNode.removeChild(msgbox);
new MsgBox(document.querySelector('.msgbox'));
8、跑马灯 Carousel 轮播跑马灯是个经典的效果，几乎每个网站、APP 都会用到，我们应该要好好掌握跑马灯实现的算法。一种最普遍的思路：把图片们用 ul 之类（div 亦可）的包起来，并设置 float，然后设置这个 ul 本身为 absolute 定位，其父标签用 relative 定位。通过设置 ul 的 left 或 top 值，从而实现图片队列的滚动效果。
&meta charset="UTF-8"&
&title&carousel&/title&
&div class="carousel"&
&a href="topic/?id=283"&
&img src="http://imgu.3gtv.net:9090/_file/section/17260.jpg"&
&a href="live/?id=3"&
&img src="http://imgu.3gtv.net:9090/_file/section/48448.png"&
&a href="topic/?id=346"&
&img src="http://imgu.3gtv.net:9090/_file/section/23733.png"&
&a href="topic/?id=345"&
&img src="http://imgu.3gtv.net:9090/_file/section/39065.jpg"&
.carousel{
height:250
.carousel & div{
white-space:
transition: 200
-moz-transition: 200
-o-transition: 200
-ie-transition: 200
-webkit-transition: 200
.carousel & div & div{
.carousel & div & div img {
width: 100%;
function Carousel(el) {
var containerWidth = el.clientWidth,
mover = el.querySelector('div'),
items = mover.children, len = items.
// 设置 mover 和 item 宽度。初始化时候运行。
for (var i = 0; i & i++) {
items[i].style.width = containerWidth + 'px'; // 设置item 宽度
mover.style.width = containerWidth * len
+ 'px'; // 总宽度，也是容器中最宽的宽度。赋予给 mover。
var count = 0;
setInterval(function(){
if(++count == len)count = 0;
mover.style.left = -count * containerWidth + 'px';
new Carousel(document.querySelector('.carousel'));
没有更多推荐了，}