沐梓沐囡-优快云博客

原创 css3之3D立方体

在做立方体前先介绍下3D转换的知识：1、左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图2、CSS中的3D坐标系CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图a) 绕X轴旋转，rotate

2017-10-13 18:41:04 855

原创绘制各种图形

html>html>head lang="en"> meta charset="UTF-8"> title>各种图形title> style type="text/css"> *{ margin: 0; padding: 0; } body{ background-c

2017-10-12 20:07:25 464

原创 css3绘制机器人

想不想用纯代码来绘制图形，而且不使用h5的cavas,zz只用css3，下面我来示范下:html>html>head lang="en"> meta charset="UTF-8"> title>title> style type="text/css"> body { margin: 0; pa

2017-10-12 19:54:12 888

原创 html5API之web存储

网络的迅猛发展，基于网页的应用越来越普遍越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发人员带来诸多不便，随着救世主html5的诞生为其提供了标准的解决方案。基于html5的Storage 存储即 window.sessionStorage window.loca

2017-10-10 09:41:18 697

原创 html5的表单

一.强大的html5的表单验证功能，不需要我们再写入大量的javascript代码就可以完成我们想要的表单验证功能。效果截图如下:源码如下:body> form action="#"> fieldset> legend>表单属性legend> label for="">label> em

2017-09-30 18:03:24 1670

原创给网页换皮肤

html>html>head lang="en"> meta charset="UTF-8"> title>为你的网页换个衣服吧title> style type="text/css"> * { padding: 0; margin: 0; text-align: center;

2017-09-29 15:06:16 327

转载论html5十大优点

第一大原因：它是未来，开始用吧！　　最大的原因今天你就开始使用HTML5是因为它是未来，不要掉队了！HTML5不会往每个方向发展，但是更多的元素已经被很多公司采用，并且开始着手开发。HTML5其实更像HTML，它不是一个新的技术需要你重新学习！如果你开发XHTML strict的话你现在就已经在开发HTML5了。为什么不更完整的享受HTML5的功能呢？你实际上没有任何借口不接受HTML5

2017-09-29 14:25:32 13650

原创花瓣导航栏

当鼠标点击到标签时，背景花瓣会跟着鼠标移动。当点击时鼠标会定住，当鼠标移走的时候，花瓣会退回到上一次记录的位置。样式如下：源码如下:html>html>head lang="en"> meta charset="UTF-8"> title>花瓣导航title> style> *{ margin: 0;

2017-09-24 20:07:38 940

转载缓存动画

html>html>head lang="en"> meta charset="UTF-8"> title>缓存动画的封装title> style> *{ margin: 0; padding: 0; } div{ width: 200px;

2017-09-24 11:38:34 638

原创 offset三大家族

offset家族 1.1 三大家族和一个事件对象三大家族（offset/scroll/client）事件对象/event （事件被触动时，鼠标和键盘的状态）（通过属性控制） 1.2 Offset家族简介 offset这个单词本身是–偏移，补偿，位移的意思。 js中有一套方便的获取元素尺寸的办法就是offset家族； offsetWidth和offsetHight 以及offse

2017-09-24 07:47:54 457

翻译 js之无缝轮播图代码

html>html>head lang="en"> meta charset="UTF-8"> title>无缝轮播图title> style> *{ padding:0; margin:0; list-style:none; border:0;} .all{ width:500px; height:200px;

2017-09-23 22:38:56 964

原创浅谈绝对定位:absolute与相对定位:relative

绝对定位（absolute）: 1. 以浏览器左上角的为参考点设置位置。 2. 与浮动一样不占据空间位置。 3. 嵌套的盒子，父元素无定位，子元素绝对定位，子元素仍然参照浏览器。 4. 父元素绝对定位，子元素绝对定位，子元素以父元素为参考点。 5. 给行内元素绝对定位之后就转化为行内快了。 6. 可以设置z-index[调整元素的层叠顺序]值的范围是:0-999，值大的在上方

2017-09-23 08:50:06 3851