美文网首页
纯Css3写的花瓣效果

纯Css3写的花瓣效果

作者: Alpha丶 | 来源:发表于2016-11-29 23:06 被阅读225次

效果如图:


代码如下:如有不懂的,请留言!

Title
#box{position:relative; width:200px;margin:200px auto;}
#div{
border-radius:0px50%;
width:100px;
height:100px;background:red;
margin:50px auto;
transform:rotate(45deg);
position:absolute;top:-80px;z-index:20;
}
#div2{border-radius:0px50%;
width:100px;
height:100px;background:red;
margin:50px auto;
transform:rotate(-45deg);
position:absolute;left: -80px;z-index:20;}
#div3{
border-radius:0px50%;
width:100px;
height:100px;background:red;
margin:50px auto;
transform:rotate(-45deg);
position:absolute;left:80px;z-index:20;
}
#div4{border-radius:0px50%;
width:100px;
height:100px;background:red;
margin:50px auto;
transform:rotate(45deg);
position:absolute;top:80px;z-index:20;}
#div9{ border-left:10px solid green;
height:400px; position:absolute;
top:150px;left:45px;z-index:15;}
#div8{border-radius:0px50%;
width:100px;
height:100px;background:green;
margin:50px auto;
transform:rotate(0deg);
position:absolute;top:200px;
left:-45px;}
#div7{border-radius:0px50%;
width:100px;
height:100px;background:green;
margin:50px auto;
transform:rotate(90deg);
position:absolute;top:280px;
left:50px;}
#div5{
width:70px;
height:70px;background:yellow;position:absolute;z-index:21;border-radius:50%;top:60px;left:15px;overflow:hidden;box-shadow:0 0 50px yellow;}
#max{
width:250px;
height:100px;border-radius:50%;position:absolute;z-index:10;top:520px;
background:#ccc;left:-70px;
background:linear-gradient(#FFD39B,#FFE7BA)
}

css布局:

nnn.jpg

相关文章

  • 纯Css3写的花瓣效果

    效果如图: 代码如下:如有不懂的,请留言! css布局:

  • 一个纯CSS3D动态效果

    最近在研究一些css3的动态效果 在网上看到一个还算挺酷炫的纯css3效果 下面直接贴图 CSS代码 /* 外部容...

  • 纯css3制作煽动翅膀的蝴蝶

    纯css3制作煽动翅膀的蝴蝶,先看效果 怎么样,效果还不错吧上代码: html css 在这之前介绍几个css属性...

  • 用纯CSS实现饼状Loading等待图

    原文地址:→看过来 写在前面 (附录有源码及效果) 之前碰到一个小练习,就是用纯CSS3来写饼状的loading效...

  • 初识前端

    1. 纯html与css搭建页面。(以及一些js动态效果) 2. 3D效果 CSS3 transform-styl...

  • CSS3动画属性实现幻灯片效果

    纯CSS实现的幻灯片效果:查看demo; 实现思路 既然想实现动画效果,那么就需要用到CSS3中的@keyfram...

  • css小动画-冒泡特效

    熟悉js的都知道,写一个冒泡的效果很简单。css3的出现让简单的事情更容易使用和掌控,今天给大家介绍的就是纯CSS...

  • CSS3绘制好玩ICON-有棒棒糖转转效果哦

    CSS3可以用来实现很多很棒的UI效果,包括样式上的提升以及动画效果方面的改善。有很多文章讲述了如何用纯CSS画出...

  • 从零制作CSS3抽奖大转盘

    今天的任务是做一个纯CSS3的还算比较漂亮的抽奖大转盘,也就是下图效果。 我只说思路和重要的CSS3代码。 外盘 ...

  • 承JS后,纯C3写遮罩效果

    代码 效果 最后不知道是不是心理作用,CSS3感觉要比JS流畅一些js写的效果

网友评论

      本文标题:纯Css3写的花瓣效果

      本文链接:https://www.haomeiwen.com/subject/fspzpttx.html