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

一、效果

二、知识点

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. angular5与angular6的比较

  2. Signed Distance Field Shadow in Unity

    0x00 前言 最近读到了一个今年GDC上很棒的分享,是Sebastian Aaltonen带来的利用Ray-tracing实现一些有趣的效果的分享. 其中有一段他介绍到了对Signed Distan ...

  3. PHP零基础入门

    字符函数库: 函数库基础 安装字符串函数库 字符串函数库列表 函数是可以实现特定功能,可以重复执行的代码段. 函数分 内置函数 和 用户函数. 内置函数是指PHP本身提供的各类库函数. 字符串函数库, ...

  4. 如何将多个数据的- 转为：来匹配josn格式

    var str = `北京 2 河北 3 河北-邯郸 301 河北-保定 302 河北-邢台 303 山东 4 山东-青岛 401 山东-烟台 402`; var arrStr = str.split ...

  5. [Swift]LeetCode476. 数字的补数 | Number Complement

    Given a positive integer, output its complement number. The complement strategy is to flip the bits ...

  6. 为什么大一先要学C语言（面向过程）再学C++或JAVA(面向对象)？

    面向对象和面向过程各有千秋 一.面向过程与面向对象对比  面向过程:强调的是每一个功能的步骤,有很多很多方法组成,这些方法相互调用,完成需求. 面向对象:强调的是对象,然后由对象去调用功能. 面向过程 ...

  7. 一步一步用Canvas写一个贪吃蛇

    之前在慕课网看了几集Canvas的视频,一直想着写点东西练练手.感觉贪吃蛇算是比较简单的了,当年大学的时候还写过C语言字符版的,没想到还是遇到了很多问题. 最终效果如下(图太大的话 时间太长 录制gi ...

  8. Tomcat相关面试题，看这篇就够了！保证能让面试官颤抖！

    Tomcat相关的面试题出场的几率并不高,正式因为如此,很多人忽略了对Tomcat相关技能的掌握. 这次整理了Tomcat相关的系统架构,介绍了Server.Service.Connector.Con ...

  9. github学习：如何从本地把项目上传到github&&如何把github项目通过clone复制下来，详细教程

    一.第一步---注册一个Github账号 首先要在GitHub上创建一个帐号,可以去官方网站注册一个账号. 前提:本地安装一个git 本人github:https://github.com/saucx ...

  10. JVM基础系列第9讲：JVM垃圾回收器

    前面文章中,我们介绍了 Java 虚拟机的内存结构,Java 虚拟机的垃圾回收机制,那么这篇文章我们说说具体执行垃圾回收的垃圾回收器. 总的来说,Java 虚拟机的垃圾回收器可以分为四大类别:串行回收 ...