发布于 2017-04-13 22:10:39 | 42 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程,程序狗速度看过来!

CSS层叠样式表

CSS(层叠样式表) 即 级联样式表 。 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。


虽然这不算什么亮点,不过也可以供路上的小伙伴学习下

直接上干货:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 text-decoration: none;
 list-style: none;
        }
        .container {
 width: 200px;
 height: 200px;
 display: inline-block;
 margin: 100px;
 border: 1px solid #ccc;
 overflow: hidden;
 -webkit-animation: Rotate 6s linear infinite;
        }
        .c_r, .c_l {
 width: 99px;
 height: 200px;
 float: left;
 position: relative;
        }
        .min_r, .min_l, .core_r, .core_l {
 position: absolute;
        }
        .c_r, .min_r, .core_l {
 background-color: #fff;
        }
        .c_l, .min_l, .core_r {
 background-color: #000;
        }
        .min_r, .min_l, .core_r, .core_l, .container {
 border-radius: 50%;
        }
        .min_r, .min_l {
 width: 100px;
 height: 100px;
 z-index: 10;
        }
        .min_l {
 left: 50%;
 bottom: 1px;
        }
        .min_r {
 right: 50%;
 top: 0;
        }
        .core_r, .core_l {
 width: 20px;
 height: 20px;
 top: 40px;
 left: 40px;
        }
        @-webkit-keyframes Rotate {
 0%{transform: rotate(0deg)}
 100%{transform: rotate(360deg)}
        }
        @keyframes Rotate {
 0%{transform: rotate(0deg)}
 100%{transform: rotate(360deg)}
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="c_l">
 <span class="min_l">
 <span class="core_l"></span>
 </span>
        </div>
        <div class="c_r">
 <span class="min_r">
 <span class="core_r"></span>
 </span>
        </div>
    </div>
</body>
</html>


相关阅读 :
css 实现旋转八卦图
css实现导航下拉菜单的示例
CSS实现悬浮出现双括号示例代码
纯CSS实现扑克牌效果
利用CSS实现居中对齐
css实现input文本框的双边框美化
利用HTML和CSS实现常见的布局
纯css实现Magicline Navigation(下划线动画导航菜单)
我就是要用CSS实现
CSS实现垂直居中的常用方法
css实现会折叠、展开的菜单导航栏效果
纯CSS实现的漂亮的立体图片边框效果,阴影代码
最新网友评论  共有(0)条评论 发布评论 返回顶部
月排行榜

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  服务