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

番茄西红柿发布于2019-04-23 11:51 / 967人阅读

摘要：恢复内容开始一效果二知识点红色绿色蓝色透明度使用绝对定位万能居中绝对定位层级旋转角度放大比例选择器优先级标签同级比价数量与相似独占一行三源码关键词描述旋转放大属性

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

一、效果

二、知识点

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="images1.png">li>
        <li><img src="images1.png">li>
        <li><img src="images1.png">li>
        <li><img src="images1.png">li>
        <li><img src="images1.png">li>
        <li class="important"><img src="images1.png">li>
        <li><img src="images1.png">li>
        <li><img src="images1.png">li>
        <li><img src="images1.png">li>
        <li><img src="images1.png">li>
        <li><img src="images1.png">li>
        <li><img src="images1.png">li>
        <li><img src="images1.png">li>
        <li><img src="images1.png">li>
     ul>
   div>
 body>
html>

View Code

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

idc机房托管超融合服务器第五课绘制六边形图片旋转、放大 python树的绘制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1255.html

HTML5+CSS3整体回顾

摘要：设置文字的描边制表符的长度当前行超过指定容器的边界时是否断开转行规定自动换行的处理方法是否使用一个省略标记标示对象内文本的溢出默认值无省略号当对象内文本溢出时显示省略标记。或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。转载请声明原文链接这篇文章主要总结H5的一些新增的功能以及一些基础归纳，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考...

xingqiba 2019-08-05 10:16 评论0 收藏0
svg系列：1.svg基础知识 & 不一样的svg动画世界

摘要：知识扫盲简介，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画，而不是其他技术，那可以告诉你以下几点本质上是一种图形绘制技术，广泛用于矢量图绘制，适用于多数商业，卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来...

wwolf 2019-08-02 16:10 评论0 收藏0
svg系列：1.svg基础知识 & 不一样的svg动画世界

摘要：知识扫盲简介，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画，而不是其他技术，那可以告诉你以下几点本质上是一种图形绘制技术，广泛用于矢量图绘制，适用于多数商业，卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来...

DirtyMind 2019-08-23 16:30 评论0 收藏0
一个简单的动态页面（我的第一个博客）

摘要：今天是我第一次写博客，因为没经验嘛，我就随便写写，我也希望自己以后能坚持写下去，不为别的，就为了自己能够更好地学习编程，能够追随行业大牛的脚步，从此赢取白富美，走上人生巅峰额，理想远大呵好吧，步入正题，因为目前在学加了一些2018-11-10 今天是我第一次写博客，因为没经验嘛，我就随便写写，我也希望自己以后能坚持写下去，不为别的，就为了自己能够更好地学习编程，能够追随行业大牛的脚步，从此...

番茄西红柿 2019-04-23 13:12 评论0 收藏0
运用clip-path的纯CSS形状变换

摘要：在之前所提到绘制正多边形的方法，算是纯粹利用伪元素来完成，不过坦白说还有另外一种方法，可以将单一做更多形状的变换，这种方法就是的，这个看起来有点眼熟，因为它原本就存在于里头，利用掩码剪裁的方法，连接坐标绘制掩码区域，就可以做出许多不同的在之前所提到绘制正多边形的方法，算是纯粹利用伪元素来完成，不过坦白说还有另外一种方法，可以将单一div做更多形状的变换，这种方法就是CSS3的clip...

NusterCache 2019-08-05 16:46 评论0 收藏0