css布局实现一个无敌浩克卡通效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个无敌浩克卡通效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --green: #81ff00; --purple: #7e00ff; --gray: #333; --angle: 0deg; } * { box-sizing: border-box; } html { background: #111; display: grid; place-items: center; min-height: 100vh; font-family: "Chelsea Market", sans-serif; } /* html:after { content: "HULK"; position: absolute; left: 50%; top: 0%; transform: translate(-50%, 0%); font-size: 25vw; z-index: -1; opacity:.13; } */ #hulk_box { filter: drop-shadow(0 0 200px var(--purple)); perspective: 300px; } #hulk_box:before { content: ""; width: 300px; height: 100px; background: #788; position: absolute; top: 75%; transform: translateX(-25%) rotateX(45deg); } #hulk_body { width: 150px; height: 225px; background: var(--green); border-radius: 15px 15px 0 0; position: relative; } #hulk_body:before { content: ""; width: 50px; height: 150px; background: linear-gradient(to right, transparent 10px, var(--gray) 10px), var(--green); background-size: 12px 20px, 100% 100%; background-repeat: repeat-x, repeat; background-position: bottom center, 0 0; border-radius: 35px 0 0 0; position: absolute; top: 10px; left: -35px; transform-origin: top right; transform: rotate(var(--angle)); z-index: 2; } #hulk_body:after { content: ""; width: 50px; height: 150px; background: linear-gradient(to right, transparent 10px, var(--gray) 10px), var(--green); background-size: 12px 20px, 100% 100%; background-repeat: repeat-x, repeat; background-position: bottom center, 0 0; border-radius: 0 35px 0 0; position: absolute; top: 10px; left: calc(100% - 15px); transform-origin: top left; transform: rotate(var(--angle)); } .hulk_pecks { width: 50%; height: 50px; border-bottom: 2px solid var(--gray); border-radius: 25px; position: absolute; top: 15%; } .hulk_pecks:before { content: ""; width: 100%; height: 60%; border-right: 2px solid var(--gray); position: absolute; top: 110%; left: -1px; } .hulk_pecks:after { content: ""; width: 100%; height: 100%; border-bottom: 2px solid var(--gray); border-radius: 25px; position: absolute; left: 100%; top: 0; } .hulk_head { width: 100px; height: 100px; background: var(--green); position: absolute; left: 25px; top: -50px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.13); border-radius: 5px 5px 25px 25px; } .hulk_head:before { content: ""; width: 25px; height: 25px; background: radial-gradient(circle at 60% 60%, white 4px, var(--gray) 4px); position: absolute; top: 40px; lef.........完整代码请登录后点击上方下载按钮下载查看
网友评论0