<div class="wave"> 水波纹效果 <div class="wave1"></div> <div class="wave2"></div> <div class="wave3"></div> </div> css .wave{ position: relative; border: 1px solid silver;

效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&

一.文本相关属性 1.字体 (1)字体设置 在HTML中,字体通过<font face="字体名称">来设置.在CSS中字体通过font-family属性来控制,里面可以放多个字体名称,该设置是告诉浏览器,首先找第一个字体类型显示,如果找不到,用第二个,以此类推,直到最后一个,如果再找不到,就采用默认. (2)文字大小 CSS采用font-size的方法来显示字体大小,该属性的值可以采用多种长度单位. px:相对单位,表示浏览器上1个像素的大小.因此,不同浏览器会有不同的显

CSS3全新的背景图片方案 firefox支持指定一个元素的ID将它作为另一个元素的背景-moz-element(#ID), webkit系支持-webkit-canvas(xxxx)动态创建一个canvas作为它的背景 1.firefox <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&qu

1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,border-radius 属性用于创建圆角.border:2px solid; box-shadow:CSS3边框阴影.在 CSS3 中,box-shadow 用于向方框添加阴影.box-shadow:10px 10px 5px #888888; border-image:CSS3边框图片.通过 CS

CSS3用于控制网页的样式布局. CSS3是最新的CSS标准.   关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览器不支持.   CSS3简介 对于CSS3已完全向后兼容,所以你就不必改变现有的设计.浏览器将永远支持CSS2.   CSS3模块 CSS3倍拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 选择器, 盒模型, 背景和边框, 文字特效, 2D/3D转换, 动

浅玩CSS3 边框.背景.文本效果 一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 spread:阴影的尺寸 color:阴影的颜色 inset(outset):内部阴影/外部阴影 box-shadow: 5px 0 5px 0 #000 outset;//效果图如下 border-radius 圆角 bor

css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css代码,就给.box元素添加了三张背景图,而正因为有了这样一个功能,我们可以利用不停的变换这三张背景图的位置来实现幻灯片切换的效果. html代码非常精简,如下: <body> <div class="box"> </div> </body>

效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <ti

起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下. background-size 首先声明 background-size是一个css3属性. 翻译过来很容易就知道它是用来规定背景尺寸的. 关于浏览器兼容性 IE9+.Firefox 4+.Opera.Chrome 以及 Safari 5+.     用法 background-size有4个值分别是(length | percentage | cover | co

有时候我们需要往边框文字上添加背景与背景图片的时候就有用处了 background的css3有两个新增属性分别是background-clip与background-origin;背景-修剪与背景起点; 首先我们写入html+css代码: 得出来个样子就是: 那如果当我们需要文本或者边框上面添加背景时就需要用到 css3的background-clip与background-ojrgin; background-clip翻译成中文意思就是‘背景-修剪’:背景颜色产生了变化,但是背景图片保持不变;

近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签能够通过固定宽高的方式来压缩大图.从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧.css3出了一个非常牛逼的属性background-size能够直接设置背景图的宽高,直接攻克了前者的疑惑. 那么问题来了,我们的网页

一.什么是“蝉原则”? “蝉原则”,英文称作“cicada principle”,是一种让事物的重复出现符合“自然随机性”的规则,为什么这么说呢? “蝉原则”源自于北美,中国似乎并未有这样的说法,这背后是有有故事的: 北美和东亚蝉的种群是不一样的,在东亚蝉的幼虫生活在土中3年5年或7年:但是北美有一种周期蝉(Magicicada),其生命周期为十三年或十七年,也被称为十七年蝉或十三年蝉.东亚的蝉生命周期短,因此,给人感觉好像每年都有很多蝉,而北美的周期蝉的生命周期很长,因此能够让人明显感觉到每隔

一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用CSS2.1也可以用CSS3.XHTML骨架中可以用CSS3的样式. 在学习CSS之前都是学习选择器,在CSS2中有class.id.标签选择器等. CSS3赋予了强大的选择器. CSS3没有颠覆传统CSS的写法,依然是: 选择器{ k:v; k:v; } CSS有一个特点,遇见自己不认识的选择器.

一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上 同等大小图片进行平铺 当边框中间区域长度不是4角图片大小的整数倍时 会被切割) 铺满(round)(4角上的图片 进行拉伸平铺 不会被切割)(共三个参数) (注释:content宽度/border相应位置宽度 四舍五入张图片填充) number 为截取指定图片四周的宽度作为border的背景填充部分(

css3 动画设置水波纹,效果如下图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,

文字带上渐变色,或者说让文字透出图片.这些效果 CSS 属性也可以完成. 方法一.利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现,我们只需要构造出黑色文字,白色底色的文字 div ,叠加上图片,再运用 mix-blend-mode 即可,简单原理如下: 核心代码如下: <div class="container"> <div class="pic"></div>

边框 圆角边框 盒阴影 边界图片 圆角 CSS3 圆角制作器 指定每个角 背景 多重背景图像 大小 图像的定位 背景剪裁 渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义 指定角度的线性渐变 多个颜色节点的线性渐变 线性渐变------透明度 重复的线性渐变 重复渐变 渐变的大小 closest-side farthest-side closest-corner farthest-corner

css3背景图像相关 兼容性:IE9+ background-clip  背景图片绘制区域 background-clip:border-box; 内容区 <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title>

因为不同浏览器内核的不同所以会产生浏览器兼容性问题 <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>背景颜色的变换</title> <style type="text/css"> div{ width: 200px; height: 200px; background: blue; animation:myfirst 5s; -m

1. (1)background-origin : border-box | padding-box | content-box;(设置元素背景图片的原始起始位置.) //需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示. (2)background-clip(用来将背景图片做适当的裁剪以适应实际需要.) 语法:background-clip : border-box | padding-box | content-box | no-clip 2. backgrou