纯css绘制一个小龙虾效果
代码语言:html
所属分类:布局界面
代码描述:纯css绘制一个小龙虾效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --body-color: #F81301; --shade-color: #CC1902; --background-color: #243560; } body{ background: var(--background-color); } .box-canvas{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 250px; height:600px; } .head { position: absolute; top: 80px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: var(--body-color); width: 80px; height: 90px; border-radius: 50% / 45%; border-bottom: 5px solid var(--shade-color); } /* Left eye */ .head::before { content: ''; position: absolute; width: 10px; height: 15px; background: black; border-radius: 40%; left: 25%; -webkit-transform: translateX(-25%); transform: translateX(-25%); } /* Right eye */ .head::after { content: ''; position: absolute; width: 10px; height: 15px; background: black; border-radius: 40%; right: 25%; -webkit-transform: translateX(25%); transform: translateX(25%); } .body { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 160px; width: 60px; height: 130px; background: var(--body-color); border-radius: 40%; border-bottom: 5px solid var(--shade-color); } .body::before { content: ''; position: absolute; top: -20px; left: -5px; width: 70px; height: 110px; background: var(--body-color); border-radius: 50% / 40%; border-bottom: 5px solid var(--shade-color); } .body::after { content: ''; position: absolute; top: -50px; left: -10px; width: 80px; height: 100px; background: var(--body-color); border-radius: 50% / 40%; border-bottom: 5px solid var(--shade-color); } .tail { position: absolute; left: 83px; top: 265px; -webkit-transform: rotate(35deg); transform: rotate(35deg); width: 40px; height: 70px; background: var(--body-color); border-radius: 50%; border-bottom: 5px solid var(--shade-color); } .tail::before { content: ''; position: absolute; -webkit-transform: rotate(-70deg); transform: rotate(-70deg); -webkit-transform-origin: center top; transform-origin: center top; width: 40px; height: 70px; background: var(--body-color); border-radius: 50%; border-bottom: 5px solid var(--shade-color); } .arm { position: absolute; background: var(--body-color); border-bottom: 5px solid var(--shade-color); width: 30px; height: 50px; top: 100px; border-radius: 40%; } .arm.left { left: 60px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .arm.right { right: 60px; -web.........完整代码请登录后点击上方下载按钮下载查看
网友评论0