css布局实现一个像素雪花树效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个像素雪花树效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: lightblue; } .tree { position: relative; width: calc(25 * 10px); height: calc(26 * 10px); margin: 1rem; } .tree::after { content: ''; position: absolute; top: 10%; left: 10%; width: 10px; height: 10px; box-shadow: 0px 0px transparent, 10px 0px transparent, 20px 0px transparent, 30px 0px transparent, 40px 0px transparent, 50px 0px transparent, 60px 0px transparent, 70px 0px transparent, 80px 0px transparent, 90px 0px transparent, 100px 0px transparent, 110px 0px transparent, 120px 0px #fff, 130px 0px transparent, 140px 0px #fff, 150px 0px transparent, 160px 0px transparent, 170px 0px #fff, 180px 0px #fff, 0px 10px transparent, 10px 10px transparent, 20px 10px transparent, 30px 10px transparent, 40px 10px transparent, 50px 10px transparent, 60px 10px transparent, 70px 10px transparent, 80px 10px transparent, 90px 10px transparent, 100px 10px transparent, 110px 10px transparent, 120px 10px transparent, 130px 10px #b35900, 140px 10px transparent, 150px 10px transparent, 160px 10px transparent, 170px 10px #b35900, 0px 20px transparent, 10px 20px transparent, 20px 20px transparent, 30px 20px transparent, 40px 20px transparent, 50px 20px transparent, 60px 20px transparent, 70px 20px transparent, 80px 20px transparent, 90px 20px transparent, 100px 20px transparent, 110px 20px #fff, 120px 20px transparent, 130px 20px #b35900, 140px 20px transparent, 150px 20px #b35900, 160px 20px #fff, 170px 20px #b35900, 0px 30px transparent, 10px 30px transparent, 20px 30px transparent, 30px 30px transparent, 40px 30px transparent, 50px 30px transparent, 60px 30px transparent, 70px 30px transparent, 80px 30px transparent.........完整代码请登录后点击上方下载按钮下载查看
网友评论0