纯CSS+单个div标签实现抖音LOGO，在线预览HTML/Vue

license

HTML

CSS

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

<!-- 主要借助了两个伪元素实现了整体结构，借助了 drop-shadow 生成一层整体阴影-->
<!-- drop-shadow 只能是单层阴影，所以另一层阴影需要多尝试...-->
<!-- contrast(150%) brightness(110%) 则可以增强图像的对比度和亮度，更贴近抖音LOGO的效果 -->

<div></div>

</body>

预览

控制台