利用CSS3的特性，简单实现一些文字效果

内阴影文字

.press { 
  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;
}

空心文字

.stroke { 
  color: transparent; 
  -webkit-text-stroke: 1px black; 
  letter-spacing: 0.04em; 
}

3D效果文字

.threed { 
  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;
}

复古风格(效果以图片为准)

.vintage {
  background: #EEE url(https://ae01.alicdn.com/kf/U4a49483e25c3412d8a5423702df20ab3N.gif) repeat;
  text-shadow: 5px -5px black, 4px -4px white; 
  font-weight: bold; 
  -webkit-text-fill-color: transparent; 
  -webkit-background-clip: text;
}

添加好看的蒲公英

添加html代码

<div class="dandelion">
  <span class="smalldan"></span>
  <span class="bigdan"></span>
</div>

添加css代码

/* 在小屏幕自动隐藏 */
  @media screen and (max-width:600px) {
  .dandelion { display: none !important; }
}
	
.dandelion span {
  /*display: block;*/
  position: fixed;
  z-index: 9999999999;
  bottom: 0px;
  background-image: url(https://img02.sogoucdn.com/app/a/100520146/74ef2be737eb5d9808582fb5b9ddaee0);
 /* background-image: url(https://ae01.alicdn.com/kf/Ue5a6d5b7713c412aac661102e0f48dd4F.png);  备用地址*/
  background-repeat: no-repeat;
  _background: none;
/* 动画效果 */
  -webkit-animation: ball-x 3s linear 2s infinite;
  -moz-animation: ball-x 3s linear 2s infinite;
  animation: ball-x 3s linear 2s infinite;
  -webkit-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  transform-origin: bottom center;
}
			
/* 大的蒲公英样式 */
.dandelion .bigdan { 
  width: 64px;
  height: 115px; 
  left: 41px; 
  background-position: -86px -36px; 
  border: 0px solid #fff;
}
			
/* 小的蒲公英样式 */
.dandelion .smalldan { 
  width: 36px; 
  height: 60px; 
  left: 88px; 
  background-position: 0 -90px; 
  border: 0px solid #fff;
}
			
/* 以下是动画效果 */
@keyframes ball-x {
  0% {transform: rotate(0deg);}
  25% {transform: rotate(5deg);}
  50% {transform: rotate(0deg);}
  75% {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}
			
@-webkit-keyframes ball-x {
  0% {-webkit-transform: rotate(0deg);}
  25% {-webkit-transform: rotate(5deg);}
  50% {-webkit-transform: rotate(0deg);}
  75% {-webkit-transform: rotate(-5deg);}
  100% {-webkit-transform: rotate(0deg);}
}
			
@-moz-keyframes ball-x {
  0% { -moz-transform: rotate(0deg); }
  25% { -moz-transform: rotate(5deg); }
  50% { -moz-transform: rotate(0deg); }
  75% { -moz-transform: rotate(-5deg); }
  100% { -moz-transform: rotate(0deg); }
}

今天又水了一篇

分享到：

赞(0) 打赏 生成海报