您的位置：首页 > Web前端 > CSS

一些css、css3画的效果等，持续更新

2016-03-14 20:26 761 查看

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 属性向元素应用 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;
}效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航