登录

TEXT-SHADOW打造漂亮的字体效果

    纯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>


选择赏赐方式:

×

多少都是心意,感谢大家

选择分享方式:

×

扫一扫分享到微信朋友圈

本文标题:TEXT-SHADOW打造漂亮的字体效果

本文地址:https://www.zbpnice.cn/post/130.html

温馨提示:文章内容系作者个人观点,不代表柏平博客对观点赞同或支持。

版权声明: 本文为原创文章,创建于2年前 (2017-08-25),版权归 柏平 所有,欢迎分享本文,转载请保留出处!

评论列表 :共有1人吐槽, 634人围观

二次元空间
二次元空间  2年前 (2017-08-26)  沙发回复
谢谢博主无私的分享好东西,留言支持下,欢迎回访我的网站,如果觉得我的网站不错的话能否交换个友链

发表评论: