CSS3变形-扭转实现4色花-案例解析（代码实例）

发布时间：09/01 来源：未知浏览：关键词：

本文教大家运用CSS3变形实现标致的4色花，而且运用纯DIV+CSS附加注明，有乐趣的可以学习学习！

本文指标：

1、把握CSS3中怎样让元素扭转

题目：

1、实现下列结果，且运用纯DIV+CSS

2、新建好index.html，写好架构，架构怎样剖析呢

思绪剖析：

1、指标外层是一个div,div的配景图片为一个带蝴蝶的粉色圆圈

2、div内包括一朵4色花，所以这朵花由5个局部组成，4个花瓣+1个白色小孔心

好，先按照剖析，写好思绪，临时无论css的实现



 

CSS扭转案例

3、写样式，新建css文件夹，里面创建index.css

思绪剖析：

.container * 公共样式

1、定义公共样式

.wrapper *{
    margin:0;
    padding:0;
}

.bottole 外层div设定

1、由于要保障配景图片完全显示出来，所以一定要大于配景图片

2、配景图片不克不及反复

  .bottole{
    width: 640px;
    height: 420px;
    background-image: url(../images/pao.png);
    background-repeat: no-repeat;
    background-position-x: 40px;
    background-position-y: -35px;
  }

.leaf 半圆叶子

1、由于半圆直径为180，所以高度确定是90px,然后半圆我们可以通过border-radius实现，且默许色彩我们就定义为橙色，为了让4个半圆重叠在一起，就必需运用position:absolute，然后需要设定margin-left,margin-top让它的位置呈现指标结果(这里我们可以通过一直调试得出)

  .wrapper .leaf {
    width: 180px;
    height: 90px;
    border-radius: 180px 180px 0 0;
    background-color: orange;
    position: absolute;
    margin-left: 100px;
    margin-top: 150px;
  }

.leaf2 叶子独自设定

1、该叶子的色彩为绿色，且需要扭转90度

.wrapper .leaf2 {
    background: green;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

.leaf3 叶子独自设定

1、该叶子的色彩为蓝色，且需要扭转180度

  .wrapper .leaf3 {
    background: blue;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

.leaf4 叶子独自设定

1、该叶子的色彩为红色，需要扭转的角度为270度

  .wrapper .leaf4 {
    background: red;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }

小圆孔花心设定

1、小圆孔大小为20，我们可以让一个div大小都为20，然后border-radius也为20就可以制作成一个圆

2、配景色为白色

3、为了让孔位于花朵核心，我们需要设定margin-left,margin-top

  .smallcircle{
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 20px;
    position: absolute;
    margin-left: 180px;
    margin-top: 190px;
  }

好，到当前为止，我们把想到的样式全部写好了，概括不合错误，我们再来修改

当前为止，css所有内容如下：

.wrapper *{
    margin:0;
    padding:0;
}
.bottole{
    width: 640px;
    height: 420px;
    border-radius: 400px;
    background-image: url(../images/pao.png);
    background-repeat: no-repeat;
    background-position-x: 40px;
    background-position-y: -35px;
  }
  .wrapper .leaf {
    width: 180px;
    height: 90px;
    border-radius: 180px 180px 0 0;
    background-color: orange;
    position: absolute;
    margin-left: 100px;
    margin-top: 150px;
  }
.wrapper .leaf2 {
    background: green;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .wrapper .leaf3 {
    background: blue;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .wrapper .leaf4 {
    background: red;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .smallcircle{
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 20px;
    position: absolute;
    margin-left: 180px;
    margin-top: 190px;
  }

将css引入index.html中