css布局实现一个仙人掌绿植效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个仙人掌绿植效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --neutral-100: #f5f5f5; --neutral-200: #d6d6d6; --green-100: #cfdac8; --green-200: #7c9473; --green-300: #5b6d5b; --green-400: #4a594a; --pink-100: #f6e6e4; --pink-200: #e2bcb7; --pink-300: #ca8a8b; --pink-400: #c07274; --pink-500: #b35659; --yellow-100: #fcf0d9; --yellow-200: #f9e0ae; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } .canvas { position: relative; width: 100%; height: 100vh; display: grid; place-items: center; background: var(--pink-300); } .container { position: relative; width: 80vmin; height: 80vmin; background: var(--yellow-200); border-radius: 50%; } /* pot */ .pot { position: absolute; width: 50vmin; height: 40vmin; top: 50vmin; left: 15vmin; border-bottom: 30vmin solid var(--neutral-200); border-right: 8vmin solid transparent; border-left: 8vmin solid transparent; border-radius: 2vmin; transform: rotate(180deg); } .pot::before { content: ""; position: absolute; width: 25vmin; height: 40vmin; left: 17vmin; border-bottom: 30vmin solid var(--neutral-100); border-right: 8vmin solid transparent; border-radius: 2vmin 0; } /* cactus prawn */ .cactus-prawn { position: absolute; top: 0; left: 0; border-bottom: 5vmin solid var(--yellow-100); border-right: 0.4vmin solid transparent; border-left: 0.4vmin solid transparent; } .cactus-prawn::before { content: ""; position: absolute; top: 1.3vmin; left: -2vmin; border-bottom: 5vmin solid var(--yellow-100); border-right: 0.4vmin solid transparent; border-left: 0.4vmin solid transparent; transform: rotate(-45deg); } .cactus-prawn::after { content: ""; position: absolute; top: 1.4vmin; left: 1.1vmin; border-bottom: 5vmin solid var(--yellow-100); border-right: 0.4vmin solid transparent; border-left: 0.4vmin solid transparent; transform: rotate(45deg); } /* cactus-small */ .cactus-small { position: absolute; top: 30vmin; left: 16vmin; width: 25vmin; height: 25vmin; background: linear-gradient(to right, var(--green-200), var(--green-300)); border-radius: 50%; } /* cactus-small prawns*/ .cactus-small .cactus-prawn:nth-of-type(1) { top: 6vmin; left: 4vmin; transform: rotate(-30.........完整代码请登录后点击上方下载按钮下载查看
网友评论0