transform | 易学教程

仿iphone日历插件(beta)

阅读更多关于仿iphone日历插件(beta)

前言小伙伴们好，很久不见了。最近工作进入正常期了，所以慢慢的悠闲的时间久没有了，所以不能每天水一篇了。最近也在听师傅（ http://home.cnblogs.com/u/aaronjs/ ）的教导开始阅读jquery源码了，怎么说呢，阅读的效果其实不是太好。一来是时间断断续续的没有接上，今天读完明天又忘了，到第三天再读的话，就很多都忘记了；二来是jquery其实还是有一定难度，加之篇幅也很长，所以读起来还是有一点吃力（我甚至有时候有种想睡的感觉），过了2星期才陆陆续续把core读完，结果很多都无法理解，再加油吧。反正今年的目标就是把jquery读懂，时间多，不着急了。时间比较紧未做兼容处理，请使用手机/或者使用chrome开启touch功能查看，后期补上兼容方案，以及修复BUG 关于工作最近工作上需要在我们的网页上加入一些动画： ① 页面的切入切出的转场动画 ② 模仿一个iphone的日历控件转场动画做的时候其实碰到了很多坑，而且最后做出的效果也一般，因为既有的框架与dom结构已经出来了好久了，改不得，而且就算改了效果也不能保证好，所以暂时放下这里说的仿iphone日历控件，不如说模仿一个单选框来的实在，而且我这里说是插件，完全就算标题党了，各位可以忽视，所以今日正题吧。 iphone的感觉第一步我们要找到iphone的感觉，那么iphone是个什么感觉呢

03--css形状--css揭秘

阅读更多关于 03--css形状--css揭秘

形状一自适应的椭圆 1.难题 1> 圆你可能注意到过，给任何正方形元素设置一个足够大的border-radius，就可以把它变成一个圆形。所用到的CSS 代码如下所示： 1 #bd { 2 width: 200px; 3 height: 200px; 4 background: #fb3; 5 border-radius: 100px; /* >= 正方形边长的一半 */ 6 } *当任意两个相邻圆角的半径之和超过border box 的尺寸时，用户代理必须按比例减小各个边框半径所使用的值，直到它们不会相互重叠为止 2> 椭圆如果它的宽高相等，就显示为一个圆；如果宽高不等，就显示为一个椭圆 2.解决方案说到border-radius，有一个鲜为人知的真相：它可以单独指定水平和垂直半径，只要用一个斜杠（/）分隔这两个值即可。这个特性允许我们在拐角处创建椭圆圆角因此，如果我们有一个尺寸为 200px × 150px 的元素，就可以把它圆角的两个半径值分别指定为元素宽高的一半，从而得到一个精确的椭圆： #bd { width:200px; height:100px; border-radius:100px/50px; } 但是，这段代码存在一个很大的缺陷：只要元素的尺寸发生变化， border-radius 的值就得跟着改。我们在图3-5 中可以看到

使用css打造形形色色的形状！

阅读更多关于使用css打造形形色色的形状！

　　css是非常强大的工具，如果我们掌握的好，那么许多复杂的形状不需要使用图片而直接使用css完成即可，这不仅有利于减少http请求以增强性能还便于日后的管理和维护，一举两得！这篇博文会主要介绍一些常见的图形，如圆、椭圆、三角形、平行四边形、菱形、切角效果等等。　　　　由于这篇博文中的多数实现代码用到了css3，鉴于篇幅有限，所以大家如果对css3不太了解可以先看我的博文《强大的css3 》。第一部分：圆　　用css创建一个圆是很简单的，只需要把border-radius的值设置位宽和高的一般即可，代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>梯形</title> <style> div{ width: 100px; height: 100px; line-height: 100px; text-align: center; border-radius: 50px; background: red; color:white; } </style> </head> <body> <div>918之初</div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

css3.0实现的各种形状

阅读更多关于 css3.0实现的各种形状

#square { width: 100px; height: 100px; background: red; } 有兴趣的话，最好是自己试试以下！······ #rectangle { width: 200px; height: 100px; background: red; } #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* Cleaner, but slightly less support: use "50%" as value */ #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } /* Cleaner, but slightly less support: use "50%" as value */ #triangle-up { width: 0; height: 0; border

The Shapes of CSS（css的形状）

阅读更多关于 The Shapes of CSS（css的形状）

All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser. （下面的所有内容只使用一个HTML元素。任何一种CSS都可以，只要它在至少一个浏览器中支持。） Square （正方形） /*--> */ /*--> */ #square { width: 100px; height: 100px; background: red; } Rectangle （长方形） /*--> */ /*--> */ #rectangle { width: 200px; height: 100px; background: red; } Circle （圆形） /*--> */ /*--> */ #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* Cleaner, but slightly less support: use "50%" as value */ 半圆形（Semicircle）扇形

45个值得收藏的 CSS 形状

阅读更多关于 45个值得收藏的 CSS 形状

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。我们还可以使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 HTML 元素在 CSS 中创建许多形状。虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。 1.正方形 #square { width: 100px; height: 100px; background: red; } 2.长方形 #rectangle { width: 200px; height: 100px; background: red; } 3.圆形 #circle { width: 100px; height: 100px; background: red; border-radius: 50% } 4.椭圆形 #oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px; } 5

奇妙的 CSS几何图形

阅读更多关于奇妙的 CSS几何图形

三角形：通常会使用透明的border模拟出一个三角形：▲ .traingle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid yellowgreen; } 切角：采用多重线性渐变实现切角 .notching { width: 40px; height: 40px; padding: 40px; background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left, linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right, linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right, linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } 梯形：

css特效

阅读更多关于 css特效

css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 < body > < div id="outer"> < div id="group"> < div class="page" id="page1">.</ div > < div class="page" id="page2">..</ div > < div class="page" id="page3">...</ div > < div class="page" id="page4">....</ div > < div class="page" id="page5">.....</ div > < div class="page" id="page6">......</ div > </ div > </ div > </ body > 　　在body中定义一个叫做outer的div，它是最外层的div，用来提供一个3D场景，可以认为它是一个3D图形的展示平台，只有定义了这样一个div，才能够展示3D图形，此外定义一个class为group的div，用来盛放色子的六个平面，将它们组合在一起。最后再定义6个平行的div

一款基于css3的散子3D翻转特效

阅读更多关于一款基于css3的散子3D翻转特效

css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下： <body> <div id="outer"> <div id="group"> <div class="page" id="page1">.</div> <div class="page" id="page2">..</div> <div class="page" id="page3">...</div> <div class="page" id="page4">....</div> <div class="page" id="page5">.....</div> <div class="page" id="page6">......</div> </div> </div> </body> 在body中定义一个叫做outer的div，它是最外层的div，用来提供一个3D场景，可以认为它是一个3D图形的展示平台，只有定义了这样一个div，才能够展示3D图形，此外定义一个class为group的div，用来盛放色子的六个平面，将它们组合在一起。最后再定义6个平行的div，表示色子的六个平面。第二步，定义三维场景的css,代码如下： #outer{ /*定义视距*/ -webkit-perspective

HTML5实践 -- 使用css3创建动态3d立方体

阅读更多关于 HTML5实践 -- 使用css3创建动态3d立方体

　　在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。　　demo地址： http://www.paulrhayes.com/experiments/cube-3d/ 　　demo下载地址： animated-css3-cube.zip 　　下面我们开始介绍如何制作。　　html： <div id="experiment"> <div id="cube"> <div class="face one"> One face </div> <div class="face two"> Up, down, left, right </div> <div class="face three"> Lorem ipsum. </div> <div class="face four"> New forms of navigation are fun. </div> <div class="face five"> Rotating 3D cube </div> <div class="face six"> More content </div> </div> </div> 　　上面的html中，class为face的6个div分别代表立方体的6个面，使用one到six的class名字对他们加以区分

订阅 transform