css实现文字透视透明遮罩效果
代码语言:html
所属分类:布局界面
代码描述:css实现文字透视透明遮罩效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Rubik+Mono+One&display=swap"); body, html { margin: 0; height: 100%; width: 100%; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; } * { box-sizing: border-box; } :root { --size: 500px; --bg: url("http://repo.bfw.wiki/bfwrepo/image/5e7bdd3e5d4d9.png"); } #wrapper { font-family: "Rubik Mono One", sans-serif; display: grid; grid-template-rows: repeat(8, 1fr); font-size: 34pt; background: #c7bba9; height: var(--size); width: var(--size); padding: 20px; gap: 3px; text-transform: uppercase; } p { margin: 0px; } .clip { display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top: 1px; margin-bottom: 1px; height: 100%; background: #c7bba9; } .clipBox, .clipText { background: var(--bg); background-size: var(--size); background-attachment: fixed; background-position: center; } .clipBox { content: ""; width: 100%; height: 100%; margin: 2px; } .clipText { -webkit-text-fill-colo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0