Skip to content

Instantly share code, notes, and snippets.

@qichunren

qichunren/demo1.html

Created October 28, 2024 03:57
Show Gist options
  • Save qichunren/5e7591f32e6f69975b7367974619110d to your computer and use it in GitHub Desktop.
Save qichunren/5e7591f32e6f69975b7367974619110d to your computer and use it in GitHub Desktop.
Download ZIP
text mark effect
Raw
demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜡笔标记效果</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
.highlight {
position: relative;
display: inline;
}
.highlight::before {
content: "";
position: absolute;
left: -2px;
right: -2px;
top: 0;
bottom: 0;
background-color: #ffff00;
z-index: -1;
transform: skew(-5deg, -1deg);
opacity: 0.7;
}
/* 不同颜色的标记 */
.highlight-blue::before {
background-color: #00ffff;
}
.highlight-pink::before {
background-color: #ff69b4;
}
</style>
</head>
<body>
<h1>蜡笔标记效果示例</h1>
<p>这是一个普通的段落。但是这里有一些<span class="highlight">被高亮标记的文字</span>，看起来像是用蜡笔标记的。</p>
<p>我们还可以使用<span class="highlight highlight-blue">不同的颜色</span>来实现<span class="highlight highlight-pink">各种效果</span>。</p>
</body>
</html>
Raw
demo2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颗粒感蜡笔标记效果</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
.highlight {
position: relative;
display: inline;
}
.highlight::before {
content: "";
position: absolute;
left: -2px;
right: -2px;
top: 0;
bottom: 0;
z-index: -1;
transform: skew(-5deg, -1deg);
opacity: 0.7;
background-color: #ffff00;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");
background-size: 150px;
}
.highlight-blue::before {
background-color: #00ffff;
}
.highlight-pink::before {
background-color: #ff69b4;
}
</style>
</head>
<body>
<h1>颗粒感蜡笔标记效果示例</h1>
<p>这是一个普通的段落。但是这里有一些<span class="highlight">被高亮标记的文字</span>，看起来像是用蜡笔标记的，而且有颗粒感。</p>
<p>我们还可以使用<span class="highlight highlight-blue">不同的颜色</span>来实现<span class="highlight highlight-pink">各种效果</span>。</p>
</body>
</html>
Raw
demo3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>增强颗粒感蜡笔标记效果</title>
<style>
html,body {
font-family: "Oradano-mincho-GSRR", monospace;
font-size: 2rem;
font-weight: 400;
line-height: 1.6;
padding: 20px;
}
p {
font-family: "Oradano-mincho-GSRR", monospace;
}
.highlight {
position: relative;
display: inline;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.highlight::before {
content: "";
position: absolute;
left: -2px;
right: -2px;
top: 0;
bottom: 0;
z-index: -1;
transform: skew(-10deg, -2deg);
background-color: #ffff00;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.15' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise2'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise2)' opacity='0.07'/%3E%3C/svg%3E");
background-size: 150px, 200px;
mix-blend-mode: multiply;
}
.highlight-blue::before {
background-color: #00ffff;
}
.highlight-pink::before {
background-color: #ff69b4;
}
</style>
</head>
<body>
<h1>增强颗粒感1蜡笔标记效果示例</h1>
<p>这是一个普通的段落。但是这里有一些<span class="highlight">被高亮标记的文字</span>，看起来像是用蜡笔标记的，而且有明显的颗粒感。</p>
<p>我们还可以使用<span class="highlight highlight-blue">不同的颜色</span>来实现<span class="highlight highlight-pink">各种效果</span>。</p>
</body>
</html>
Raw
demo4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>真实蜡笔标记效果</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
.highlight {
position: relative;
display: inline;
color: #000;
}
.highlight::before {
content: "";
position: absolute;
left: -4px;
right: -4px;
top: 0;
bottom: 0;
z-index: -1;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.highlight-yellow::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'%3E%3Cdefs%3E%3Cfilter id='noise' x='0%' y='0%' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.05 0' in='noise' result='coloredNoise'/%3E%3CfeComposite operator='in' in='coloredNoise' in2='SourceGraphic' result='monoNoise'/%3E%3CfeBlend in='SourceGraphic' in2='monoNoise' mode='multiply'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='%23ffff00' filter='url(%23noise)'/%3E%3Cpath d='M0,0 Q50,20 100,0 Q50,80 0,100' fill='none' stroke='%23ffff00' stroke-width='30' stroke-linecap='round'/%3E%3C/svg%3E");
}
.highlight-blue::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'%3E%3Cdefs%3E%3Cfilter id='noise' x='0%' y='0%' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.05 0' in='noise' result='coloredNoise'/%3E%3CfeComposite operator='in' in='coloredNoise' in2='SourceGraphic' result='monoNoise'/%3E%3CfeBlend in='SourceGraphic' in2='monoNoise' mode='multiply'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='%2300ffff' filter='url(%23noise)'/%3E%3Cpath d='M0,0 Q50,20 100,0 Q50,80 0,100' fill='none' stroke='%2300ffff' stroke-width='30' stroke-linecap='round'/%3E%3C/svg%3E");
}
.highlight-pink::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'%3E%3Cdefs%3E%3Cfilter id='noise' x='0%' y='0%' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.05 0' in='noise' result='coloredNoise'/%3E%3CfeComposite operator='in' in='coloredNoise' in2='SourceGraphic' result='monoNoise'/%3E%3CfeBlend in='SourceGraphic' in2='monoNoise' mode='multiply'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='%23ff69b4' filter='url(%23noise)'/%3E%3Cpath d='M0,0 Q50,20 100,0 Q50,80 0,100' fill='none' stroke='%23ff69b4' stroke-width='30' stroke-linecap='round'/%3E%3C/svg%3E");
}
</style>
</head>
<body>
<h1>真实蜡笔标记效果示例</h1>
<p>这是一个普通的段落。但是这里有一些<span class="highlight highlight-yellow">被高亮标记的文字</span>，看起来像是用蜡笔标记的，有不均匀的涂抹和边缘的颗粒感。</p>
<p>我们还可以使用<span class="highlight highlight-blue">不同的颜色</span>来实现<span class="highlight highlight-pink">各种效果</span>。</p>
</body>
</html>
Raw
demo5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>增强真实感的蜡笔标记效果</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
.highlight {
position: relative;
display: inline;
color: #000;
}
.highlight::before {
content: "";
position: absolute;
left: -6px;
right: -6px;
top: -3px;
bottom: -3px;
z-index: -1;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.highlight-yellow::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'%3E%3Cdefs%3E%3Cfilter id='noise' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix type='saturate' values='0' in='noise' result='desaturatedNoise'/%3E%3CfeComponentTransfer in='desaturatedNoise' result='adjustedNoise'%3E%3CfeFuncA type='table' tableValues='0 0.1 0.15 0.2'/%3E%3C/feComponentTransfer%3E%3CfeComposite operator='in' in='adjustedNoise' in2='SourceGraphic' result='finalNoise'/%3E%3C/filter%3E%3Cmask id='edgeMask'%3E%3Crect width='100%' height='100%' fill='white'/%3E%3Cpath d='M0,0 Q30,20 50,0 T100,0 Q70,50 100,100 Q50,80 0,100 Q30,50 0,0 Z' fill='black' filter='url(%23noise)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='%23ffff00' mask='url(%23edgeMask)'/%3E%3Cpath d='M0,50 Q25,0 50,50 T100,50' fill='none' stroke='%23ffff00' stroke-width='40' stroke-linecap='round' mask='url(%23edgeMask)' filter='url(%23noise)'/%3E%3C/svg%3E");
}
.highlight-blue::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'%3E%3Cdefs%3E%3Cfilter id='noise' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix type='saturate' values='0' in='noise' result='desaturatedNoise'/%3E%3CfeComponentTransfer in='desaturatedNoise' result='adjustedNoise'%3E%3CfeFuncA type='table' tableValues='0 0.1 0.15 0.2'/%3E%3C/feComponentTransfer%3E%3CfeComposite operator='in' in='adjustedNoise' in2='SourceGraphic' result='finalNoise'/%3E%3C/filter%3E%3Cmask id='edgeMask'%3E%3Crect width='100%' height='100%' fill='white'/%3E%3Cpath d='M0,0 Q30,20 50,0 T100,0 Q70,50 100,100 Q50,80 0,100 Q30,50 0,0 Z' fill='black' filter='url(%23noise)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='%2300ffff' mask='url(%23edgeMask)'/%3E%3Cpath d='M0,50 Q25,0 50,50 T100,50' fill='none' stroke='%2300ffff' stroke-width='40' stroke-linecap='round' mask='url(%23edgeMask)' filter='url(%23noise)'/%3E%3C/svg%3E");
}
.highlight-pink::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'%3E%3Cdefs%3E%3Cfilter id='noise' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix type='saturate' values='0' in='noise' result='desaturatedNoise'/%3E%3CfeComponentTransfer in='desaturatedNoise' result='adjustedNoise'%3E%3CfeFuncA type='table' tableValues='0 0.1 0.15 0.2'/%3E%3C/feComponentTransfer%3E%3CfeComposite operator='in' in='adjustedNoise' in2='SourceGraphic' result='finalNoise'/%3E%3C/filter%3E%3Cmask id='edgeMask'%3E%3Crect width='100%' height='100%' fill='white'/%3E%3Cpath d='M0,0 Q30,20 50,0 T100,0 Q70,50 100,100 Q50,80 0,100 Q30,50 0,0 Z' fill='black' filter='url(%23noise)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='%23ff69b4' mask='url(%23edgeMask)'/%3E%3Cpath d='M0,50 Q25,0 50,50 T100,50' fill='none' stroke='%23ff69b4' stroke-width='40' stroke-linecap='round' mask='url(%23edgeMask)' filter='url(%23noise)'/%3E%3C/svg%3E");
}
</style>
</head>
<body>
<h1>增强真实感的蜡笔标记效果示例</h1>
<p>这是一个普通的段落。但是这里有一些<span class="highlight highlight-yellow">被高亮标记的文字</span>，看起来像是用蜡笔标记的，有不均匀的涂抹和更自然的边缘效果。</p>
<p>我们还可以使用<span class="highlight highlight-blue">不同的颜色</span>来实现<span class="highlight highlight-pink">各种效果</span>。</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment