8个超炫酷的纯CSS3动画及源码分享
在现代网页中，我们已经越来越习惯使用大量的CSS3元素，而现在的浏览器也基本都支持CSS3，所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页。本文要分享8个超炫酷的纯CSS3动画，有几个非常经典，比如大象走路的那个，如果你对CSS3感兴趣，赶紧来看看吧。1、纯CSS3实现大...
纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了，尤其是移动互联网的发展，更是带动了HTML5的迅猛发展，我们也是时候学习HTML5了，以防到时候落伍。今天给大家介绍10款效果惊艳的HTML5应用，方便大家学习，也将应用的源码整理了一下发给大家。1、纯CSS3实现打火机火焰动画这又是一款很酷的纯CSS3动画特效，它是...
纯CSS3实现自定义涂鸦风格的边框
今天我们要来分享一款基于纯CSS3的自定义边框应用，看上去它像一个Tooltip控件，因为下边框有一个小三角，就像很多地方的引用文本框一样。另外这款CSS3边框是涂鸦风格的，看起来很有个性。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。你也可以在这里查看在线演示下面我们来分享一下...
【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件，今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案。加载动画和进度条在网站和 Web 应用中的使用非常流行，特别是在使用 Ajax 技术加载内容的应用场景中，使用时尚的加载动画和进度条告诉用户内容正在加载中是一...
CSS3特效 - 呼吸灯效果
1. 效果图2. 代码如下<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title&g...
【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)
目录【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！【实战HTML5与CSS3 第二篇】绚丽的快速导航！【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)前言昨天的进度有点延缓，只做了快速导航特效，都是晚上回来一点多才基本结束，其中很多问题也没有...
HTML中的css3过渡详解
1.transition-property:规定设置过渡效果的CSS属性的名称。transition-property:all（默认值）->宽高过渡transition-property:width->宽过渡transition-property:height->高过渡2.tran...
CSS3边框图片、边框阴影、文本阴影
边框图片border-image其有五个属性：border-image-source：边框图片的路径border-image-slice：图片边框向内偏移border-image-width：图片边框的宽度border-image-outer：边框图片区域超出边框的量border-image-rep...
CSS3常用字体属性
·font-size：规定文本的字体尺寸·通常用px，百分比，em来设置字体的大小。如：#div{font-size:50px;}·xx-small、x-small...
CSS3的自定义字体@font-face:将图片ICON转为字体
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就...
使用 CSS3 实现超炫的 Loading（加载）动画效果
SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更加的技术实现方案和使...
本周推荐7款CSS3实现的动态特效
大家都知道，在网页制作时使用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代...
CSS3动画效果之transition
CSS3中有两种方式实现动画，transition和animation+@keyframe。两者的作用机制不一样：transition定义在可能要进行动画的元素上，...
如何使用CSS3实现3D效果？
一、首先先做一个平面的3D效果。1.要显示3D效果必须添加perspective（景深），值为px，为观察距离，即观察点到屏幕的距离（Z轴）。代码和效果图如下：二、做一个立方体的3D效果。1.首先在最外层的容器中加上景深perspective，设置值稍微大点，否则拉伸变形影响效果。2.有厚度的模型需...
CSS3中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义：static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过...
CSS和CSS3使用
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的...
抽奖小案例(js抽奖概率+css3旋转动画)
进入界面后2s开始旋转抽奖,3s后停止,效果图：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi...
CSS3基础1
背景 background-image 示例 #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; ...
CSS3解决连续英文字符或数字不能自动换行的问题
在开发中可能会遇到连续英文字符或数字超出容器边界的问题，如<!DOCTYPE html><html><head><meta charset=" utf-8"><style type="text/css"> .ch{ w...
css3 字体自动换行第二行缩进一格
我们知道css中text-indent属性可以使每个段落首行开头文字缩进，如缩进2个文字距离样式。p{text-indent: 2em; /*em是相对单...