Html
    Css
    Js

    
                        
* {
	box-sizing:border-box;
}
body {
	font-size:62.5%;
}
h1,h2,h3 {
	font-family:'PT Sans',sans-serif;
	text-transform:uppercase;
}
h2 {
	font-size:1.6em;
	margin:0;
	padding:10px;
	border-top:1px solid #ccc;
}
h3 {
	margin:0;
	padding:10px;
}
.Outer {
	background:#f1f1f1;
	text-align:center;
	margin-top:30px;
	/*border-top:1px solid #004eff;
	border-bottom:1px solid #004eff;
	*/
}
.Outer:first-child {
	margin-top:0;
}
.Wrapper {
	text-align:center;
	background-color:#fff;
	padding:10px;
}
.content {
	display:inline-block;
	text-align:center;
	font-family:'Francois One',Helvetica,Arial,sans-serif;
	font-size:5rem;
	color:#deeaff;
	text-decoration:none;
	text-shadow:1.5px 1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px 1.5px 0 #818acc,1.5px -1.5px 0 #818acc;
	transition:all 400ms ease-in-out;
}
.content-pushDown {
	text-shadow:1.5px 1.5px 0 #004eff,0px 1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px 1.5px 0 #004eff,1.5px -1.5px 0 #004eff,0.77782px 0.77782px 0 #7793fb,1.55563px 1.55563px 0 #7793fb,2.33345px 2.33345px 0 #7793fb,3.11127px 3.11127px 0 #7793fb,3.88909px 3.88909px 0 #7793fb,4.6669px 4.6669px 0 #7793fb,5.44472px 5.44472px 0 #7793fb,6.22254px 6.22254px 0 #7793fb,7.00036px 7.00036px 0 #7793fb,7.77817px 7.77817px 0 #7793fb;
}
.content-pushDown:hover {
	transform:translate(9px,9px);
	text-shadow:1.5px 1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px 1.5px 0 #818acc,1.5px -1.5px 0 #818acc;
}
.content-raiseUp:hover {
	transform:translate(-9px,-9px);
	text-shadow:1.5px 1.5px 0 #004eff,0px 1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px 1.5px 0 #004eff,1.5px -1.5px 0 #004eff,0.77782px 0.77782px 0 #7793fb,1.55563px 1.55563px 0 #7793fb,2.33345px 2.33345px 0 #7793fb,3.11127px 3.11127px 0 #7793fb,3.88909px 3.88909px 0 #7793fb,4.6669px 4.6669px 0 #7793fb,5.44472px 5.44472px 0 #7793fb,6.22254px 6.22254px 0 #7793fb,7.00036px 7.00036px 0 #7793fb,7.77817px 7.77817px 0 #7793fb;
}
.content-shadow:hover {
	transform:translate(5px,0);
}
.content-shadow.content-raiseUp:hover {
	transform:translate(-5px,0);
}
/*.color {
	background-color:#00b0ff;
}
*/
.color .content {
	color:#9beaf8;
	text-shadow:1.5px 1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px 1.5px 0 #76a3d3,1.5px -1.5px 0 #76a3d3;
}
.color .content-pushDown {
	text-shadow:1.5px 1.5px 0 #fff,0px 1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px -1.5px 0 #fff,0.77782px 0.77782px 0 #154ae6,1.55563px 1.55563px 0 #154ae6,2.33345px 2.33345px 0 #154ae6,3.11127px 3.11127px 0 #154ae6,3.88909px 3.88909px 0 #154ae6,4.6669px 4.6669px 0 #154ae6,5.44472px 5.44472px 0 #154ae6,6.22254px 6.22254px 0 #154ae6,7.00036px 7.00036px 0 #154ae6,7.77817px 7.77817px 0 #154ae6;
}
.color .content-pushDown:hover {
	text-shadow:1.5px 1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px 1.5px 0 #76a3d3,1.5px -1.5px 0 #76a3d3;
}
.color .content-raiseUp:hover {
	text-shadow:1.5px 1.5px 0 #fff,0px 1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px -1.5px 0 #fff,0.77782px 0.77782px 0 #154ae6,1.55563px 1.55563px 0 #154ae6,2.33345px 2.33345px 0 #154ae6,3.11127px 3.11127px 0 #154ae6,3.88909px 3.88909px 0 #154ae6,4.6669px 4.6669px 0 #154ae6,5.44472px 5.44472px 0 #154ae6,6.22254px 6.22254px 0 #154ae6,7.00036px 7.00036px 0 #154ae6,7.77817px 7.77817px 0 #154ae6;
}
svg {
	line-height:1.2;
	width:410px;
	height:1.5em;
}
.content--svg text,.content--svg stop {
	transition:all 350ms ease-in-out;
}
.content--svg text {
	text-transform:uppercase;
	fill:url(#striped);
	text-shadow:1.5px 1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px 1.5px 0 #818acc,1.5px -1.5px 0 #818acc;
}
.content--svg:hover text {
	text-shadow:1.5px 1.5px 0 #004eff,0px 1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px 1.5px 0 #004eff,1.5px -1.5px 0 #004eff,0.77782px 0.77782px 0 #7793fb,1.55563px 1.55563px 0 #7793fb,2.33345px 2.33345px 0 #7793fb,3.11127px 3.11127px 0 #7793fb,3.88909px 3.88909px 0 #7793fb,4.6669px 4.6669px 0 #7793fb,5.44472px 5.44472px 0 #7793fb,6.22254px 6.22254px 0 #7793fb,7.00036px 7.00036px 0 #7793fb,7.77817px 7.77817px 0 #7793fb;
}
.content--svg stop {
	stop-color:#deeaff;
}
.content--svg:hover stop {
	stop-color:#fff;
}
.content--svg:hover stop:nth-child(2),.content--svg:hover stop:nth-child(3) {
	stop-color:#76a3d3;
}
.color .content--svg text {
	fill:url(#stripedColor);
	text-shadow:1.5px 1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px 1.5px 0 #76a3d3,1.5px -1.5px 0 #76a3d3;
}
.color .content--svg:hover text {
	text-shadow:1.5px 1.5px 0 #fff,0px 1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px -1.5px 0 #fff,0.77782px 0.77782px 0 #154ae6,1.55563px 1.55563px 0 #154ae6,2.33345px 2.33345px 0 #154ae6,3.11127px 3.11127px 0 #154ae6,3.88909px 3.88909px 0 #154ae6,4.6669px 4.6669px 0 #154ae6,5.44472px 5.44472px 0 #154ae6,6.22254px 6.22254px 0 #154ae6,7.00036px 7.00036px 0 #154ae6,7.77817px 7.77817px 0 #154ae6;
}
.color stop {
	stop-color:#9beaf8;
}
.color .content--svg:hover stop:nth-child(2),.color .content--svg:hover stop:nth-child(3) {
	stop-color:#1c00f9;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css文字动画效果(一)

4
      薄暮轻纱0
      2017/6/2 9:28:00
      xishilu0
      2017/5/26 21:31:26
      宿雨0
      2017/5/26 17:12:09
      星空0
      2017/5/25 15:08:08