<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 动态的彩虹3D文本阴影</title>
<style>
body {
background-color: black;
color: #fafcf4;
}
header {
text-align: center;
padding: 0;
}
header h1 {
-webkit-animation: slick-eduardo-keys 3s linear infinite;
-moz-animation: slick-eduardo-keys 3s linear infinite;
animation: slick-eduardo-keys 3s linear infinite;
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
animation-direction: reverse;
font-size: 6em;
margin-top: 4rem;
}
header h2 {
-webkit-animation: high-eduardo-keys-mini 2s linear infinite;
-moz-animation: high-eduardo-keys-mini 2s linear infinite;
animation: high-eduardo-keys-mini 2s linear infinite;
font-size: 3em;
margin-top: 2rem;
}
@-webkit-keyframes slick-eduardo-keys {
0% {
text-shadow: 1px 1px 0 #d92525, 2px 2px 0 #d92525, 3px 3px 0 #d92525, 4px 4px 0 #d92525, 5px 5px 0 #d92525, 6px 6px 0 #d92525, 7px 7px 0 #d92525, 8px 8px 0 #d92525, 9px 9px 0 #d92525, 10px 10px 0 #d92525, 11px 11px 0 #d92525, 12px 12px 0 #d92525, 13px 13px 0 #d92525, 14px 14px 0 #d92525, 15px 15px 0 #d92525, 16px 16px 0 #d92525, 17px 17px 0 #f25c05, 18px 18px 0 #f25c05, 19px 19px 0 #f25c05, 20px 20px 0 #f25c05, 21px 21px 0 #f25c05, 22px 22px 0 #f25c05, 23px 23px 0 #f25c05, 24px 24px 0 #f25c05, 25px 25px 0 #f25c05, 26px 26px 0 #f25c05, 27px 27px 0 #f25c05, 28px 28px 0 #f25c05, 29px 29px 0 #f25c05, 30px 30px 0 #f25c05, 31px 31px 0 #f25c05, 32px 32px 0 #f25c05, 33px 33px 0 #f29f05, 34px 34px 0 #f29f05, 35px 35px 0 #f29f05, 36px 36px 0 #f29f05, 37px 37px 0 #f29f05, 38px 38px 0 #f29f05, 39px 39px 0 #f29f05, 40px 40px 0 #f29f05, 41px 41px 0 #f29f05, 42px 42px 0 #f29f05, 43px 43px 0 #f29f05, 44px 44px 0 #f29f05, 45px 45px 0 #f29f05, 46px 46px 0 #f29f05, 47px 47px 0 #f29f05, 48px 48px 0 #f29f05, 49px 49px 0 #88a61b, 50px 50px 0 #88a61b, 51px 51px 0 #88a61b, 52px 52px 0 #88a61b, 53px 53px 0 #88a61b, 54px 54px 0 #88a61b, 55px 55px 0 #88a61b, 56px 56px 0 #88a61b, 57px 57px 0 #88a61b, 58px 58px 0 #88a61b, 59px 59px 0 #88a61b, 60px 60px 0 #88a61b, 61px 61px 0 #88a61b, 62px 62px 0 #88a61b, 63px 63px 0 #88a61b, 64px 64px 0 #88a61b, 65px 65px 0 #0e3d59, 66px 66px 0 #0e3d59, 67px 67px 0 #0e3d59, 68px 68px 0 #0e3d59, 69px 69px 0 #0e3d59, 70px 70px 0 #0e3d59, 71px 71px 0 #0e3d59, 72px 72px 0 #0e3d59, 73px 73px 0 #0e3d59, 74px 74px 0 #0e3d59, 75px 75px 0 #0e3d59, 76px 76px 0 #0e3d59, 77px 77px 0 #0e3d59, 78px 78px 0 #0e3d59, 79px 79px 0 #0e3d59, 80px 80px 0 #0e3d59, 81px 81px 0 #572d8c, 82px 82px 0 #572d8c, 83px 83px 0 #572d8c, 84px 84px 0 #572d8c, 85px 85px 0 #572d8c, 86px 86px 0 #572d8c, 87px 87px 0 #572d8c, 88px 88px 0 #572d8c, 89px 89px 0 #572d8c, 90px 90px 0 #572d8c, 91px 91px 0 #572d8c, 92px 92px 0 #572d8c, 93px 93px 0 #572d8c, 94px 94px 0 #572d8c, 95px 95px 0 #572d8c, 96px 96px 0 #572d8c, 0 0 0;
}
2% {
text-shadow: 1px 1px 0 #d92525, 2px 2px 0 #d92525, 3px 3px 0 #d92525, 4px 4px 0 #d92525, 5px 5px 0 #d92525, 6px 6px 0 #d92525, 7px 7px 0 #d92525, 8px 8px 0 #d92525, 9px 9px 0 #d92525, 10px 10px 0 #d92525, 11px 11px 0 #d92525, 12px 12px 0 #d92525, 13px 13px 0 #d92525, 14px 14px 0 #d92525, 15px 15px 0 #d92525, 16px 16px 0 #f25c05, 17px 17px 0 #f25c05, 18px 18px 0 #f25c05, 19px 19px 0 #f25c05, 20px 20px 0 #f25c05, 21px 21px 0 #f25c05, 22px 22px 0 #f25c05, 23px 23px 0 #f25c05, 24px 24px 0 #f25c05, 25px 25px 0 #f25c05, 26px 26px 0 #f25c05, 27px 27px 0 #f25c05, 28px 28px 0 #f25c05, 29px 29px 0 #f25c05, 30px 30px 0 #f25c05, 31px 31px 0 #f25c05, 32px 32px 0 #f29f05, 33px 33px 0 #f29f05, 34px 34px 0 #f29f05, 35px 35px 0 #f29f05, 36px 36px 0 #f29f05, 37px 37px 0 #f29f05, 38px 38px 0 #f29f05, 39px 39px 0 #f29f05, 40px 40px 0 #f29f05, 41px 41px 0 #f29f05, 42px 42px 0 #f29f05, 43px 43px 0 #f29f05, 44px 44px 0 #f29f05, 45px 45px 0 #f29f05, 46px 46px 0 #f29f05, 47px 47px 0 #f29f05, 48px 48px 0 #88a61b, 49px 49px 0 #88a61b, 50px 50px 0 #88a61b, 51px 51px 0 #88a61b, 52px 52px 0 #88a61b, 53px 53px 0 #88a61b, 54px 54px 0 #88a61b, 55px 55px 0 #88a61b, 56px 56px 0 #88a61b, 57px 57px 0 #88a61b, 58px 58px 0 #88a61b, 59px 59px 0 #88a61b, 60px 60px 0 #88a61b, 61px 61px 0 #88a61b, 62px 62px 0 #88a61b, 63px 63px 0 #88a61b, 64px 64px 0 #0e3d59, 65px 65px 0 #0e3d59, 66px 66px 0 #0e3d59, 67px 67px 0 #0e3d59, 68px 68px 0 #0e3d59, 69px 69px 0 #0e3d59, 70px 70px 0 #0e3d59, 71px 71px 0 #0e3d59, 72px 72px 0 #0e3d59, 73px 73px 0 #0e3d59, 74px 74px 0 #0e3d59, 75px 75px 0 #0e3d59, 76px 76px 0 #0e3d59, 77px 77px 0 #0e3d59, 78px 78px 0 #0e3d59, 79px 79px 0 #0e3d59, 80px 80px 0 #572d8c, 81px 81px 0 #572d8c, 82px 82px 0 #572d8c, 83px 83px 0 #572d8c, 84px 84px 0 #572d8c, 85px 85px 0 #572d8c, 86px 86px 0 #572d8c, 87px 87px 0 #572d8c, 88px 88px 0 #572d8c, 89px 89px 0 #572d8c, 90px 90px 0 #572d8c, 91px 91px 0 #572d8c, 92px 92px 0 #572d8c, 93px 93px 0 #572d8c, 94px 94px 0 #572d8c, 95px 95px 0 #572d8c, 96px 96px 0 #d92525, 0 0 0;
}
4% {
text-shadow: 1px 1px 0 #d92525, 2px 2px 0 #d92525, 3px 3px 0 #d92525, 4px 4px 0 #d92525, 5px 5px 0 #d92525, 6px 6px 0 #d92525, 7px 7px 0 #d92525, 8px 8px 0 #d92525, 9px 9px 0 #d92525, 10px 10px 0 #d92525, 11px 11px 0 #d92525, 12px 12px 0 #d92525, 13px 13px 0 #d92525, 14px 14px 0 #f25c05, 15px 15px 0 #f25c05, 16px 16px 0 #f25c05, 17px 17px 0 #f25c05, 18px 18px 0 #f25c05, 19px 19px 0 #f25c05, 20px 20px 0 #f25c05, 21px 21px 0 #f25c05, 22px 22px 0 #f25c05, 23px 23px 0 #f25c05, 24px 24px 0 #f25c05, 25px 25px 0 #f25c05, 26px 26px 0 #f25c05, 27px 27px 0 #f25c05, 28px 28px 0 #f25c05, 29px 29px 0 #f25c05, 30px 30px 0 #f29f05, 31px 31px 0 #f29f05, 32px 32px 0 #f29f05, 33px 33px 0 #f29f05, 34px 34px 0 #f29f05, 35px 35px 0 #f29f05, 36px 36px 0 #f29f05, 37px 37px 0 #f29f05, 38px 38px 0 #f29f05, 39px 39px 0 #f29f05, 40px 40px 0 #f29f05, 41px 41px 0 #f29f05, 42px 42px 0 #f29f05, 43px 43px 0 #f29f05, 44px 44px 0 #f29f05, 45px 45px 0 #f29f05, 46px 46px 0 #88a61b, 47px 47px 0 #88a61b, 48px 48px 0 #88a61b, 49px 49px 0 #88a61b, 50px 50px 0 #88a61b, 51px 51px 0 #88a61b, 52px 52px 0 #88a61b, 53px 53px 0 #88a61b, 54px 54px 0 #88a61b, 55px 55px 0 #88a61b, 56px 56px 0 #88a61b, 57px 57px 0 #88a61b, 58px 58px 0 #88a61b, 59px 59px 0 #88a61b, 60px 60px 0 #88a61b, 61px 61px 0 #88a61b, 62px 62px 0 #0e3d59, 63px 63px 0 #0e3d59, 64px 64px 0 #0e3d59, 65px 65px 0 #0e3d59, 66px 66px 0 #0e3d59, 67px 67px 0 #0e3d59, 68px 68px 0 #0e3d59, 69px 69px 0 #0e3d59, 70px 70px 0 #0e3d59, 71px 71px 0 #0e3d59, 72px 72px 0 #0e3d59, 73px 73px 0 #0e3d59, 74px 74px 0 #0e3d59, 75px 75px 0 #0e3d59, 76px 76px 0 #0e3d59, 77px 77px 0 #0e3d59, 78px 78px 0 #572d8c, 79px 79px 0 #572d8c, 80px 80px 0 #572d8c, 81px 81px 0 #572d8c, 82px 82px 0 #572d8c, 83px 83px 0 #572d8c, 84px 84px 0 #572d8c, 85px 85px 0 #572d8c, 86px 86px 0 #572d8c, 87px 87px 0 #572d8c, 88px 88px 0 #572d8c, 89px 89px 0 #572d8c, 90px 90px 0 #572d8c, 91px 91px 0 #572d8c, 92px 92px 0 #572d8c, 93px 93px 0 #572d8c, 94px 94px 0 #d92525, 95px 95px 0 #d92525, 96px 96px 0 #d92525, 0 0 0;
}
6% {
text-shadow: 1px 1px 0 #d92525, 2px 2px 0 #d92525, 3px 3px 0 #d92525, 4px 4px 0 #d92525, 5px 5px 0 #d92525, 6px 6px 0 #d92525, 7px 7px 0 #d92525, 8px 8px 0 #d92525, 9px 9px 0 #d92525, 10px 10px 0 #d92525, 11px 11px 0 #d92525, 12px 12px 0 #f25c05, 13px 13px 0 #f25c05, 14px 14px 0 #f25c05, 15px 15px 0 #f25c05, 16px 16px 0 #f25c05, 17px 17px 0 #f25c05, 18px 18px 0 #f25c05, 19px 19px 0 #f25c05, 20px 20px 0 #f25c05, 21px 21px 0 #f25c05, 22px 22px 0 #f25c05, 23px 23px 0 #f25c05, 24px 24px 0 #f25c05, 25px 25px 0 #f25c05, 26px 26px 0 #f25c05, 27px 27px 0 #f25c05, 28px 28px 0 #f29f05, 29px 29px 0 #f29f05, 30px 30px 0 #f29f05, 31px 31px 0 #f29f05, 32px 32px 0 #f29f05, 33px 33px 0 #f29f05, 34px 34px 0 #f29f05, 35px 35px 0 #f29f05, 36px 36px 0 #f29f05, 37px 37px 0 #f29f05, 38px 38p
