html 总是那么的惊奇 来源于“硬件加速” 年初的一个笔记,闲时整理出来。 很多网上文章都说建议打开浏览器的硬件加速,这样页面渲染速度、动画流畅性会提高。这几乎成了很多人页面制作的标配,管实际有没有用都来一个: html,body { transform: translate3d(0,0,0); } 但这在很多情况下会引起 html 层级文档流的“异常”。 W3C

transform   css3动画   css3  

前言 Google Material Design花了很大篇幅介绍了优雅自然的动画应该具备哪些特性。不仅仅是视觉上的观感,还能帮助提高用户界面的可用性,提升用户体验。官方文档讲的很细致,有很多典型视频示例,可惜缺少代码示例。接下来,用打开一个material surface动画的例子,来说说本人对material motion的认识。 一个最简单的打开动画,可能涉及移动和放大。在Material的

动画   css3   css  

从 gitlab clone 一个项目下来后,执行compass watch 报错。如下: 开始看到这个一头雾水,之后查阅了资料,发现是因为文件夹带中文的原因。 将文件夹全部改为英文后,再进行compass watch 就正常了。 附: JavaScript数据结构和算法系列: JS 栈 JS 队列-优先队列、循环队列 JavaScript设计模式系列: JavaScript设计模式之策略模式 J

前端   css   css3   compass   sass  

以前看到锤子科技官网的banner效果挺好玩的,一直没有研究;今天看到饥人谷,使用jquery给出了一种实现方式;我自己用原生js也实现了一遍。大致原理相同,但算法不同。 饥人谷源码地址:http://js.jirengu.com/negor/4...。 我的方法原理,如图所示,假设图中的小圆点是中心点;e的位置为事件发生的位置。在水平方向上,deltaX/centerX就是元素要旋转的度数代码在

前端   css3   javascript  

我为什么要写博客?其实我最初打算写博客,原因很简单,我就是想把工作中、学习中遇到 的问题及解决方案记录下来,它能帮你梳理下整个过程的要注意的地方,写写你在工作中遇到的问题,用来记录和回顾。Tips:个人博客排版、UI更佳;地址:https://haonancx.github.io/ GITHUB地址:博客仓库 觉得好的话,记得给个星呀~ 废话少说,先上效果图 网页端 移动端1 移动端2 主要技术栈

javascript   html5   css3  

经常能看到别人做前端的时候,实现一些漂亮的复选框或单选框按钮,由于现在项目原因,很多单选框和复选框看起来很不好看,于是,心血来潮打算自己实现了一遍。 一、首先上css代码: 其中,说明我以注释的形式写到里面; 关于z-index我是基于一开始的定位考虑来设置的,此处如果谁要用到,自行思考; /*复选框效果*/ input[type=checkbox] { width:16px; h

css3   前端   javascript  

效果预览:(有防盗链,麻烦手动复制到新窗口打开) 用伪类 :focus 实现: https://ssl.huching.net/demo-... 用伪类 :target 实现: https://ssl.huching.net/demo-... (具体代码可以直接在 demo 的源代码里边查看) 简单说一下原理: 用 :focus 实现需要添加以添加 input 元素。因为 :focus 只对 in

css3   css   html  

css-icons github地址 CSS-ICONS 使用方法 直接引入css就可以,由于效果是css3实现,所以建议在手机端页面引用。 <link rel="stylesheet" href="icons.css"> 例子 加上class <i class="css-icon-close-circle"></i> 就可以看到效果 目前有60个图标,还会继续添加更新... 点击页面图标

前端   css3   css   html5   html  

简介 在过去的两年,越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候,都使用了transformjs,所有必要介绍一下,让更多的人受益,提高编程效率,并享受编程乐趣。(当然transformjs不仅仅支持移动设备,支持CSS3 3D Transforms的浏览器都能正常使用transformjs) 传送门 官方网站:http://alloyteam.github.io/AlloyTo

css3   css   javascript   html5  

相信大家一看到这个题目,有些同学就会叫到:“我也遇到过这样的问题!”,这具体是什么问题呢? 有这样一种页面结构: <div class="container"> <div class="left"> left </div> <div class="right"> right </div> </div> 这样的页面结构相信大家经常会遇到

css3   css   布局   前端  
1 2 3 4 5 6 7 8 9