1、css3画出的页面loading效果:
html:
<div class="loading_index"></div>
css3代码:
<style type="text/css">
.loading_index{
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
border-bottom: 6px solid;
border-left: 6px solid;
border-right: 6px solid;
border-top: 6px solid rgba(0, 0, 0, .4);
border-radius: 100%;
height: 50px;
width: 50px;
animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear; /* Firefox */
-webkit-animation: loading 1s infinite linear; /* Safari 和 Chrome */
-o-animation: loading 1s infinite linear; /* Opera */
}
@keyframes loading {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
/*
@-moz-keyframes Firefox
@-webkit-keyframes Safari 和 Chrome
@-o-keyframes Opera
*/
</style>
上面css代码的解释:
css3 animation属性:
使用简写属性,将动画与 div 元素绑定:
css3 @keyframes规则:
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
infinite :无限的;
linear: 线性的;
css3 的transform属性:
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
最终效果图:
2、css设置背景:背景的一些属性用法:
background-image: url(../images/icon/idcard_icon.png);
background-repeat: no-repeat;
background-position: center;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
3 用过一次css画一个多边形,代码如下,里面重要的用法,没完成,可以研究:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css画一个多边形</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<style>
.duobianxing{
width: 135px;
height: 123px;
background: #4974b9;
position: relative;
border-radius: 10px;
margin-left: 100px;
}
.duobianxing:before{
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #4974b9;
border-bottom: 13px solid transparent;
}
.yuanjiao{
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
transform: rotate(45deg);
margin-left: 100px;
}
</style>
<body>
<div class="duobianxing">
</div>
<div class="yuanjiao"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
上面代码解释:
content:content属性与:before及:after伪元素配合使用,来插入生成内容。
transform:rotate(9deg) 使元素旋转。正数-顺时针旋转9°,负数-逆时针旋转9°
transform:rotate(9deg) 使元素旋转。正数-顺时针旋转9°,负数-逆时针旋转9°
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
还有其他的:
还有其他的:
skew(17deg):倾斜; 正数-逆时针方向倾斜17° 负数-顺时针方向倾斜17°;
scale(1.5): 比例缩放;正数:以1.5的比例放大 负数-以1.5的比例缩小;
translate(20px,10px): 位移;表示向右位移20px,向下位移10px ;向左向上位移则为负。
效果图:
4.利用上面的transform: translate(x, x)属性这边可以设置另一种让div居中的方法,这种方法尤其在不知道div的高度宽度下使用非常好:
<style>
.parent{
border: 1px solid #ccc;
width: 200px;
height: 200px;
position: relative;
margin: 100px;
}
.child{
border: 1px solid #999;
width: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
重要的:
/* Use this for centering if unknown width/height */
transform: translate(-50%, -50%);
由此可见:translate(percent, percent)这个使div移动百分比,是相对于div本身的大小来移动的;
5、css画内外阴影:下面是给一个圆设置的内外阴影,很有立体效果:
.nav_circle {
width: 23px;
height: 23px;
border-radius: 23px;
background-color: #f1eff0!important;
box-shadow: 1px 2px 2px 1px #fff inset,0 1px 5px 2px #999;
}
效果图: