今天要给大家介绍一款纯css3实现的机器人看书动画效果。整个画面完全由css3实现的绘制，没有使用任何图片元素。机器人的眼睛使用了动画元素。我们一起看下效果图： 在线预览 源码下载 实现的代码。 html代码： < HTML > { CSS } ...
之前介绍了好多款网页幻灯片，今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片。这款幻灯片图片轮播采用了3D翻转的形式，效果非常不错。一起看下效果图： 在线预览 源码下载 实现的代码。 html代码： pure CSS slice cube slideshow @import 'http://codepen.io/pixelass/pen/wftos.css' ...
当今是个读图时代。纯大部分网页或多或少都会用到图片。特别是图片较多的网页。图片的布局和排版就非常重要了。今天要给大写带来一款纯css3实现图片三角形排列。适合一系列的图片。效果图如下： 在线预览 源码下载 实现的代码。 html代码: ...
其实这个示例蛮无聊的 很简单 也没什么实际的用处. 主要是展示了 CSS3 如何实现动画效果. 写这个主要是想看一看 完成这样的效果 我到底要写多少代码. 同时和我熟悉的java做个比较. 比较结果不用我说大家也知道. 用java来实现示例中的效果 如果不借助第三方的框架 编码量将是相当大的. 就算用flash 来做 编码量也不小. 也许有人会说用flash开发这么一个东西, 在强大的开发工具的帮助下根本不用编码, 呵呵 好吧... 其...
今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单，但效果很好，非常漂亮。一起看下效果图： 在线预览 源码下载 实现的代码。 html代码： WIFEO css3代码： .contener{ width: 300px; height: 60px; background-color: #00bcd4; line-height: 60px; color: #ffffff; font-weight: 300; ...
作者：zhanhailiang 日期：2014-10-24 不做前端很久了，今天从重构师那里了解到CSS3已经可以实现很多以往必须通过JS才能实现的效果，如渐变，阴影，自动截断文本展示省略号等等强大效果，而且这些功能日渐成熟，已经大量用于生产环境。H5真的日渐成熟了，得恶补下了。 以下分享实现指定文本超出部分以省略号展示的Demo： .text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:el...
CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果。例如，:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣的效果。本教程将告诉你如何使用 CSS3 为元素创建一组漂亮的图片堆叠效果。 效果演示 插件下载
之前为大家介绍了好几款响应式导航。今天再给大家带来一款纯css3实现的响应式导航。这款导航还有个响应式的搜索框。废话少说，直接上图： 在线预览 源码下载 实现的代码。 html代码： Hom...
之前为大家介绍了好多导航菜单，今天给大家分享一款简洁的纯css3代码实现的动画导航。鼠标经过的时候以背景色以菱形渐变为长方形。效果图如下： 在线预览 源码下载 实现的代码。 html代码： MENU ONE MENU TWO MENU THREE css3代码： .contener_link{ ...
效果图： 实现原理： 这个效果的主要css样式有： 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>visibility: hidden; 也是隐藏，与display:none;相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置 我们要用到3层div进行旋转来得到这个效果（ps:3层div的大小是一样的）。 最外层div(boxF)旋转120度。第二层(boxS)旋转-60度，第三层(boxT)再旋转-60度，此时刚好回正...
今天给大家分享一款纯css3实现的数字统计游戏。这款游戏的规则的是将所有的数字相加等于72。这款游戏的数字按钮做得很美观，需要的时候可以借用下。一起看下效果图： 在线预览 源码下载 实现的代码。 html代码: CSS Counter Game Pick the numbers that add up to 72: 64 16 -32 128 4 -8 ...
前面讲过css3可以替代很多js实现的效果，其实很多时候纯css3甚至可以替代图片，直接用css3就可以画出一些简单的图片。虽然css3画出来的图片效果可能不如直接用图片的好，实现起来也比较复杂，最麻烦的是兼容性问题，不如图片来得直接实用。但是换一种思路去思考问题的解决办法往往能激发我们的灵感，也有助于我们学习css3。 下面给出的demo里会有用图片和纯css3实现的风车效果的对比。 先看看静态的效果图： 纯css3实...
在线演示：莲花盛开 在线演示：忙碌光标效果 在线演示：发光效果
之前为大家分享了推荐10款纯css3实现的实用按钮，今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，效果非常好看，一起看下效果图： 在线预览 源码下载 实现的代码。 html代码： Nominate Yourself Nominate Someone Buy Tickets Now css3代码： .btn { display: inline-block; margi...
在软件开发中，web前端开发的动画是我们不可缺少的特效，在css3以前实现动画大多都可靠javascript来实现，其步骤相对于今天的css3来说要复杂的多。尽管有了很多很好框架。得在css3中来实现动画要简单的多。css3中有负责动画的有两个一个是transitions 一个是animations 这个两个可以说是各有不同，今天我先给大家分享transitions 的用法。对于浏览器的支持就不在这里普及了，如果你看不到动画效果，就说明你的浏览器不支持css3 ...