上一篇：《selection伪元素小解》写在前面的前面前几天讲解了自己用纯CSS绘制银色MacBook Air的详细过程，由于篇幅较长就分了两部分介绍，今天我将其合二为一方便大家查看，该文章用Markdown+少量的html编辑。同时在用markdown的过程中发现，一些markdown语法在cnblog博文里面和直接在浏览器显示是有区别的，比如网址链接和引用，但是完全不影响使用和查看。为了让大家更好的查看，markdown中的所有链接我都用a标签进行了修饰，并没有使用markdown中的链接方式。写在前面前段时间自己用CSS绘制了一个银色的MacBook Air，今天把它从电脑硬盘深处挖了出来，我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给大家。First 注：如果图片显示过大没有完全显示，请F5或Ctrl+F5。Double 注：本文为Markdown+少量html编辑。Triple 注：祝愿小伙伴们每天都过得快乐。这其实是一个半成品，键盘上的其他图标和文字都还没有加，图标的话可以用font-face，待我找着合适的字体图标网址链接后给大家补全，同时也欢迎小伙伴们捣腾。小伙伴们也可以猛戳这里去Codepen上查看高清无码大图，给出链接：http://codepen.io/myvin/pen/yNezZR零、第零步这里使用了CSS的before、after伪元素、渐 ...继续阅读 (18)

今晚吃完饭回宿舍又捣鼓了另外几种Loading效果，老规矩，直接“上菜“……注：gif图片动画有些卡顿，非实际效果！PS：若要转载请注明出处，尊重一下作者！第一种效果：代码如下：.loading{width:80px;height:40px;margin:0 auto;margin-top:100px;}.loading span{display:inline-block;width:8px;height:100%;border-radius:4px;background:lightgreen;-webkit-animation:load 1.04s ease infinite;}@-webkit-keyframes load{0%,100%{height:40px;background:lightgreen;}50%{height:60px;margin-top:-20px;background:lightblue;}}.loading span:nth-child(2){-webkit-animation-delay:0.13s;}.loading span:nth-child(3){-webkit-animation-delay:0.26s;}.loading span:nth-child(4){-webkit-animat ...继续阅读 (28)

昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……第1种效果：代码如下：.loading{width:80px;height:40px;margin:0 auto;margin-top:100px;}.loading span{display:inline-block;width:8px;height:100%;border-radius:4px;background:lightgreen;-webkit-animation:load 1s ease infinite;}@-webkit-keyframes load{0%,100%{height:40px;background:lightgreen;}50%{height:70px;margin:-15px 0;background:lightblue;}}.loading span:nth-child(2){-webkit-animation-delay:0.2s;}.loading span:nth-child(3){-webkit-animation-delay:0.4s;}.loading span:nth-child(4){-webkit-animation-delay:0.6s;}.loading span:nth-child(5){-web ...继续阅读 (44)

说到伪选择器，真的让我体会到了CSS的无比强大，强大到自己貌似都不认识CSS了，有点C# 6.0中一些语法糖带给我们的震撼。。。首先我们可以在VS里面提前预览一下。可以看到，上面的伪类有很多很多，多的让我眼都快瞎了。。。下面就挑一些实用性比较强的说一说。一 :nth-child 伪选择器 我们...本文链接：CSS之旅——第三站 强大的伪选择器，转载请注明。 ...继续阅读 (75)

Low Poly是计算机主流设计风格的一种。当前主流设计风格包括：1.拟物（Skeuomorph）2.平面化（Flat Design）3.长阴影（Long Shadow）4.响应式（Responsive）5.原质化（Material）6.平行视差（Parallax）。低多边形（Low Poly）不强调细腻的拟物模拟，而是使用抽象的几何方式来构造模型轮廓，同样达到栩栩如生的效果。下面是一个简单的字母B形状图标的设计和开发实例。HTML代码：CSS代码：.b { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .b [class*="triangle-"] { display: block; /* Let's define the positions */ margin: 0; padding: 0; position: relative; } .b [c ...继续阅读 (69)

doctype htmlbody{ background: #000;} .color1{ background: #FDE515;} .color2{ background: #00DEF2;} @-webkit-keyframes loadRotate{ from{ -webkit-transform:rotateZ(0deg);} to{ -webkit-transform:rotateZ(360deg);} } @keyframes loadRotate{ from{ transform:rotateZ(0deg);} to{ transform:rotateZ(360deg);} } #loading{ width: 100px; height: 100px; position: absolute; left:50%; top:50%; margin-left:-50px; margin-top: -50px; -webkit-animation:loadRotate 3s linear infinite; -webkit-animation-fill-mode:both; animation:loadRotate 3s linear infinite; animation-fill-mode:both;} ...继续阅读 (22)

在这篇文章中，我们将来看一些CSS3新属性，从而用HTML和CSS处理网格的时候更容易。但首先让我们讨论一点HTML和CSS网格的历史，了解清楚为什么以前很困难。网格简史曾几何时，我们的布局是一团糟。表格和框架是用于创建多列布局的主要工具。虽然他们能完成工作（但其实非常糟糕）。把目光投向今天。HTML和CSS已经变得非常复杂，Web设计的知名度和复杂度与日俱增。我们曾经使用的旧的布局方法显然已经out了。然而，一个历史遗留问题浮出水面：多列布局。更复杂的是，我们的页面宽度不再是静态的。响应式大行其道，所以我们倾向于基于百分比的列宽。基于固定960像素宽的简单网格已经行不通——我们需要流体网格。CSS2规范中用浮动解决列的方法存在一个问题。为了防止父元素破环你的布局，我们需要添加clearfix。通过这种方法，来修正父元素的高度坍塌问题（浮动元素脱离标准流，父元素会认为浮动资源不存在）。我们大部分接受这种方法，但许多人仍然认为它是一种hack（奇技淫巧）。通过inline-box的方法并不常见，但仍然存在。内联元素会保持在一行，他们自然顺序排列。当一行被占满，后面的元素自然折到下一行。但因为他表现为文本特性，其行为类似文本。这意味着你必须避免HTML元素之间的空白元素(空格，tab，换行……)。Inline-block不是为这设计的，不且工作的并不十分如意。在这两种方法中，浮动的方法 ...继续阅读 (22)

最近开始折腾一些CSS3的东西，发现以前走马观花看过的CSS 3D相关的属性几乎忘记的差不多了，今天就来通过一个小立方体的效果来温习下：首先，我们来实现HTML布局，用一个div#arana作为“展台元素”，存放整个立方体容器div#box，div#box里面有6个子节点div.face，代表这个立方体的6个面。id="arena">id="box">class="face">1class="face">2class="face">3class="face">4class="face">5class="face">6最外层的div#arena的作用类似于一个“展台”，我们可以想象，在“展台”上，我们需要拜访一台摄像机，来拍摄这个立方体。那么，这个摄像机，我们称之为“视点”，视点和立方体的距离，就是div#arana的-webkit-perspective属性值， 它和我们在画画的时候“透视点”的概念有点像，只不过，“透视点”在屏幕的后方，而“视点”在屏幕的前方。在立方体旋转，偏移的时候，我们还需要知道一个“基点”，3D变换的元素， 都会基于这个点来变化，“基点”通过-webkit-perspective-origin属性来定义，的默认值是50% 50%，分别代表“基点”距离元素本身左边和顶部的距离。#arena{-webkit-perspective:400;-webkit-per ...继续阅读 (37)