css布局实现5号电池效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现5号电池效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap'> <style> section { width: 420px; height: 100px; margin: 5px 20px; background: linear-gradient(to bottom, tan, goldenrod, #cc8400, chocolate, #cc8400); border-radius: 10px; position: relative; } section p { position: absolute; margin: 10px 0 0 48px; font-size: 56px; font-weight: 900; } section p + p { font-weight: 500; color: white; z-index: 1; text-transform: uppercase; right: 24px; top: 5px; letter-spacing: -1px; } section p + p sup { position: absolute; transform: scale(0.6); right: -0.6ch; } section::before { content: ""; position: absolute; top: 50%; left: -10px; width: 10px; height: 40px; background: linear-gradient(to bottom, silver 10%, #eee, #fff, silver); border-radius: 10px 0 0 10px; transform: translatey(-50%); } section::after { content: ""; position: absolute; top: 0; right: 0; height: 100px; width: 290px; background: linear-gradient(to bottom, #555, #444, #222, #000, #111); border-radius: 0 10px 10px 0; } section + .........完整代码请登录后点击上方下载按钮下载查看
网友评论0