精通CSS（5.6.3-end）Pixy&Fairy&pureCSSToolHint&scale

来源：互联网发布：php bin2hex写入文件编辑：程序博客网时间：2024/06/05 21:03

1.Pixy样式的翻转
①多图像方法的主要缺点：当浏览器第一次加载鼠标悬停位置的图像时会产生短暂的延时。
②解决：将鼠标悬停位置处的图像作为父元素的背景图像，从而预先下载/Pixy。
③Pixy工作原理：将几个背景图像拼接于一个图像上，改变该图像的位置来显示出不同的样式。

Code:

<!doctype html><html><head><title></title><meta charset='utf-8'><link rel="stylesheet" type="text/css" href=""><style type="text/css">/*Pixy:①虽然只有一张背景图像，但却是多张背景的集合。②使用切换背景图像的位置来替代切换背景图像。③好处：单个图像减少服务器请求的数量/聚集所有按钮状态*/a:link,a:visited{display: block;width: 203px;height: 72px;text-indent: -999px;background: url(images/buttons.png) -203px 0 no-repeat;}a:hover,a:focus{background-position: right top;}a:active{background-position: left top;}</style></head><body><p><a href="">yyc</a></p></body></html>

Result：

①:link,:visited

②:hover,:focus

③:active

2.CSS精灵
①是什么？由许多不同的图标（icon）、按钮（Button）或图形（figure）拼接的图像。

3.纯CSS工具提示

①是什么？当鼠标悬停在具有title属性的元素时，一些浏览器弹出的提示文本框。

Code：

<!doctype html><html><head><title></title><meta charset='utf-8'><link rel="stylesheet" type="text/css" href=""><style type="text/css">a.tooltip{position: relative;}a.tooltip span{display: none;}/*绝对定位元素的定位相对于最近的已定位的元素（如果没有，则相对于根元素）。这里，因为已经定位了锚元素，所有span相对于锚元素进行绝对定位。*/a.tooltip:hover span,a.tooltip:focus span{width: 10em;display: block;position: absolute;top:1em;left:2em;padding:0.2em 0.6em;border:1px solid #963;background-color: #ff6;color:#000;}</style></head><body><p><a href="http://www.andybudd.com" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England.</p></body></html>

Result：

4.用CSS3实现翻转（scale）

Code：

<!doctype html><html><head><title></title><meta charset='utf-8'><link rel="stylesheet" type="text/css" href=""><style type="text/css">a{font-size: 1.2em;font-weight: 600;}a.yyc{display: block;width: 8em;height: 1.6em;line-height: 1.6;margin-left:40%;text-align: center;border:1px solid #66a300;background-color: #8cca12;color:#fff;box-shadow: 2px 2px 2px #ccc;-webkit-box-shadow: 2px 2px 2px #ccc;-moz-box-shadow: 2px 2px 2px #ccc;text-decoration: none;border-radius: 6px;-webkit-border-radius:6px;-moz-border-radius:6px;text-shadow:2px 2px 2px #66a300;background-image: -webkit-gradient(linear, left top, right bottom, from(#c287d1), to(#42fc82));-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.52, transparent), to(white));/*①below 2px代表在倒影的位置和距离。②color-stop(a,b)代表倒影的宽度和颜色。*/}/*以下内容来自：http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html【CSS3 经典教程系列：CSS3 线性渐变（linear-gradient）】1.CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)2.几种现代浏览器的内核：Mozilla(Firefox)/Webkit(Chrome,Safari)/Opera(Opera)/Trident(IE)3.-moz-linear-gradient(a,b,c);①a表示线性渐变的方向，top代表从上到下，left代表从左到右，topleft代表从左上角到右下角。②b和c代表起点和终点颜色。4.-webkit-gradient(a,b,c,d,e);①a表示渐变类型(type)，linear&radial。②b和c代表渐变的起点和终点。③d和e代表颜色起点和终点，from()&to()。5.-o-linear-gradient(a,b,c);①a表示线性渐变的方向，top代表从上到下，left代表从左到右，topleft代表从左上角到右下角。②b和c代表起点和终点颜色。*/p{font-size: 1.6em;}</style></head><body><p><a class="yyc" href="http://www.baidu.com">Book Now »</a></p></body></html>

Result：

阅读全文

0 0