section{

width: 500px;

height: 300px;

border-bottom: 10px solid black;

position: relative;

margin: 100px auto;

}

div{

width: 30px;

height: 250px;

text-align: center;

left: 235px;

bottom: 15px;

position:absolute;

    transition: 1s;
transform-origin: bottom;
}
div:nth-child(7){
background-color:black;
}
section:hover div:nth-child(1){
transform:rotate(90deg);
background: #66ccff;
}
section:hover div:nth-child(1){
transform:rotate(75deg);
background: #4e7386;
}
section:hover div:nth-child(2){
transform:rotate(60deg);
background: #20739c;
}
section:hover div:nth-child(3){
transform:rotate(45deg);
background: #344b1b;
}
section:hover div:nth-child(4){
transform:rotate(30deg);
background: #cc74a0;
}
section:hover div:nth-child(5){
transform:rotate(15deg);
background: #b1c760;
}
section:hover div:nth-child(6){
transform:rotate(-15deg);
background: #9bacb4;
}
section:hover div:nth-child(8){
transform:rotate(-30deg);
background: #63147a;
}
section:hover div:nth-child(9){
transform:rotate(-45deg);
background: #a31953;
}
section:hover div:nth-child(10){
transform:rotate(-60deg);
background: #10b4e6;
}
section:hover div:nth-child(11){
transform:rotate(-75deg);
background: #28b42f;
}
section:hover div:nth-child(12){
transform:rotate(-90deg);
background: #962655;
}
section:hover div:nth-child(13){
transform:rotate(90deg);
background: #8b7807;
}
section:hover div:nth-child(7){
background: #66ccff;
}

1+X学习日志——扇形2D效果的更多相关文章

  1. 1+X证书学习日志——css 3D效果+立方体效果的实现

    形成一个3D的空间 transform-style: preserve-3d; ### 3D在2D的基础上,多了这些内容 位移 transform:translateZ(); 旋转 transform ...

  2. 1+X证书学习日志——css 2D&过渡

    css 位移常用属性 transform:translate(x,y): transform:translateX(); transform:translateY(); 旋转属性 2d旋转: tran ...

  3. CSS扇形展开效果

    知识点预备: [1]CSS3中特别重要的transform中的rotate(),现在transform可以将元素进行2D和3D变形. 2D transform常用的transform-function ...

  4. WPF学习05:2D绘图 使用Transform进行控件变形

    在WPF学习04:2D绘图 使用Shape绘基本图形中,我们了解了如何绘制基本的图形. 这一次,我们进一步,研究如何将图形变形. 例子 一个三角形,经Transform形成组合图形: XAML代码: ...

  5. Cortex-M3学习日志(六) -- ADC实验

    上一次简单的总结了一下DAC方面的知识,好吧,这次再来总结一下ADC方面的东东.ADC即Analog-to-Digital Converter的缩写,指模/数转换器或者模拟/数字转换器.现实世界是由模 ...

  6. MobileForm控件的使用方式-用.NET(C#)开发APP的学习日志

    今天继续Smobiler开发APP的学习日志,这次是做一个title.toolbar.侧边栏三种效果 样式一 一.          Toolbar 1.       目标样式 我们要实现上图中的效果 ...

  7. composer的安装和使用 学习日志

    如果你做为一个phper,没有用过composer,那你真的不是一个合格的开发者.那么就来记录一下composer的学习日志 下面分享几个学习源头: composer中文网站:https://www. ...

  8. 给日志添加“复制”效果

    给日志添加如上效果的实现方法: 在日志编辑页面,源代码中,添加如下代码,包裹住 目标内容style1: <div class="cnblogs_code"><di ...

  9. GRE学习日志

    发现开博客园真的很有督促作用,今天也顺便开个GRE学习日志吧 2015-02-09:单词 2015-02-10:单词 2015-02-11:单词 2015-03-02:阅读 2015-03-04:阅读 ...

随机推荐

  1. var a = function(){}和var a = function(){}();的区别

    var a = function(){ ... ... ... } 声明方法. var a = function(){ ... ... ... }(); 声明方法并执行 demo: var u = f ...

  2. php 5 与7有什么区别

    PHP 7.0使用新版的ZendEngine引擎,带来了许多新的特性,其与相比,有如下特性: 性能提升:PHP7比PHP5.0性能提升了两倍. 全面一致的64位支持. 以前的许多致命错误,现在改成抛出 ...

  3. Spark2.x(五十六):Queue's AM resource limit exceeded.

    背景: 按照业务需求将数据拆分为60份,启动60个application分别运行对每一份数据,application的提交脚本如下: #/bin/sh #LANG=zh_CN.utf8 #export ...

  4. IDEA2019.2.1中文乱码解决

    写在前面 太晚了, 长话短说, idea更新到2019.2.1, 项目任何地方输入中文都是乱码, 修改编码UTF-8依然如此.参考https://blog.csdn.net/chenjk10/arti ...

  5. ES6将两个数组合并成一个对象数组

    需求 有这么两个数组 let metrodates = [ "2008-01", "2008-02", "2008-03",..ect ]; ...

  6. Android: VIVO手机setSpeakerphoneOn p无效,无法切换speaker的问题

    setSpeakerphoneOn 方法可以使语音和通话能够强制从手机的扬声器输出,不过在测试了众多手机在调用了这个API之后都可以,唯独有一款VIVO手机不可以: .小米6X(9.0) .Samsu ...

  7. javascript数组遍历的几种常用方法性能分析对比

    前言: 数组遍历有很多种方法,虽然不同方法有不同的特性及适用环境,除了普通飞for循环之外,for...in能直接输出数组元素的索引,for...of能直接输出数组元素的值,map则可以直接生成新的数 ...

  8. CentOS 7.5二进制部署Kubernetes1.12(加密通信)(五)

    一.安装方式介绍 1.yum 安装 目前CentOS官方已经把Kubernetes源放入到自己的默认 extras 仓库里面,使用 yum 安装,好处是简单,坏处也很明显,需要官方更新 yum 源才能 ...

  9. Qt deletelater函数分析(1)

               生活的全部意义在于无穷地探索尚未知道的东西,在于不断地增加更多的知识.--左拉 该函数是QObject类的函数:                             ---- ...

  10. UDP中一个包的大小最大能多大?TCP呢?

    (以上为以太网的帧格式) Preamble:前导同步码7个字节+帧开始定界符1个字节=8个字节 Destination MAC adress:目的MAC地址 Source MAC adress:源MA ...