HTML
CCS text-shadow 用來為 文字 字串 每個字母加上陰影。 文字陰影 {text-shadow: 向右移動 向下移動 模糊度 陰影色 }, 向右移動 : 5px (陰影向右移動) -5px (陰影向左移動), 向下移動 : 5px (陰影向下移動) -5px (陰影向上移動), 例 1 : div { font-size:50px; text-align: center; text-shadow:10px 10px 20px black ;} text-shadow 文本陰影效果 例 2 : div { color:blue ; font-size:50px; font-weight:bold ; text-align: center; text-shadow:2px 2px 2px darkgray, 3px 3px 3px darkgray, 4px 4px 3px darkgray, 5px 5px 3px darkgray, 6px 6px 6px darkgray, 8px 7px 0px black } text-shadow aa文本陰影效果
.text2 {animation: mymove 12s infinite; } @keyframes mymove{10% {text-shadow:10px 10px 20px gold;} 25% {text-shadow:0px 20px 20px red; } 35% {text-shadow:-10px 10px 20px gold; } 45% {text-shadow:-10px 10px 20px orangered; } 55% {text-shadow:-10px 1px 20px orange; } 65% {text-shadow:-10px -10px 20px tomato; } 75% {text-shadow:10px -10px 20px darkorange; } 85% {text-shadow:0px -10px 20px red; } 100% {text-shadow:10px 0px 20px deeppink; } }>
.text { color: gold; text-shadow: 1px 1px 1px gold , 2px 2px 1px orange , 3px 3px 1px orange , -30px 0px 50px rgb(255,215, 100), /* 9 點方向 */ -15px -10px 50px rgb(255,215, 100), /*10 半點方向*/ 0px -10px 50px rgb(255,215, 100), /*12 點方向*/ 15px -10px 50px rgb(255,215, 100), /* 1 半點方向*/ 20px 0px 50px rgb(255,215, 100), /* 3 點方向*/ 20px 10px 50px rgb(255,215, 100), /* 4 半點方向*/ 0px 10px 50px rgb(255,215, 100), /* 6 點方向*/ -15px 10px 50px rgb(255,215, 100) /* 7 半點方向/ }
凸文字 font-size: 40px; text-align: center; font-weight:bold ;line-height:30px; font-family:Fantasy; letter-spacing:0.1em; text-shadow: -3px -3px white, 1px 1px #333} 凹文字 font-size: 40px; text-align: center; font-weight:bold ; line-height:30px; font-family:Fantasy; letter-spacing:0.1em; text-shadow: 3px 3px white, -2px -2px #333
font-size: 60px ; color: white; letter-spacing: 10px; font-weight:bold ; text-shadow: -2px 0 0 black, 0 2px 0 black, 2px 0 0 black, 0 -2px 0 black;
letter-spacing:3px; font-size: 60px ; font-family: serif ; font-weight : bold ; color:gold; letter-spacing: 40px; text-align: center; text-shadow: 2px 2px 1px peru, 3px 3px 1px peru, 4px 4px 1px peru, 5px 5px 1px peru, 6px 6px 1px black, 7px 7px 1px black;
font-size: 80px; color:white; text-align: center; letter-spacing:30px; text-shadow:rgb(255, 255, 255) -2px 0 0, rgb(255, 255, 255) 0 2px 0 , rgb(255, 255, 255)2px 0 0, black 0 -2px 0 , rgb(73, 255, 24) 0px 0px 20px, rgb(73, 255, 24) 0px 0px 30px, rgb(73, 255, 24) 0px 0px 40px, rgb(73, 255, 24) 0px 0px 55px, rgb(73, 255, 24) 0px 0px 75px, rgba(206, 31, 120, 0) 6px 17px 7px;
.text2 {font-size: 60px ;color: rgb(255,215,0); text-align: center; letter-spacing: 10px; font-weight:bold ; text-shadow: -2px 0 0 black, 0 2px 0 black, 2px 0 0 black, 0 -2px 0 black; animation: mymove 2s infinite; } @keyframes mymove { 10%{color: rgb(255 ,215 , 0);} 20%{color: rgb(245 ,220 ,100);} 30%{color: rgb(230 ,230 ,200);} 40%{color: rgb(220 ,240 ,300);} 50%{color: rgb(210 ,230 ,400);} 60%{color: rgb(220 ,220 ,350);} 70%{color: rgb(230 ,215 ,200);} 80%{color: rgb(255 ,215 ,100);} 100%{color: rgb(255, 215 , 0);} }
.text2 {font-size: 60px ; color: rgb(255,215,0); text-align: center; letter-spacing: 5px; font-weight:bold ; text-shadow: -2px 0 0 black, 0 2px 0 black, 2px 0 0 black, 0 -2px 0 black; animation: mymove 3s infinite; } @keyframes mymove { 10%{letter-spacing:7px;} 20%{letter-spacing:9px;} 30%{letter-spacing:11px;} 40%{letter-spacing:13px;} 50%{letter-spacing:11px;} 60%{letter-spacing:9px;} 70%{letter-spacing:7px;} 100%{letter-spacing:5px;} }
沒有留言:
張貼留言