效果图：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Concert+One);
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body{
background: #0a0a0a;
overflow: hidden;
text-align: center;
}
figure{
animation: wobble 5s ease-in-out infinite;
-moz-animation: wobble 5s ease-in-out infinite;
-ms-animation: wobble 5s ease-in-out infinite;
-webkit-animation: wobble 5s ease-in-out infinite;
transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-webkit-transform-origin: center center;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
@keyframes wobble {
0%,100%{
transform:rotate3d(1,1,0,40deg);
-moz-transform:rotate3d(1,1,0,40deg);
-ms-transform:rotate3d(1,1,0,40deg);
-webkit-transform:rotate3d(1,1,0,40deg);
}
25%{
transform:rotate3d(-1,1,0,40deg);
-moz-transform:rotate3d(-1,1,0,40deg);
-ms-transform:rotate3d(-1,1,0,40deg);
-webkit-transform:rotate3d(-1,1,0,40deg);
}
50%{
transform:rotate3d(-1,-1,0,40deg);
-moz-transform:rotate3d(-1,-1,0,40deg);
-ms-transform:rotate3d(-1,-1,0,40deg);
-webkit-transform:rotate3d(-1,-1,0,40deg);
}
75%{
transform:rotate3d(1,-1,0,40deg);
-moz-transform:rotate3d(1,-1,0,40deg);
-ms-transform:rotate3d(1,-1,0,40deg);
-webkit-transform:rotate3d(1,-1,0,40deg);
}
}
@keyframes glow{
0%,100%{
text-shadow: 0 0 30px red;}
25%{text-shadow: 0 0 30px orange;}
50%{ text-shadow:0 0 30px forestgreen; }
75%{ text-shadow:0 0 30px cyan; }
}
h1{
display: block;
width: 100%;
padding: 40px;
color: #030303;
line-height: 1.5;
font: 900 8em ‘Concert One‘, sans-serif;
text-transform: uppercase;
position: absolute;
animation:glow 10s ease-in-out infinite;
-moz-animation: glow 10s ease-in-out infinite;
-ms-animation: glow 10s ease-in-out infinite;
-webkit-animation: glow 10s ease-in-out infinite;
}
h1:nth-child(2){
transform:translateZ(5px);
-moz-transform:translateZ(5px);
-ms-transform:translateZ(5px);
-webkit-transform:translateZ(5px);
}
h1:nth-child(3){
transform:translateZ(10px);
-moz-transform:translateZ(10px);
-ms-transform:translateZ(10px);
-webkit-transform:translateZ(10px);
}
h1:nth-child(4){
transform:translateZ(15px);
-moz-transform:translateZ(15px);
-ms-transform:translateZ(15px);
-webkit-transform:translateZ(15px);
}
h1:nth-child(5){
transform:translateZ(20px);
-moz-transform:translateZ(20px);
-ms-transform:translateZ(20px);
-webkit-transform:translateZ(20px);
}
h1:nth-child(6){
transform:translateZ(25px);
-moz-transform:translateZ(25px);
-ms-transform:translateZ(25px);
-webkit-transform:translateZ(25px);
}
h1:nth-child(7){
transform:translateZ(30px);
-moz-transform:translateZ(30px);
-ms-transform:translateZ(30px);
-webkit-transform:translateZ(30px);
}
h1:nth-child(8){
transform:translateZ(35px);
-moz-transform:translateZ(35px);
-ms-transform:translateZ(35px);
-webkit-transform:translateZ(35px);
}
h1:nth-child(9){
transform:translateZ(40px);
-moz-transform:translateZ(40px);
-ms-transform:translateZ(40px);
-webkit-transform:translateZ(40px);
}
h1:nth-child(10){
transform:translateZ(45px);
-moz-transform:translateZ(45px);
-ms-transform:translateZ(45px);
-webkit-transform:translateZ(45px);
}
</style>
</head>
<body>
<figure>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
</figure>
</body>
</html>
时间： 2024-10-06 08:36:30