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

最新推荐文章于 2022-12-13 17:10:34 发布

十年树木_2015

最新推荐文章于 2022-12-13 17:10:34 发布

阅读量877

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_30337695/article/details/50889479

版权

css 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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;
}

效果图：

十年树木_2015

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一些css、css3画的效果等，持续更新

1、css3画出的页面loading效果：html：css3代码：.loading_index{ position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; border-bottom: 6px solid; border-left: 6px solid;
复制链接

扫一扫

专栏目录