刚学习了这个案例，然后觉得比较好玩，就练习了一下。然后发现其实也不难，如果你经常使用PS或者Flash的话，应该就会知道画个叮当猫是很容易 的事，至少我是这么觉得。但是，用CSS3画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的 人物形象出来，再加上一些动画效果，就活了，那就更好玩了！OK，开始之前，先把效果图晒一下： PS:说实话，我觉得挺可爱的，小时候...
本文介绍使用css3的animation画一个太阳系行星公转的动画，再加以改进，讨论如何画椭圆的运行轨迹。然后分析京东和人人网使用animation的实际案例，最后结合css3的clip-path做一些比较特别的动画。 太阳系最终的效果图如下： css3的animation是通过关键帧的形式做出来的，首先设定一个动画的运行时间，然后在这个时间轴上的若干位置处插入关键帧，浏览器根据关键帧设定的内容做过渡动画。animation常结合transform属...
CSS3 Gradient介绍参考地址： http://www.zhangxinxu.com/wordpress/?p=3639 效果图： html: css: .colorWheel { position: relative; width: 16em; height: 16em; background: linear-gradient(36deg, #7c1 42%, transparent 42%),linear-gradient(72deg, #999 75.48%, transparent 75.48% ),linear-gradient(-36deg, #479bf6 42%, transparent ...
现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的，因为默认的JavaScript警告框的样式往往（与你自己设计的漂亮样式）很不协调很囧。这使开发者步入找出哪种解决方案能更好地实现更友好的用户界面的道路。 在这个教程中我想解释一下我们如何能把几个将要出现在网页上方的CSS3通知框放在一起。用户可以点击这些通知框使它们逐渐淡出消失，最终将他们从DOM中移除。作为一个有趣的附加功...
我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单，并且可以结合渐变实现更为漂亮的效果。 因此使用图片实现五角星已经毫无必要（图片占用额外的请求，且数据量大。除非要支持低版本的桌面IE浏览器）。 首先我们创建一个三角形，这通常是使用带大尺寸边线而零内容尺寸的元素来实现，代码示范： .tri { width: 0; height: 0; b...
用CSS实现图片垂直居中的方法有很多，针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中。 代码如下： 1 .box{4 display: flex; /*容器为伸缩盒*/5 align-items: center; /*纵轴方向上的对齐方式设置为居中*/6 }7 img{8 width: 100%;9 } 以上是新版伸缩盒实现的，支持安卓4.4+，如果需要兼容安卓4.4-，需要再另外添加旧伸缩盒，如下： .box{ display:...
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。 我们可以给书签添加卷角效果，以使其更为逼真。所谓的“卷角”实际上可以用小角度倾斜的阴影效果来模拟。 用CSS3的伪元素实现这个效果很容易。 先给出一个实例，我们在WOW站点页面左边栏实现了如下的效果（红框内）： 我们再来看看具体实现。 首先创建一个div元素容纳文本信息（可以包含更多元素），class取名为“狗耳朵”也就是卷...
我们在读纸质书的时候，经常用笔划波浪线来突出重点内容，以强化视觉感受。 而在Web页面上，没有CSS3之前，我们只能用背景图片来实现类似功能，这当然不是个高效的方式，且难于维护和调整。 比如你只是想调整下颜色、线条大小和倾斜的角度，你都得打开作图软件来折腾一下。 现在我们可以使用CSS3伪元素及其背景渐变（gradient）来实现这一有趣而实用的效果。 波浪线特征 我们观察下波浪线，有这么2个基本几何特征： 1...
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制，而其中图书的展示是最为简单的一种， 无需复杂的建模过程，使用图片和CSS3的一些变换即可实现更好的展示效果，简洁而实用。 书本的3D模型是所有商品中最为简单的，因为其本质上就是一个立方体（cube），只是带有封面/封底和左侧封条。 所以要构造一个3D书本展示，问题就被分解为构造一个立方体+旋转+图片背景。 1. 构造一个立方体 要创建一个立方体，...
日食现象是月亮挡在了地球和太阳之间，也就是月亮遮挡住了太阳。 所以要构造日食，我们需要2个对象：一个代表月亮，一个代表太阳。 我们把整个日食过程分解为3个阶段：1. 缓慢移入 2. 短暂停留 3. 缓慢移出。 在此期间，会产生3个彼此关联的动画。 首先是月亮的位置移动，我们通过改变月亮的X坐标（left或right属性值）来实现（注意把太阳和月亮均设置成绝对定位）。 其次太阳会逐步呈现出圆晕的光线效果，我们...
纺锤形分割线用于仿真纸中间被剪开时的阴影效果，也就是中间咧开而两边收拢的情况。 简单讲就是两头小，中间大。如下所示（请忽略中间的wow图标）： 使用CSS3来实现这种效果，可以使用border-radius和box-shadow两个属性。 首先我们需要一个DIV来容纳分割线。 接下来我们利用class=mask的div来生成框阴影： box-shadow: 0 0 8px black; 对照box-shadow的语法： 这条语句表示模糊距离为8px，颜色为黑的...
话不多说，直接写代码，希望能够对大家有所帮助！ 1.html代码如下： 2.css代码如下： .triangle_border_right{ width:0 !important; height:0; border-width: 7px 0 8px 11px; margin: 27px 10px 0 0; border-style:solid; border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/ ...
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。rgba()后面的百分比表示位置。 具体代码： background: -webkit-linear-gradient(top, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Safari、Chrome */background: -o-linear-gradient(bottom, rgba(255,255,...
直接上源码：```html 使用CSS3美化按钮 body { padding-top: 50px; } .download-info { text-align: center; } /* 默认状态下的按钮效果 */ .btn { background-color: #0074cc; *background-color: #0055cc; /* IE6,7 */ /* CSS3渐变制作背景图片 */ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); background-image: -...
列举几个简单的文章排行榜数字效果 一：使用list-style来显示数字、圆点、字母或者图片 li{width:300px; border-bottom: 1px dotted #ccc; line-height: 30px; height: 30px; overflow:hidden } li{list-style: decimal inside; } 文章1 文章2 二：使用伪元素:before 使用这种方法，需要在父级标签设置counter-reset:section; ul{counter-reset:section;} li{width:300px; border-bottom: ...