css布局实现三维气泡图标文字效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现三维气泡图标文字效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Work+Sans:wght@200&display=swap'> <style> body { display: grid; place-items: center; height: 100vh; font-family: "Work Sans", sans-serif; perspective: 3200px; perspective-origin: 50% 50%; transform: scale(0.25); } body #followers { position: relative; top: 0; font-size: 24rem; transform: rotatex(-15deg) rotatey(30deg); transform-style: preserve-3d; -webkit-animation: float 4.1s cubic-bezier(0.3, 0, 0.7, 1) infinite, tilt 5s cubic-bezier(0.3, 0, 0.7, 1) infinite; animation: float 4.1s cubic-bezier(0.3, 0, 0.7, 1) infinite, tilt 5s cubic-bezier(0.3, 0, 0.7, 1) infinite; } body #followers .pin { color: #EA7676; background: currentcolor; padding: 0.4em 0.5em; border-radius: 0.4em; box-shadow: 0 0 5px 0 currentcolor; transform: translateX(-15%); transform-style: preserve-3d; } body #followers .pin.front { position: relative; display: flex; align-items: center; } body #followers .pin.front .icon { height: 1em; aspect-ratio: 1; margin-right: 0.25em; transform-style: preserve-3d; } body #followers .pin.front .icon > * { position: relative; width: 100%; height: 100%; overflow: hidden; } body #followers .pin.front .icon > *.bottom { color: #CCD1D9; } body #followers .pin.front .icon > *.top { position: absolute; top: 0; color: white; transform: translatez(0.03em); filter: drop-shadow(0 0 0.008em currentcolor); } body #followers .pin.front .icon > * .head { position: absolute; top: 12%; left: 50%; transform: translatex(-50%); background: currentcolor; width: 0.4em; height: 0.4em; border-radius: 100%; } body #followers .pin.front .icon > * .body { position: absolute; top: 100%; left: 50%; width: 100%; height: 80%; border-radius: 100%; background: currentcolor; transform: translate(-50%, -50%); } body #followers .pin.front .number { position: relative; color.........完整代码请登录后点击上方下载按钮下载查看
网友评论0