纯css实现卡通树效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现卡通树效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <style> :root{ --back: white; --border: rgb(86, 86, 136); --dark-leaves: rgba(51, 83, 44, 0.76); --medium-leaves: rgba(151, 185, 112, 0.76); --light-leaves: rgba(198, 204, 109, 0.788); --extra-light-leaves: rgba(243, 245, 136, 0.788); --fruit-leaves: rgba(228, 183, 241, 0.788); --truck: rgb(56, 21, 21); } * { box-sizing: border-box; } body { margin: 0; padding: 0; height: 100vh; width: 100vw; background: var(--back); display: flex; flex-direction: column; justify-content: center; align-items: center; border-style: solid; border-width: 1em; border-color: var(--border); } .tree{ position: relative; border-style: none; border-color: blue; height: 100vmin; width: 60vmin; } .trunk{ z-index: -1; position: absolute; bottom: 0em; left: 0; right: 0; margin-left: auto; margin-right: auto; border-style: none; background-color: var(--truck); height: 50vmin; width: 5vmin; border-radius: 63% 37% 31% 69% / 60% 74% 26% 40% ; } .branch{ position: relative; border-style: none; border-color: rgb(206, 177, 11); background-color: var(--truck); } .branch:nth-child(1){ height: 19vmin; width: 2vmin; top: 2%; right: -120%; transform: rotate(+30deg); border-radius: 63% 37% 31% 69% / 60% 74% 26% 40% ; } .branch:nth-child(2){ height: 15vmin; width: 2vmin; top: 0.5%; right: +70%; transform: rotate(-30deg); border-radius: 63% 37% 31% 69% / 60% 74% 26% 40% ; } .toptree{ position: absolute; top: 0em; left: 0; right: 0; margin-left: auto; margin-right: auto; height: 80vmin; width: auto; border-style: none; border-color: rgb(207, 77, 190); } .leaves{ position: absolute;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0