js结合css变量实现文字铺满容器效果
代码语言:html
所属分类:布局界面
代码描述:js结合css变量实现文字铺满容器效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Poppins:600&display=swap"); [data-fit-text] { /* Sized via the viewport, but the --width variable could be set by JS based on the element or parent's width. */ --width: 100vw; /* Adjust scale depending on your exact font. */ --scale: .9; font-size: calc( var(--width) / (var(--length,1) * 0.5) * var(--scale, 1) ); font-family: 'Poppins', sans-serif; font-weight: 600; line-height: 1; margin: 1rem 0; } /* ---------------------------------- */ html { height: 100%; display: -webkit-box; display: flex; } body { margin: auto; text-align.........完整代码请登录后点击上方下载按钮下载查看
网友评论0