Html
    Css
    Js

    
                        
#box {
	position:relative;
	width:20%;
	margin:10px auto;
}
#div {
	border-radius:0px 50%;
	width:50px;
	height:50px;
	background:red;
	margin:50px auto;
	transform:rotate(45deg);
	position:absolute;
	top:-40px;
	z-index:20;
}
#div2 {
	border-radius:0px 50%;
	width:50px;
	height:50px;
	background:red;
	margin:50px auto;
	transform:rotate(-45deg);
	position:absolute;
	left:-40px;
	z-index:20;
}
#div3 {
	border-radius:0px 50%;
	width:50px;
	height:50px;
	background:red;
	margin:50px auto;
	transform:rotate(-45deg);
	position:absolute;
	left:40px;
	z-index:20;
}
#div4 {
	border-radius:0px 50%;
	width:50px;
	height:50px;
	background:red;
	margin:50px auto;
	transform:rotate(45deg);
	position:absolute;
	top:40px;
	z-index:20;
}
#div5 {
	width:50px;
	height:50px;
	background:yellow;
	position:absolute;
	z-index:21;
	border-radius:50%;
	top:50px;
	left:0px;
	overflow:hidden;
	box-shadow:0 0 50px yellow;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

css3编写花朵图案

更新时间:2020-05-24 23:44:54

0