---恢复内容开始---

一、效果

二、知识点

1、background-color: rgba(0,0,0,.4);   (红色、绿色、蓝色、透明度（0-1）)

2、position: absolute; left: 0; top: 0; right: 0; bottom: 0;    margin: auto;  /*使用绝对定位万能居中*/

3、z-index: 1;/*绝对定位层级*/

4、transform: rotate(360deg) scale(1.4);/*旋转角度   放大比例   */

5、选择器 优先级 Id>>class> 标签  同级比价数量

6、list-item  与black相似 独占一行

三、源码

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <meta name="Keywords" content="关键词">

  <meta name="Description" content="描述">

  <title>css3旋转放大属性</title>

  <style>

    body{

        margin: 0;

        padding: 0;

    }

    .wrap{

        width: 1000px;

        height: 500px;

        margin: 100px auto;

        background-color: #096;

    }

    .wrap ul{

        list-style: none;

        margin: 0;

        padding: 0;

    }

    .wrap li{

        position: relative;/*相对定位 监管绝对定位*/

        float: left;

        width: 180px;

        height: 105px;

        margin: 30px 10px;

        background-color: rgba(0,0,0,.5);/*(红色，绿色，蓝色，透明度（0-1）)*/

    }

    .wrap li:before,

    .wrap li:after{

        position: absolute;/*绝对定位*/

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0,0,0,.5);

        content:'';/*伪元素激活必备*/

    }

    .wrap li:before{

        transform: rotate(-60deg);

    }

    .wrap li:after{

        transform: rotate(60deg);

    }

    .wrap .important{

        margin-left: 100px;/*左边距*/

    }

    .wrap img{

        position: absolute;/*万能居中position: absolute; top: 0;left: 0;right: 0;bottom: 0; margin: auto;*/

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        margin: auto;

        width: 75px;

        height: 75px;

        z-index: 1;/*绝对定位层级*/

    }

    .wrap img:hover{

        transform: rotate(360deg) scale(1.4);/*旋转角度   放大比例   */

        transition: 1s;

    }

    /*

    选择器 优先级 Id>>class> 标签  同级比价数量

    list-item  与black相似 独占一行

    */

  </style>

 </head>

 <body>

   <div class="wrap">

     <ul>

        <li><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

        <li class="important"><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

        <li><img src="data:images\1.png"></li>

     </ul>

   </div>

 </body>

</html>

---恢复内容结束---

第五课 Css3旋转放大属性，正六边形的绘制的更多相关文章

  1. 第五课 CSS3 and H5 知识点

    概要:CSS3美化样式.自定义字体图标.滤镜设置.CSS3选择器.transform2D转换.新增表单控件.vaild表单验证.表单样式美化等. 属性选择器: E[attr]只使用属性名,但没有确定任 ...

  2. CSS3基础(4)——CSS3 渲染属性

    一. CSS3 计数器详解    CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...

  3. 【Linux探索之旅】第二部分第五课：用户和权限，有权就任性

    内容简单介绍 .第二部分第五课:用户和权限,有权就任性 2.第二部分第六课预告:Nano,刚開始学习的人的文本编辑器 用户和权限.有权就任性 今天的标题也挺任性的啊,虽说小编是一个非常本分的人(真的吗 ...

  4. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  5. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  6. css3--布局正六边形

    怎样布局正六边形?-->如果不能直接布局,就只能采用图形的组合.-->既然是正六边形,则: -->AB=2分之根号3乘2倍的边长,也就是对于矩形ABCD来说,AB是BD的根号3倍(也 ...

  7. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  8. NeHe OpenGL教程 第三十五课：播放AVI

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  9. NeHe OpenGL教程 第五课：3D空间

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

随机推荐

  1. 算法与数据结构(三) 二叉树的遍历及其线索化(Swift版)

    前面两篇博客介绍了线性表的顺序存储与链式存储以及对应的操作,并且还聊了栈与队列的相关内容.本篇博客我们就继续聊数据结构的相关东西,并且所涉及的相关Demo依然使用面向对象语言Swift来表示.本篇博客 ...

  2. Cookie丢失的原因

    最近在运行项目遇见cookie丢失的问题,这里简单总结了几点 1.Cookie的Domain设置不正确2.Cookie超时3.Cookie中含有一些非法字符,致使浏览器丢弃Cookie4.程序源码可能 ...

  3. [Swift]LeetCode74. 搜索二维矩阵 | Search a 2D Matrix

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  4. [Swift]LeetCode232. 用栈实现队列 | Implement Queue using Stacks

    Implement the following operations of a queue using stacks. push(x) -- Push element x to the back of ...

  5. ubuntu(版本14.04)部署Core环境

    遇到问题: 参照官方文档敲完命令之后 出现了提示的问题Unable to lpcate package... ,随后参照官方文档解决方案,又出现了如下问题: 提示找不到依赖的Runtime,在尝试过很 ...

  6. 分布式_zookeeper

    分布式协调服务-zookeeper 分布式环境的特点 1.分布性 2.并发性 程序运行过程中,并发性操作是很常见的.比如同一个分布式系统中的多个节点,同时访问一个共享资源.数据库.分布式存储 3.无序 ...

  7. linux清空文件内容的几种方式与区别

    虽然linux清空文件内容的方式有很多种,但是他们之间有着细微的差别.通过实践我将他们分为两类: 将文件清空,文件大小为0k $ : > filename  $ > filename  $ ...

  8. 火狐l浏览器所有版本

    最近在群里看到好多人需要火狐浏览器的低版本,而且都是跪求,更有甚者是高额悬赏,因此给大家一个链接,免费的,免费的,免费的!!!重要的事说三遍,拿走不谢~~ 火狐所有版本,了解一下,有需要的自行下载. ...

  9. AspNetCore 目前不支持SMTP协议（基于开源组件开发邮件发送，它们分别是MailKit 和 FluentEmail ）

    net所有的功能都要重新来一遍,集成众多类库,core任重道远,且发展且努力!! 我们都知道,很多的邮件发送都是基于这个SMTP协议,但现在的.net core对这方面还不太支持,所以我们选择这两个组 ...

  10. C# Serialize

    一.序列化又称为串行化,是.NET运行时环境用来支持用户自定义类型的机制,目的是以某种存储给对象持久化,或者是将这种对象传输到另一个地方, 二. .NET框架提供了两种序列化的方式 一种是使用Bina ...