css布局一个圣诞树效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局一个圣诞树效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
.tree {
display: block;
margin: 0 auto;
position: relative;
top: 5px;
}
.tree .branches-top {
width: 0px;
border-bottom: 120px solid #44B859;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
margin: 0 auto;
}
.tree .branches-top .ornament-1 {
position: relative;
top: 130px;
left: -20px;
content: "";
width: 10px;
height: 10px;
border-radius: 10px;
background: #ED001D;
}
.tree .branches-top .ornament-2 {
position: relative;
top: 110px;
left: 27px;
content: "";
width: 10px;
height: 10px;
border-radius: 10px;
background: #ED001D;
}
.tree .branches-top .star {
/*
shout-out to CSS-Tricks for the article: https://css-tricks.com/the-shapes-of-css/
*/
margin: 0 auto;
border-right: 60px solid transparent;
/*100%*/
border-left: 60px solid transparent;
/*100%*/
border-bottom: 42px solid #FFD700;
/*70%*/
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
position: relative;
left: -57.5px;
top: 20px;
}
.tree .branches-top .star:before {
border-bottom: 48px solid #FFD700;
/*80%*/
border-left: 18px solid transparent;
/*30%*/
border-right: 18px solid transparent;
/*30%*/
position: absolute;
top: -27px;
/*45%*/
left: -39px;
/*65%*/
display: block;
content: "";
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.tree .branches-top .star:after {
position: absolute;
left: -63px;
/*-105%*/
border-right: 60px solid transparent;
/*100%*/
border-left: 60px solid transparent;
/*100%*/
border-bottom: 42px solid #FFD700;
/*70%*/
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
content: "";
}
.tree .branches-mid {
width: 150px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0