分类 CSS 下的文章

纯CSS3实现GIF图片进度加载效果

纯CSS3实现GIF图片进度加载效果

没有做兼容 只支持Chrome浏览器

主要掌握CSS3 animation box-shadow和transform属性

思维很重要 多看多写 开拓思维

单纯用伪元素写出各种效果 伪类很强大 多加深入了解

效果地址:http://www.29ym.com/demo/css3gif.html

CSS实现电池充电效果

学会如何运用animation属性的定义以及效果

1
animation

属性是一个简写属性,用于设置六个动画属性:

  • animation-name,绑定动画keyframe
  • animation-duration,规定完成动画所花费的时间
  • animation-timing-function,规定动画的速度曲线
  • animation-delay,规定动画开始之前的延迟
  • animation-iteration-count,规定动画应该播放的次数
  • animation-direction,规定是否应该轮流反向播放

效果地址:http://www.29ym.com/demo/dianchi.html

较常用的头部META信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- 字体编码 -->
<meta charset="utf-8" />
<!-- 关键字 -->
<meta name="keywords" content="" />
<!-- 说明 -->
<meta name="description" content="" />
<!-- 作者 -->
<meta name="author" content="" />
<!-- 设置文档宽度、是否缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<!-- 优先使用IE最新版本或chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 360读取到这个标签立即钱换到极速模式 -->
<meta name="renderer" content="webkit" />
<!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- UC强制全屏 -->
<meta name="full-scerrn" content="yes" />
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="ture" />
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app" />
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- window phone 点亮无高光 -->
<meta name="msapplication-tap-highlight" content="no" />
<!-- 安卓设备不自动识别邮件地址 -->
<meta name="format-detection" name="email=no" />
<!-- iOS设备 -->
<!-- 添加到主屏幕的标题 -->
<meta name="apple-mobile-web-app-title" content="标题" />
<!-- 是否启用webApp全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置状态栏的背景颜色,启用webapp模式时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent/black/default" /><!-- 半透明/黑色/默认白色 -->
<!-- 禁止数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no" />
<!--
iOS图标
iPhone/iTouch默认是57*57
iPad,72*72,可以没有,但推荐有
Retina iPhone/Retina iTouch,114*114,可以没有,但推荐有
Retina iPad,144*144,可以没有,但推荐有
iPhone 6 plus是180*180,iPhone 6 是120*120
-->
<link rel="apple--touch-icon-precomposed" sizes="width*height" href="xxx.png" />
<!-- iOS启动画面 -->
<!-- iPad启动是不包含状态栏的 -->
<!-- 标准分辨率:1、竖屏(768*1004);2、横屏(1024*748)
Retina:1、竖屏(1536*2008);2、横屏(2048*1496) -->
<!-- iPhone/iTouch启动是包含状态栏的 -->
<!-- 标准分辨率(320*480)、Retina(640*960)、iPhone 5/iTouch 5(640*1136) -->
<link rel="apple-touch-startup-image" sizes="width*height" href="xxx.png" />
<!-- iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 -->
<link rel="apple-touch-startup-image" href="xxx.png" media="(device-width:375px)">
<link rel="apple-touch-startup-image" href="xxx.png" media="(device-width:414px)">
<!-- 智能添加广告条 -->
<meta name="apple-itunes-app" content="app-id=myappstoreID,affiliate-data=myaffiliatedata,app-argument=myurl" />

子元素浮动父容器高度不能自适应的CSS解决方法

网页前端工作者经常会遇到子元素设置float浮动后导致父容器高度不能自适应,也就是俗称的外部容器不能被“撑大”,常见表现为背景或边框异常,这时我们就需要来清除“闭合浮动”,方法主要有以下4种:

1. 额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动

1
(clear)

以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。

虽然许多人不喜欢这种方法,但是它却是W3C推荐的方法。

1
<div style="clear:both;"></div>

或者使用

1
<br style="clear:both;" />

2. 使用after伪类

这种方法就是对父容器使用

1
after

伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。

这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html比较干净,所以用得还是比较多的。

以下为一个采用伪类的CSS示范写法:

1
2
3
4
5
6
7
#box:after{  
     content:".";  
     height:0;  
     visibility:hidden;  
     display:block;  
     clear:both;  
}

3. 设置overflow为hidden或者auto

这种做法就是将父容器的

1
overflow

设为

1
hidden

或auot 阅读剩余部分 –

IE6下CSS样式失效时如何进行调试

按CSS HACK规则来写一个专门针对IE6下的此样式。

A)对于#开头的样式或直接在下面复制一个当前的同名样式,并在前面加上IE6的特殊标志*html.
如:

1
2
3
#footer{width:200px;color:#ff0000;} /* for FF, IE8 */
*html #footer{width:200px;color:#ff9900;} /* for IE6 */
*+html #footer{width:200px;color:#ff9900;} /* for IE7 */

/*请注意上面的书写顺序,FF->IE6->IE7,若ie7下样式正常可不用写最后一行*/
B)对于. 开头的样式可直接在样式的{}内重写样式。
如:.

1
2
3
4
5
6
7
8
footer{width:200px;color:#ff0000;}
.footer{width:200px; /* for FF, IE8*/
*width:250px; /* IE7支持 */
_width:320px; /* IE6支持 */
color:#ff0000; /* for FF,IE8 */
*color:purple; /* IE7支持 */
_color:brown; /* IE6支持 */
}

3)再次调试,多数情况下样式已经正常了。不过,有时上面会有一些样式的影响力渗透到当前的样式上,直接把当前的样式给覆盖掉。这样就要加上一句

1
clear:both;

4)可能是因为margin 或padding等不兼容造成的,出现此情况尝试在html的头部添加如下内容。

1
&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt;

注意:此段代码只针对ie浏览器有效!

5)浮动ie产生的双倍距离

1
2
3
4
5
6
7
8
9
10
11
#box{

float:left;

width:100px;

margin:0 0 0 100px; //这种情况之下ie会产生200px的距离

display:inline; //使浮动忽略

}

这里细说一下block,inline两个元素,block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

1
2
3
4
5
6
7
8
9
#box{

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的的效果

display:table;//将对象作为块元素级的表格显示

}

CSS3 :nth-child() 选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*{ margin: 0; padding: 0; list-style: none;}
ul{
width: 600px;
height: 600px;
margin:0 auto;
}
ul li{ width:300px;
height: 300px;
float: left;
background-color: red;
}
li:first-child{background-color: blue;}
li:first-child:hover{background-color: pink;}
li:nth-child(2){ background-color: yellow;}
li:nth-child(2):hover{ background-color: red;}
li:nth-child(3){ background-color: red;}
li:nth-child(3):hover{ background-color: yellow;}
li:last-child{ background-color: pink;}
li:last-child:hover{ background-color: blue;}

 

网站灰色调 CSS

这个就不多解释了,让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用。
代码如下:

1
2
3
4
5
6
7
8
9
body{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray;
}

在 Retina 屏幕下显示变模糊的问题,可以加上:

body{
    ...
    -webkit-transform: translateZ(0);
    ...
}

用CSS画三角形

作为一个不太会写CSS的

1
伪前端

来说,用纯CSS画各种形状是一件很牛X的事情,今天就先画一个三角形吧。

最终效果图:

css:

div{
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: transparent rgba(0,0,0,0.6) rgba(0,0,0,0.6) transparent;
}

说明

html部分很简单,就一个div;
css部分定义宽度和高度都为0,border宽度是30px并且border-style是实心的div,
其中最重要的是最后一句,也是最关键的一句,

1
border-color

属性的四个参数分别定义了边框的

1
上-右-下-左

(顺时针)的样式,
上、左是透明的,下、右使用rgba定义了黑色且透明度为0.6的颜色。

同理, 可以修改

1
border-clor

属性画出各种形状:

transparent

Position定位

position定位

position共有三种形式的定位:绝对定位、相对定位和静态定位。

position属性值:

static: 静态定位(default)
relative: 相对定位
absolute: 绝对定位
fixed: 固定定位

注意:absolute和fixed都是绝对定位形式。
绝对定位:完全脱离标准流,兄弟元素不再受其影响。

absolute和fixed的相同点

  1. 完全脱离标准流
  2. 未设置偏移量时,都定位在父元素的左上角(第四象限)
  3. 与父包含块设置
    1
    postition:relative

    与否没有关系,初始位置总是在父元素的左上角。

偏移量:元素设置定位(绝对或相对)后就具有偏移属性和堆叠属性(z-index)

absolute和fixed的不同点

一、当设置偏移量时,偏移参照基准

absolute

  1. 无已定位的祖先元素,以为基准偏移
  2. 有已定位的祖先元素,以距其最近的、已定位的祖先元素为基准偏移

fixed

  1. 无论有、无已定位的祖先元素,都以浏览器可视窗口为基准偏移。

二、表现形式(产生滚动条时)

absolute

  1. 位置会随滚动条变化

fixed

  1. 位置固定,不会随滚动条变换
  2. 被它遮盖的元素,可以从其下方穿过

偏移量的设置

在对元素设置固定定位(

1
fixed

)时,如果希望本元素包含在其父包含块中,则不需要对齐设置偏移量。

fixed定位

定位形式——绝对定位
特点:位置固定不变,兄弟元素会从其下方穿过

未设置偏移量:
有已定位的祖先元素时,以祖先元素为基准
无已定位的祖先元素时,以浏览器窗口为基准

设置偏移量时:
无论有无以定位的祖先元素,都已浏览器窗口为基准偏移。