欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

第五课 Css3旋转放大属性,正六边形的绘制

程序员文章站 2022-03-29 14:42:48
恢复内容开始 一、效果 二、知识点 1、background-color: rgba(0,0,0,.4); (红色、绿色、蓝色、透明度(0-1)) 2、position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* ......

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

一、效果

第五课 Css3旋转放大属性,正六边形的绘制

二、知识点

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相似 独占一行

三、源码

第五课 Css3旋转放大属性,正六边形的绘制
<!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="images\1.png"></li>
        <li><img src="images\1.png"></li>
        <li><img src="images\1.png"></li>
        <li><img src="images\1.png"></li>
        <li><img src="images\1.png"></li>
        <li class="important"><img src="images\1.png"></li>
        <li><img src="images\1.png"></li>
        <li><img src="images\1.png"></li>
        <li><img src="images\1.png"></li>
        <li><img src="images\1.png"></li>
        <li><img src="images\1.png"></li>
        <li><img src="images\1.png"></li>
        <li><img src="images\1.png"></li>
        <li><img src="images\1.png"></li>
     </ul>
   </div>
 </body>
</html>
view code

 

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