摘要:概述项目开发过程中使用到了不少前端美化效果的方法,总结一下图片作为背景要实现的效果是,任意一张图片,不需要调整图片尺寸,图片完全填充网页背景。
概述
项目开发过程中使用到了不少web前端美化效果的方法,总结一下
1 图片作为背景要实现的效果是,任意一张图片"img-page-background.png",不需要调整图片尺寸,图片完全填充网页背景。首先需在CSS代码中创建.page-bg类:
.page-bg { width: 100%; height: 100%; background: url("img-page-background.png") no-repeat; background-size: 100% 100%; }
url指定图片路径,no-repeat指定图片不平铺,background-size: 100% 100%;完全占据背景
然后在HTML代码中将背景与其他想要显示的内容分两个 最终效果上图, 浏览器F12进入调试模式,将屏幕分辨率任意修改,背景图都会100%填充,但是会改变图像的纵横比 刚开始学摄影的时候也很喜欢玩大光圈虚化,感觉拍出来的静物很漂亮,有一种朦胧梦幻感,而且虚实对比,突出主题,web设计中也是一样的 要实现的效果是将背景的图片虚化掉,背景之上的内容清晰显示,仍以"img-page-background.png"作为背景图片,CSS样式同“1 图片作为背景” 创建一个专用于虚化的CSS类: 因为PS中喜欢使用高斯模糊做后期,故取名gauss;-webkit-、-moz-等前缀用于对各种浏览器支持;属性的取值为blur(npx),其中的n取值越大,模糊程度越大 在HTML代码中,同理,要把背景和实际内容分两个 这里背景 上图中只有背景被虚化,背景之上的文字依然清晰 在背景之上做一个透明的区域,会有一种悬浮感,更显得神秘莫测,透明效果使用CSS的opacity属性,其值的范围是0.0~1.0,数值越小,透明度越高,创建一个CSS类: 在HTML代码中,依然选取背景图片img-page-background.png,在其上方制作一个半透明颜色为#555的矩形 给显示的内容 要实现的效果是在背景虚化和前景透明的基础上,前景淡入,背景逐渐虚化,要做两件事:前景淡入和背景逐渐虚化 淡入效果jQuery就可以支持,使用淡入淡出效果中的fadeIn()方法,语法为: speed是从隐藏到显示完全所用的时间长度,单位毫秒,也可取slow和fast,callback是效果执行完后的回调函数,可不使用,上HTML伪代码: 这里在执行js脚本之前要确保加载了jQuery库文件,脚本中首先要讲淡入元素隐藏,淡入时间设置为3秒 因为虚化使用的是CSS属性filter设置blur(npx)参数,要实现逐渐虚化的效果,需要让blur(npx)参数动态增加,网上有第三方js库可以实现动画效果,我没有使用第三方库,怎么办?用定时器做 milliseconds是循环的周期,单位为毫秒,前面是一个函数,上HTML伪代码: 在CSS中首先将blur类的filter属性值设置为blur(0px),也就是初始不虚化,然后创建定时器myTimer,指定每250毫秒执行一次立即函数,函数中调用jQuery的css()方法为blur类设置其filter属性的值,该值为一个字符串变量blur_css,会随着counter的递增而改变,从"blur(0px)"递增到"blur(20px)",从而实现了逐渐虚化的效果,最终效果如图 Web前端需要做的漂亮,必定引入很多图片和图标来美化界面,但是嵌入式设备Flash有限,总共就那么几M空间,可用于Web资源存放区域很受限制,这里记录一种用于Web前端的图片压缩与合并方法,将多个制作好的图片和图标合并到一张图片中,既减小了占用Flash大小,又使得浏览器一次加载便可加载到所有图片 要使用一个在线图片压缩合并工具,CSS Sprite Generator,链接地址:http://spritegen.website-performance.org/ 做一个例子,如下图加载进来一些图片后,会自动对齐 点击其中一个图标,在右侧的设置区域可看到其坐标 这坐标怎么用?回到左边的区域,点击Downloads,右边区域会更改为下载选择,点击spritesheet会下载合并后的图片,点击stylesheet会下载所有图标的样式,如下图是合并后的图片 stylesheet样式文件内容如下 每个图标有width、height和background-position三个属性,这其实就是对应css样式,可按如下格式建立一个删除图标的样式 其中url中为从这个工具下载的spritesheet合并图片,HTML中就可以使用 未完待续 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。 转载请注明本文地址:https://www.ucloud.cn/yun/112449.html 摘要:概述项目开发过程中使用到了不少前端美化效果的方法,总结一下图片作为背景要实现的效果是,任意一张图片,不需要调整图片尺寸,图片完全填充网页背景。
概述
项目开发过程中使用到了不少web前端美化效果的方法,总结一下
1 图片作为背景
要实现的效果是,任意一张图片img-page-background.png,不需要调整图片尺寸,图片完全填充网页背景。首先需在CSS代码中创建.page-bg... 摘要:概述项目开发过程中使用到了不少前端美化效果的方法,总结一下图片作为背景要实现的效果是,任意一张图片,不需要调整图片尺寸,图片完全填充网页背景。
概述
项目开发过程中使用到了不少web前端美化效果的方法,总结一下
1 图片作为背景
要实现的效果是,任意一张图片img-page-background.png,不需要调整图片尺寸,图片完全填充网页背景。首先需在CSS代码中创建.page-bg... 摘要:现在前端页面效果日益丰富,默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改样式的方法。它使用纯编写,没有任何的文件。
现在前端页面效果日益丰富,默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改radio、CheckBox样式的方法。
原理:大致原理都是使用原生的checkbox或inp... 摘要:现在前端页面效果日益丰富,默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改样式的方法。它使用纯编写,没有任何的文件。
现在前端页面效果日益丰富,默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改radio、CheckBox样式的方法。
原理:大致原理都是使用原生的checkbox或inp... 阅读 3071·2021-09-28 09:43 阅读 904·2021-09-08 09:35 阅读 1442·2019-08-30 15:56 阅读 1186·2019-08-30 13:00 阅读 2732·2019-08-29 18:35 阅读 1831·2019-08-29 14:07 阅读 3435·2019-08-29 13:13 阅读 1334·2019-08-29 12:40
......
......
.gauss {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
......
......
.glass {
opacity:0.6;
}
......
......
动态过渡
仍然使用上文中的资源$(selector).fadeIn(speed,callback);
......
......
javascript自带两种定时器方法setInterval()和setTimeout(),前者是周期性循环定时并触发回调函数,后者是定一个时间,到时间触发回调函数;要实现逐渐的效果,就要不断改变blur(npx)的n的值,很明显需要多次调用函数,所以使用setInterval(),格式为setInterval("javascript function",milliseconds);
......
......
进入后在网页左上方一片区域,有open、Setting、Clear、Downloads和About,点击open打开所需合并的图片,该工具会自动优化对齐.sprite {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-icon-delete-normal {
width: 50px;
height: 50px;
background-position: -5px -5px;
}
.sprite-icon-modify-normal {
width: 50px;
height: 50px;
background-position: -5px -65px;
}
.icon-delete-normal {
width:50px;
height:50px;
overflow: hidden;
background-repeat: no-repeat;
background-image: url("../img/spritesheet.png");
background-position: -5px -5px;
}
相关文章
web前端——美化效果总结
web前端——美化效果总结
总结:如何修改美化radio、checkbox的默认样式
总结:如何修改美化radio、checkbox的默认样式
发表评论
0条评论
DobbyKim
男|高级讲师
TA的文章
阅读更多
阿里云服务器云小站秒杀:2核2G5M仅60/年,新用户低至0.05折起
【软件测试】程序不改bug,先别动手,听我说
第四天
the compatibility problem of ie
fixed固定定位 定位元素的层级和float层级的区别 遮盖效果
移动端适配
web前端——美化效果总结
2017-05-30 前端日报