纯css打造几款漂亮的字体效果,相信各位站长会喜欢,直接看效果吧,还是那句老话,低版本ie浏览器勿扰
如若只如初见,何须感伤离别
如若只如初见,何须感伤离别
如若只如初见,何须感伤离别
如若只如初见,何须感伤离别
LOVE HATE
如若只如初见 何须感伤离别
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> TEXT-SHADOW打造漂亮的字体效果-柏平</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <style type="text/css"> body { margin: 0; width: 100%; height: 100%; text-align: center; display: flex; justify-content: center; align-items: center; } .font {width: 800px;overflow: hidden; text-align: center; border:1px solid #ddd;box-shadow: 0 5px 6px rgba(44,4,255,0.5) ;} .vintage{ background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat; text-shadow: 5px -5px black, 4px -4px white; font-weight: bold; -webkit-text-fill-color: transparent; -webkit-background-clip: text } .stroke{ color: transparent; -webkit-text-stroke: 1px black; letter-spacing: 0.04em; background-color: } .pre { color: transparent; background-color : black; text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px; -webkit-background-clip : text; } .beat{ color: #fafafa; letter-spacing: 0; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 } .font2 { overflow: hidden; height: 100%; font-family: Geneva, sans-serif; background: hsl(210, 30%, 0%) radial-gradient( hsl(210, 30%, 20%), hsl(210, 30%, 0%)); } p { margin: 0; } #box { padding:45% 100px; text-align: center; min-width: 500px; font-size: 3em; font-weight: bold; -webkit-backface-visibility: hidden; /* fixes flashing */ } #flashlight { color: hsla(0,0%,0%,0); perspective: 80px; outline: none; } #flash { display: inline-block; text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px; transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1); } #box:hover #flash { margin-left: 20px; transition: margin-left 1s cubic-bezier(0, 0.75, 0, 1); } #light { display: inline-block; text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px; } </style> <body> <div class="font"> <h1 class="vintage">如若只如初见,何须感伤离别</h1> <h1 class="stroke">如若只如初见,何须感伤离别</h1> <h1 class="pre">如若只如初见,何须感伤离别</h1> <h1 class="beat">如若只如初见,何须感伤离别</h1> </div> <div class="font2"> <div id="box"> <p id="flashlight"> <span id="flash">LOVE</span> <span id="light">HATE</span><br> <span id="light">如若只如初见</span> <span id="flash">何须感伤离别</span> </p> </div> </div> </body> </html>
评论列表 :共有2人吐槽, 4546人围观