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

一、效果

二、知识点

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. 解决用友U8删除用户时提示“用户已启用”不能删除的问题

    USE UFSystem go DECLARE @cUser_Id NVARCHAR(20) SET @cUser_Id='用户的登录名' DELETE l FROM dbo.UA_TaskLog l ...

  2. easyui自定义皮肤及缺陷修改

    引言: 一个商业项目的需要,又因为时间紧迫的关系,准备购买一套简洁,易用,可定制化强的UI,经过对国内外多家UI产品进行了对比, 包括:FineUI, EasyUI, EXT.NET, EXTJS, ...

  3. webpack 4.0 中 clean-webpack-plugin 的使用

    其实 clean-webpack-plugin 很容易知道它的作用,就是来清除文件的. 一般这个插件是配合 webpack -p 这条命令来使用,就是说在为生产环境编译文件的时候,先把 build或d ...

  4. C 基于数组存储的堆栈实现

    一.堆栈简介 对于需要管理的队列,主要操作是在序列的末尾插入和取出(删除)元素,有这样操作要求的序列我们称之为堆栈(Stack). 堆栈可以认为是具有一定约束的线性表,插入和删除都作用在一个称为栈顶( ...

  5. [Swift]LeetCode338. 比特位计数 | Counting Bits

    Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num calculate the ...

  6. [Swift]LeetCode844. 比较含退格的字符串 | Backspace String Compare

    Given two strings S and T, return if they are equal when both are typed into empty text editors. # m ...

  7. C语言——Win10系统下安装VC6.0教程

    学习一门语言最重要的一步是搭建环境,许多人搭建在搭建环境上撞墙了,就有些放弃的心理了:俗话说,工欲善其事,必先利其器:所以接下来我们进行学习C的第一步搭建环境; 第一步:先解压我们下载好的VC6.0软 ...

  8. JVM内存知识备忘

    又是一篇备忘... 主要记录一些知识,进行一些资源的汇总. 先来群里liufor大大提供的两张图,清晰易懂: Dockerized Java https://www.youtube.com/watch ...

  9. BBS论坛（十八）

    18.首页轮播图实现 (1)front/css/front_base.css .main-container{ width: 990px; margin: 0 auto; overflow: hidd ...

  10. Linux命令之sftp - 安全文件传输命令行工具

    用途说明 sftp命令可以通过ssh来上传和下载文件,是常用的文件传输工具,它的使用方式与ftp类似,但它使用ssh作为底层传输协议,所以安全性比ftp要好得多. 常用方式 格式:sftp <h ...