当我们在网站上注册登录还是提交评论，都需要用到表单，今天我们来分享8款最新CSS3表单，有几个效果很酷很特别，有些也非常实用，一起来看看。 1、CSS3环形特色表单 转圈切换表单焦点 这款CSS3表单非常有特色，估计各位不太会看到过，这是一款CSS3环形特色表单，整个环形由一个个输入框组成，当用鼠标激活输入框焦点时，环形圈即会转到该表单项。我们也可以用t...
需掌握的知识点： 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点，并能熟练运用 3.学会通过transition及transform配合，制作动画 4.学会简单的媒体查询应用 figure ，HTML5语义化标签： 用于规定独立的流内容（图像、图表、照片、代码等） figcaption，HTML...
如何画3D旋转效果或者卫星围绕旋转效果，当然这个也是工作中的一个任务，我在网上翻了一下，并没有找到类似的东西，所以写下来还是费了一番功夫，因此我把它拿出来记录一下，当然替换了一部分内容。好了，话不多说，进入正题。 我们都知道，浏览器是一个平面的视觉效果，如何在一个平面上看出立体的3D效果呢，其实就是一个视觉差的问题。那我们就从一个平面视觉效果一步一步画出...
一、过渡、变形和动画 1. 过渡 transition 应用举例： a元素normal状态样式为一种，:hover时为另一种，希望由normal转为active时缓慢的变化，这是可以在normal样式中添加transition，如transition: all 1s ease 0s. 属性介绍： 简写是transition: all 1s...
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin:0; padding:0; } html,bo...
自从有了html5和css3，好多以前只能想想的华丽效果都可以上手实现了。3D 转换(个人认为3D变换更贴切^)就是其中之一。关于3D转换，可以阅读CSS3 3D transform变换，不过如此，文中对3D转换进行了形象、生动、详细的阐述。在这里，只和大家讨论怎么利用3D转换来实现立体及其旋转效果，例如： 好吧，废话不多说，上代码！ 1.页面代码 1...
这个是3D旋转的进阶版，是一个类似与骰子的正方体。这个版本只有秒数的个位数，还没有写整个钟表，下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d。 利用transform: rotateX, rotateY, rotateZ来定义物体转动轴，实现3D旋转 给一个正方体设置6个面，每个面都设置旋转基面，并...
HTML代码： <div class="r-1">a</div> <div class="r-2">a</div> CSS代码： .r-1{ border: 1px solid red; text-align: center;color...
一、写在前面的秋裤 早在去年的去年，我就大肆介绍了2D transform相关内容。看过海贼王的都知道，带D的家伙都不是好惹的，2D我辈尚可以应付，3D的话，呵呵，估计我等早就在千里之外被其霸气震晕了~~ 看看下图女帝的动作以及神情，就可以知道名字带D的家伙的厉害！ 最近折腾iPad的一些东西，有一些3D效果的交互。有些事情，总以为是遥远的未来，谁知真正发...
现在的css3真是强大，之前很多动画都是用jq来实现，但是css3制作的动画要比jq实现起来简单很多，今天呢，我自己也写了一个css旋转动画和大家分享。效果如下面的图片 思路：1.制作之前呢，我们先来整理一下思路，这个圆轴轨迹上一共有八个圆。 仔细看的话，你会发现一个规律，那就是一个月是360度的，里面放了八个圆，也就是每个圆都是占了45度，然后平均的...