预览模式: 普通 | 列表

简单css3-transform鼠标效果

 测试页地址:http://contactu.cn/2015/flower/trf.html

效果比较简单,一般基础都能写出。主要是考虑此类效果比较常用,我自己做了一下思路整理,以便于工作中快速调用

首先是把transition提炼成一个单独的class,这样调用时只要这样写就行了:

XML/HTML代码
  1. .trans  {transition: all 0.5s ease-in-out;}  
  2. .trans03{transition: all 0.3s ease-in-out;}  
  3. .trans08{transition: all 0.8s ease-in-out;}  
  4.   
  5. //调用时这样写  
  6. <div class="tit trans">变化稍慢<br />Y轴转动</div>  

接下是熟悉transform的emmet速写,不熟悉emmet的朋友请自行百度

XML/HTML代码
  1. trf  transform:;  
  2. trf:r  transform: rotate(angle);  
  3. trf:rx  transform: rotateX(angle);  
  4. trf:ry  transform: rotateY(angle);  
  5. trf:rz  transform: rotateZ(angle);  
  6. trf:sc  transform: scale(x, y);  
  7. trf:sc3  transform: scale3d(x, y, z);  
  8. trf:scx  transform: scaleX(x);  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1165

在WIN7中,按win+pringscreen键,是可以出现选择框的,但在WIN8中,简单的拷全屏。此问题我向印象笔记的帮助中心提交了问题,答案是“修改快捷键即可”。

我照做成功了---我估计可能是win8中把pringscreen键做了特定功能,不允许其它软件程序调用。

另外说一句,印象笔记的帮助中心服务还是不错的,虽然排队用了三四天时间,但每次都正确的解决了问题,反馈表单和邮件格式的设计,也都很科学高效---证明印象产品是一个强大的体系。

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1353

 基于bs版本: v3.3.4我做了一下定制,主要选择项如下:

定制后,主文件bootstrap.css由139K减少到102K

最后我决定所有的JS文件都不要了,连那仅有的三个勾都没选。

定制地址:http://v3.bootcss.com/customize/

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1469

六边形-蜂巢形-花瓣形导航菜单

 用于某广告公司的内页导航,在网上搜索了一下,好象没有类似的六边形导航,就自己做了一个。

最关键就是搞清六边形的坐标关系,用一张简图表述:

具体代码请移步此页面:http://www.contactu.cn/2015/flower/

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1197