先创建一个图片imageView self.imageView =[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tara4.jpg"]]; self.imageView.frame =CGRectMake(85, 400, 200, 200); self.imageView.layer.cornerRadius =100; self.imageView.layer.masksToBounds=YES; [self.view addSubview:self.imageView]; 写几个button的点击方法 写在button的点击方法,点击触发效果 1. UIView提供的动画 (1).// UIView 提供...
一、发现 前端渣哥逛博客园，经常看到博文评论有这种如下这种效果： 开始还以为是用图片实现的，额...。像博客园这种访问量大的网站，能用js/css实现的就不会用图片代替，果然，仔细一看，两个span就能实现这个效果了。 二、实现 看到不会或者不清楚的，总想探个究竟，并把知识变成自己的。接下来就花点时间，实现这种效果。 2.1 以span 设置 border-width:20px; 为例，这样相当于一个 40*40 的正方形（上下(20*2)和左...
【需要测量的信息】 [1]尺寸信息 -> 测量(矩形选框工具+信息面板) [注意]测量时,画布放得尽可能大 [a]宽度、高度 [b]内边距、外边距 [c]边框 [d]定位 [e]文字大小 [f]行高 [g]背景图位置 [2]颜色信息 -> 取色(取色器) [a]边框色 [b]背景色 [c]文字色 【实战】 【1】测量图片宽高 [1.1]测量普通图片宽高:先用矩形选框工具选择...
会用PS的童鞋一定知道“蒙版”的概念，它可以在图片上实现一定的遮罩效果，当然这里我们不介绍ps里的蒙版，而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果。 大家对-webkit-mask这一属性可能不太熟悉，或许有很多人都是第一次见到，没错，这一属性也是还未被众多浏览器所支持的CSS属性，目前支持这一属性的仅有-webkit-前缀的谷歌及safari浏览器，但是相信在不久的未来这一属性将被其他主流浏览器所支持，下面...
我用css3的transition实现动画效果，在单页面下是完全没有问题的，问题在于我做一个手机翻页的效果，当将要翻到这一页的时候我把这个页面的内容清空，只留下背景图，同时把透明度调低，然后当这个页面呈现出来，再动态添加节点，这个时候transition的效果没有出现，直接出来的是变换以后的效果，贴上测试代码 .section { text-align: center; font: 50px "Microsoft Yahei"; ...
引用前请标明出处：http://www.cnblogs.com/zkhzz/ 谢谢 通过观察了百度的首页，对于更多产品一栏，觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 新闻 hao123 地图 视频 贴吧 登录 设置 2 2 2 2 更多产品 1 1 1 1 1 1 1 1 2.初始化样式，修改默认的无序列表 *{ padding: 0; margin: 0;}.nav{ width: 100%; height: 50px; display: block; position: relativ...
【新建】把需要的内容拖到新的文件里，或者复制粘贴到新的文件里。背景内容要选择透明 【补充】图片各种格式及特点 jpg:不支持透明半透明，所有空白区域填充白色（高清图） gif:支持透明，不支持半透明（小图标，支持动画） png8:支持透明，不支持半透明（小图标，不支持动画） png24:支持透明，也支持半透明（半透明的图片） 【保存】:为保证图片质量，保留一份psd,在psd文件上进行修改。保存其他类型的图片时会对...
css实现页面加载中,请稍候效果 默认是隐藏的，可通过js控制div的显示和隐藏，背景颜色和图片可自行调节。
【css sprite】 【定义】css sprite是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中 【优点】 [1]减少http请求次数 [2]减少图片大小，提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) 【缺点】 [1]提高开发成本 [2]提高维护成本 【补充】(浏览器对并行网络请求有个数限制) http1.1(持久保持) http1.0(短暂保持) IE6...
【哪些是需要切出来的】 [1]修饰性的(一般用在background属性) [注意]修饰性图片一般保存为png24(IE6不支持半透明)和png8格式 [a]图标、logo [b]有特殊效果的按钮、文字等(如果设计师设计的字体不太常见的话,把文字当图片来切出来) [c]非纯色的背景 [2]内容性的(一般用在img标签) [注意]内容性图片一般是服务器的数据，一般不用切图，只用占位即可 [a]Banner、广告图片 ...
css实现文字竖排效果:在当前大家都习惯于横向排列的文本，但是绝大多数朋友也是知道的，在古代中国的文本是竖向排列的，本章节通过代码实例介绍一下如何实现文本的竖向排列效果，这样的需求在实际应用中也是有的。代码如下: 蚂蚁部落 #webfx{ position:absolute; background:red; top:50px; right:100px; width:100px; writing-mode:tb-rl; -webkit-writing-mode:vertical-rl;}蚂蚁部落欢迎您 上面的代...
前端工程师技能之photoshop巧用(从效果图到雪碧图)1??准备篇 前端工程师技能之photoshop巧用(从效果图到雪碧图)2??测量篇 前端工程师技能之photoshop巧用(从效果图到雪碧图)3??切图篇 前端工程师技能之photoshop巧用(从效果图到雪碧图)4??优化篇 前端工程师技能之photoshop巧用(从效果图到雪碧图)5??理论篇
-webkit-background-clip：padding-box | border-box | content-box | text，指定对象的背景图像向外裁剪的区域。对应的脚本特性为backgroundClip padding-box 从padding区域（不含padding）开始向外裁剪背景。 border-box 从border区域（不含border）开始向外裁剪背景。 content-box 从content区域开始向外裁剪背景。 text 从前景内容的形状（比...
目标：实现照片墙布局和鼠标经过图片时的动画效果 涉及知识点：CSS3的动画、过渡、变形（缩放），绝对定位与相对定位 疑点：绝对定位与相对定位对页面元素显示层次的影响 参考极客学院布道师iwen的课程 源码?? html部分： CSS部分(picwall.css)： *{ margin: 0px;}body{ backgroun...