css布局实现蛇形植物效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现蛇形植物效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; padding: 0; margin: 0; /* background-color: #4a503d; */ } .canvas { position: relative; display: flex; justify-content: center; align-item: center; background: #faf3f3; height: 100vh; width: 100%; } .circle { position: relative; display: flex; justify-content: center; align-content: center; background: #bedbbb; height: 100vmin; width: 100vmin; border-radius: 50%; } .plant-left { position: absolute; display: block; width: 10vmin; height: 30vmin; top: 28vmin; left: 39vmin; background-color: green; border-radius: 0% 90% 50% 50% / 60% 60% 40% 40%; transform: rotate(-14deg); border: 1.2vmin solid #f5ff00; background: linear-gradient(135deg, #e1ffa9 25%, transparent 25%) -4px 0, linear-gradient(225deg, #e1ffa9 25%, transparent 25%) -3px 0, linear-gradient(315deg, #e1ffa9 25%, transparent 25%), linear-gradient(45deg, #e1ffa9 25%, transparent 25%); background-size: 8px 9px; background-color: green; } .plant-right { position: absolute; display: block; width: 8vmin; height: 27vmin; top: 32vmin; left: 51vmin; background-color: green; border-radius: 80% 0% 50% 50% / 60% 0% 40% 40%; transform: rotate(14deg); border: 1.3vmin solid #f5ff00; background: linear-gradient(135deg, #e1ffa9 15%, tr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0