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

一、效果

二、知识点

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. NumPy库

    NumPy详细教程(官网手册翻译) Python之Numpy详细教程 一.基础篇 1.NumPy - Ndarray 对象 ndarray描述相同类型的元素集合, 可以使用基于零的索引访问集合中的项目 ...

  2. Senparc之OAuth原理

    今天学习了网易云课堂的 盛派的微信开发课程之OAuth微信网页授权:OAuth原理,边听边来波笔记: 1.什么是OAuth? OAuth 你的接口提供给别人使用,你需要提供Oauth,可以让被人使用, ...

  3. 基于docker搭建开源扫描器——伏羲

    基于docker搭建开源扫描器——伏羲 1.简介 项目地址 伏羲是一款开源的安全检测工具,适用于中小型企业对企业内部进行安全检测和资产统计. 功能一览: 基于插件的漏洞扫描功能(类似于巡风) 漏洞管理 ...

  4. Python爬虫7-Cookie & Session

    GitHub代码练习地址:1.手动利用cookie访问网页:https://github.com/Neo-ML/PythonPractice/blob/master/SpiderPrac10_cook ...

  5. [Swift]LeetCode500. 键盘行 | Keyboard Row

    Given a List of words, return the words that can be typed using letters of alphabet on only one row' ...

  6. [Swift]LeetCode701. 二叉搜索树中的插入操作 | Insert into a Binary Search Tree

    Given the root node of a binary search tree (BST) and a value to be inserted into the tree, insert t ...

  7. [Swift]LeetCode706. 设计哈希映射 | Design HashMap

    Design a HashMap without using any built-in hash table libraries. To be specific, your design should ...

  8. Kubernetes---存储

    pod中定义需要的存储卷,类型为pvc pvc 与  pv 建立绑定关系 kubectl explain pv 定义pv时不要加namspce

  9. innerHTML，outerHTML，innerText，outerText

    - innerHTML 设置或获取位于对象起始和结束标签内的 HTML - outerHTML 设置或获取对象及其内容的 HTML 形式 - innerText 设置或获取位于对象起始和结束标签内的文 ...

  10. 我曾做过陈士成，也做过孔乙己，还做过阿Q

    一. 我现在是陈士成,陈士成现在是我.为什么这么说呢? 那年那天,天刚微微亮,似乎还在打着哈欠.我和父亲去得很早,为的就是在“小升初的考试成绩榜单”前面占一个有利的位置.我不记得当时穿的厚还是不厚,体 ...