CSS3制作炫酷的自定义发光文字

         CSS3制作炫酷的自定义发光文字。本文为大家分享一款基于纯CSS3的文字发光特效，当我们将鼠标滑过文字时，文字就会模拟发光动画，展现出非常酷的发光画面。另外，由于引用了特殊字体，所以整个文字效果看起来有着3D立体的特效，如果你的网络无法加载这些字体，可能是由于国外的这个网站被墙的缘故，就像google的字体库网址被屏蔽那样。

HTML代码

XML/HTML Code复制内容到剪贴板

  1. <div id="container">
  2.  
  3. <p><a href="#">
  4. RED
  5. </a></p>
  6.  
  7. <p><a href="#">
  8. BLUE
  9. </a></p>
  10.  
  11. <p><a href="#">
  12. Yellow
  13. </a></p>
  14.  
  15. <p><a href="#">
  16. GREEN
  17. </a></p>
  18.  
  19. <p><a href="#">
  20. ORANGE
  21. </a></p>
  22.  
  23. <p><a href="#">
  24. VIOLET
  25. </a></p>
  26.  
  27. </div>
  28.  

CSS代码

CSS Code复制内容到剪贴板

  1. /*setup*/
  2. *{
  3. margin: 0;
  4. padding: 0;
  5. }
  6.  
  7. @font-face {
  8. font-family: 'Monoton';
  9. font-style: normal;
  10. font-weight: 400;
  11. src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');
  12. }
  13.  
  14. @font-face {
  15. font-family: 'Iceland';
  16. font-style: normal;
  17. font-weight: 400;
  18. src: local('Iceland'), local('Iceland-Regular'), url(http://themes.googleusercontent.com/static/fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff) format('woff');
  19. }
  20.  
  21. @font-face {
  22. font-family: 'Pacifico';
  23. font-style: normal;
  24. font-weight: 400;
  25. src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff');
  26. }
  27.  
  28. @font-face {
  29. font-family: 'PressStart';
  30. font-style: normal;
  31. font-weight: 400;
  32. src: local('Press Start 2P'), local('PressStart2P-Regular'), url(http://themes.googleusercontent.com/static/fonts/pressstart2p/v2/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff) format('woff');
  33. }
  34.  
  35. @font-face {
  36. font-family: 'Audiowide';
  37. font-style: normal;
  38. font-weight: 400;
  39. src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  40. }
  41.  
  42. @font-face {
  43. font-family: 'Vampiro One';
  44. font-style: normal;
  45. font-weight: 400;
  46. src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
  47. }
  48.  
  49. body{
  50. background-color: #222222;
  51. }
  52.  
  53. #container{
  54.  
  55. margin:auto;
  56. }
  57.  
  58. /*neeeeoooon*/
  59. p{
  60. text-align:center;
  61. font-size:7em;
  62. margin:20px 0 20px 0;
  63. }
  64.  
  65. a{
  66. text-decoration:none;
  67. -webkit-transition: all 0.5s;
  68. -moz-transition: all 0.5s;
  69. transition: all 0.5s;
  70. }
  71.  
  72. p:nth-child(1) a{
  73. color:#FF1177;
  74. font-family:Monoton;
  75. }
  76. p:nth-child(1) a:hover{
  77. -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  78. -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  79. animation: neon1 1.5s ease-in-out infinite alternate;
  80. }
  81.  
  82. p:nth-child(2) a{
  83. font-size:1.5em;
  84. color:#228DFF;
  85. font-family:Iceland;
  86. }
  87. p:nth-child(2) a:hover{
  88. -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
  89. -moz-animation: neon2 1.5s ease-in-out infinite alternate;
  90. animation: neon2 1.5s ease-in-out infinite alternate;
  91. }
  92.  
  93. p:nth-child(3) a{
  94. color:#FFDD1B;
  95. font-family:Pacifico;
  96. }
  97. p:nth-child(3) a:hover{
  98. -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
  99. -moz-animation: neon3 1.5s ease-in-out infinite alternate;
  100. animation: neon3 1.5s ease-in-out infinite alternate;
  101. }
  102.  
  103. p:nth-child(4) a{
  104. color:#B6FF00;
  105. font-family:PressStart;
  106. font-size:0.8em;
  107. }
  108. p:nth-child(4) a:hover{
  109. -webkit-animation: neon4 1.5s ease-in-out infinite alternate;
  110. -moz-animation: neon4 1.5s ease-in-out infinite alternate;
  111. animation: neon4 1.5s ease-in-out infinite alternate;
  112. }
  113.  
  114. p:nth-child(5) a{
  115. color:#FF9900;
  116. font-family:Audiowide;
  117. }
  118. p:nth-child(5) a:hover{
  119. -webkit-animation: neon5 1.5s ease-in-out infinite alternate;
  120. -moz-animation: neon5 1.5s ease-in-out infinite alternate;
  121. animation: neon5 1.5s ease-in-out infinite alternate;
  122. }
  123.  
  124. p:nth-child(6) a{
  125. color:#BA01FF;
  126. font-family:Vampiro One;
  127. }
  128. p:nth-child(6) a:hover{
  129. -webkit-animation: neon6 1.5s ease-in-out infinite alternate;
  130. -moz-animation: neon6 1.5s ease-in-out infinite alternate;
  131. animation: neon6 1.5s ease-in-out infinite alternate;
  132. }
  133.  
  134. p a:hover{
  135. color:#ffffff;
  136. }
  137.  
  138. /*glow for webkit*/
  139. @-webkit-keyframes neon1 {
  140. from {
  141. text-shadow: 0 0 10px #fff,
  142. 0 0 20px #fff,
  143. 0 0 30px #fff,
  144. 0 0 40px #FF1177,
  145. 0 0 70px #FF1177,
  146. 0 0 80px #FF1177,
  147. 0 0 100px #FF1177,
  148. 0 0 150px #FF1177;
  149. }
  150. to {
  151. text-shadow: 0 0 5px #fff,
  152. 0 0 10px #fff,
  153. 0 0 15px #fff,
  154. 0 0 20px #FF1177,
  155. 0 0 35px #FF1177,
  156. 0 0 40px #FF1177,
  157. 0 0 50px #FF1177,
  158. 0 0 75px #FF1177;
  159. }
  160. }
  161.  
  162. @-webkit-keyframes neon2 {
  163. from {
  164. text-shadow: 0 0 10px #fff,
  165. 0 0 20px #fff,
  166. 0 0 30px #fff,
  167. 0 0 40px #228DFF,
  168. 0 0 70px #228DFF,
  169. 0 0 80px #228DFF,
  170. 0 0 100px #228DFF,
  171. 0 0 150px #228DFF;
  172. }
  173. to {
  174. text-shadow: 0 0 5px #fff,
  175. 0 0 10px #fff,
  176. 0 0 15px #fff,
  177. 0 0 20px #228DFF,
  178. 0 0 35px #228DFF,
  179. 0 0 40px #228DFF,
  180. 0 0 50px #228DFF,
  181. 0 0 75px #228DFF;
  182. }
  183. }
  184.  
  185. @-webkit-keyframes neon3 {
  186. from {
  187. text-shadow: 0 0 10px #fff,
  188. 0 0 20px #fff,
  189. 0 0 30px #fff,
  190. 0 0 40px #FFDD1B,
  191. 0 0 70px #FFDD1B,
  192. 0 0 80px #FFDD1B,
  193. 0 0 100px #FFDD1B,
  194. 0 0 150px #FFDD1B;
  195. }
  196. to {
  197. text-shadow: 0 0 5px #fff,
  198. 0 0 10px #fff,
  199. 0 0 15px #fff,
  200. 0 0 20px #FFDD1B,
  201. 0 0 35px #FFDD1B,
  202. 0 0 40px #FFDD1B,
  203. 0 0 50px #FFDD1B,
  204. 0 0 75px #FFDD1B;
  205. }
  206. }
  207.  
  208. @-webkit-keyframes neon4 {
  209. from {
  210. text-shadow: 0 0 10px #fff,
  211. 0 0 20px #fff,
  212. 0 0 30px #fff,
  213. 0 0 40px #B6FF00,
  214. 0 0 70px #B6FF00,
  215. 0 0 80px #B6FF00,
  216. 0 0 100px #B6FF00,
  217. 0 0 150px #B6FF00;
  218. }
  219. to {
  220. text-shadow: 0 0 5px #fff,
  221. 0 0 10px #fff,
  222. 0 0 15px #fff,
  223. 0 0 20px #B6FF00,
  224. 0 0 35px #B6FF00,
  225. 0 0 40px #B6FF00,
  226. 0 0 50px #B6FF00,
  227. 0 0 75px #B6FF00;
  228. }
  229. }
  230.  
  231. @-webkit-keyframes neon5 {
  232. from {
  233. text-shadow: 0 0 10px #fff,
  234. 0 0 20px #fff,
  235. 0 0 30px #fff,
  236. 0 0 40px #FF9900,
  237. 0 0 70px #FF9900,
  238. 0 0 80px #FF9900,
  239. 0 0 100px #FF9900,
  240. 0 0 150px #FF9900;
  241. }
  242. to {
  243. text-shadow: 0 0 5px #fff,
  244. 0 0 10px #fff,
  245. 0 0 15px #fff,
  246. 0 0 20px #FF9900,
  247. 0 0 35px #FF9900,
  248. 0 0 40px #FF9900,
  249. 0 0 50px #FF9900,
  250. 0 0 75px #FF9900;
  251. }
  252. }
  253.  
  254. @-webkit-keyframes neon6 {
  255. from {
  256. text-shadow: 0 0 10px #fff,
  257. 0 0 20px #fff,
  258. 0 0 30px #fff,
  259. 0 0 40px #ff00de,
  260. 0 0 70px #ff00de,
  261. 0 0 80px #ff00de,
  262. 0 0 100px #ff00de,
  263. 0 0 150px #ff00de;
  264. }
  265. to {
  266. text-shadow: 0 0 5px #fff,
  267. 0 0 10px #fff,
  268. 0 0 15px #fff,
  269. 0 0 20px #ff00de,
  270. 0 0 35px #ff00de,
  271. 0 0 40px #ff00de,
  272. 0 0 50px #ff00de,
  273. 0 0 75px #ff00de;
  274. }
  275. }
  276.  
  277. /*glow for mozilla*/
  278. @-moz-keyframes neon1 {
  279. from {
  280. text-shadow: 0 0 10px #fff,
  281. 0 0 20px #fff,
  282. 0 0 30px #fff,
  283. 0 0 40px #FF1177,
  284. 0 0 70px #FF1177,
  285. 0 0 80px #FF1177,
  286. 0 0 100px #FF1177,
  287. 0 0 150px #FF1177;
  288. }
  289. to {
  290. text-shadow: 0 0 5px #fff,
  291. 0 0 10px #fff,
  292. 0 0 15px #fff,
  293. 0 0 20px #FF1177,
  294. 0 0 35px #FF1177,
  295. 0 0 40px #FF1177,
  296. 0 0 50px #FF1177,
  297. 0 0 75px #FF1177;
  298. }
  299. }
  300.  
  301. @-moz-keyframes neon2 {
  302. from {
  303. text-shadow: 0 0 10px #fff,
  304. 0 0 20px #fff,
  305. 0 0 30px #fff,
  306. 0 0 40px #228DFF,
  307. 0 0 70px #228DFF,
  308. 0 0 80px #228DFF,
  309. 0 0 100px #228DFF,
  310. 0 0 150px #228DFF;
  311. }
  312. to {
  313. text-shadow: 0 0 5px #fff,
  314. 0 0 10px #fff,
  315. 0 0 15px #fff,
  316. 0 0 20px #228DFF,
  317. 0 0 35px #228DFF,
  318. 0 0 40px #228DFF,
  319. 0 0 50px #228DFF,
  320. 0 0 75px #228DFF;
  321. }
  322. }
  323.  
  324. @-moz-keyframes neon3 {
  325. from {
  326. text-shadow: 0 0 10px #fff,
  327. 0 0 20px #fff,
  328. 0 0 30px #fff,
  329. 0 0 40px #FFDD1B,
  330. 0 0 70px #FFDD1B,
  331. 0 0 80px #FFDD1B,
  332. 0 0 100px #FFDD1B,
  333. 0 0 150px #FFDD1B;
  334. }
  335. to {
  336. text-shadow: 0 0 5px #fff,
  337. 0 0 10px #fff,
  338. 0 0 15px #fff,
  339. 0 0 20px #FFDD1B,
  340. 0 0 35px #FFDD1B,
  341. 0 0 40px #FFDD1B,
  342. 0 0 50px #FFDD1B,
  343. 0 0 75px #FFDD1B;
  344. }
  345. }
  346.  
  347. @-moz-keyframes neon4 {
  348. from {
  349. text-shadow: 0 0 10px #fff,
  350. 0 0 20px #fff,
  351. 0 0 30px #fff,
  352. 0 0 40px #B6FF00,
  353. 0 0 70px #B6FF00,
  354. 0 0 80px #B6FF00,
  355. 0 0 100px #B6FF00,
  356. 0 0 150px #B6FF00;
  357. }
  358. to {
  359. text-shadow: 0 0 5px #fff,
  360. 0 0 10px #fff,
  361. 0 0 15px #fff,
  362. 0 0 20px #B6FF00,
  363. 0 0 35px #B6FF00,
  364. 0 0 40px #B6FF00,
  365. 0 0 50px #B6FF00,
  366. 0 0 75px #B6FF00;
  367. }
  368. }
  369.  
  370. @-moz-keyframes neon5 {
  371. from {
  372. text-shadow: 0 0 10px #fff,
  373. 0 0 20px #fff,
  374. 0 0 30px #fff,
  375. 0 0 40px #FF9900,
  376. 0 0 70px #FF9900,
  377. 0 0 80px #FF9900,
  378. 0 0 100px #FF9900,
  379. 0 0 150px #FF9900;
  380. }
  381. to {
  382. text-shadow: 0 0 5px #fff,
  383. 0 0 10px #fff,
  384. 0 0 15px #fff,
  385. 0 0 20px #FF9900,
  386. 0 0 35px #FF9900,
  387. 0 0 40px #FF9900,
  388. 0 0 50px #FF9900,
  389. 0 0 75px #FF9900;
  390. }
  391. }
  392.  
  393. @-moz-keyframes neon6 {
  394. from {
  395. text-shadow: 0 0 10px #fff,
  396. 0 0 20px #fff,
  397. 0 0 30px #fff,
  398. 0 0 40px #ff00de,
  399. 0 0 70px #ff00de,
  400. 0 0 80px #ff00de,
  401. 0 0 100px #ff00de,
  402. 0 0 150px #ff00de;
  403. }
  404. to {
  405. text-shadow: 0 0 5px #fff,
  406. 0 0 10px #fff,
  407. 0 0 15px #fff,
  408. 0 0 20px #ff00de,
  409. 0 0 35px #ff00de,
  410. 0 0 40px #ff00de,
  411. 0 0 50px #ff00de,
  412. 0 0 75px #ff00de;
  413. }
  414. }
  415.  
  416. /*glow*/
  417. @keyframes neon1 {
  418. from {
  419. text-shadow: 0 0 10px #fff,
  420. 0 0 20px #fff,
  421. 0 0 30px #fff,
  422. 0 0 40px #FF1177,
  423. 0 0 70px #FF1177,
  424. 0 0 80px #FF1177,
  425. 0 0 100px #FF1177,
  426. 0 0 150px #FF1177;
  427. }
  428. to {
  429. text-shadow: 0 0 5px #fff,
  430. 0 0 10px #fff,
  431. 0 0 15px #fff,
  432. 0 0 20px #FF1177,
  433. 0 0 35px #FF1177,
  434. 0 0 40px #FF1177,
  435. 0 0 50px #FF1177,
  436. 0 0 75px #FF1177;
  437. }
  438. }
  439.  
  440. @keyframes neon2 {
  441. from {
  442. text-shadow: 0 0 10px #fff,
  443. 0 0 20px #fff,
  444. 0 0 30px #fff,
  445. 0 0 40px #228DFF,
  446. 0 0 70px #228DFF,
  447. 0 0 80px #228DFF,
  448. 0 0 100px #228DFF,
  449. 0 0 150px #228DFF;
  450. }
  451. to {
  452. text-shadow: 0 0 5px #fff,
  453. 0 0 10px #fff,
  454. 0 0 15px #fff,
  455. 0 0 20px #228DFF,
  456. 0 0 35px #228DFF,
  457. 0 0 40px #228DFF,
  458. 0 0 50px #228DFF,
  459. 0 0 75px #228DFF;
  460. }
  461. }
  462.  
  463. @keyframes neon3 {
  464. from {
  465. text-shadow: 0 0 10px #fff,
  466. 0 0 20px #fff,
  467. 0 0 30px #fff,
  468. 0 0 40px #FFDD1B,
  469. 0 0 70px #FFDD1B,
  470. 0 0 80px #FFDD1B,
  471. 0 0 100px #FFDD1B,
  472. 0 0 150px #FFDD1B;
  473. }
  474. to {
  475. text-shadow: 0 0 5px #fff,
  476. 0 0 10px #fff,
  477. 0 0 15px #fff,
  478. 0 0 20px #FFDD1B,
  479. 0 0 35px #FFDD1B,
  480. 0 0 40px #FFDD1B,
  481. 0 0 50px #FFDD1B,
  482. 0 0 75px #FFDD1B;
  483. }
  484. }
  485.  
  486. @keyframes neon4 {
  487. from {
  488. text-shadow: 0 0 10px #fff,
  489. 0 0 20px #fff,
  490. 0 0 30px #fff,
  491. 0 0 40px #B6FF00,
  492. 0 0 70px #B6FF00,
  493. 0 0 80px #B6FF00,
  494. 0 0 100px #B6FF00,
  495. 0 0 150px #B6FF00;
  496. }
  497. to {
  498. text-shadow: 0 0 5px #fff,
  499. 0 0 10px #fff,
  500. 0 0 15px #fff,
  501. 0 0 20px #B6FF00,
  502. 0 0 35px #B6FF00,
  503. 0 0 40px #B6FF00,
  504. 0 0 50px #B6FF00,
  505. 0 0 75px #B6FF00;
  506. }
  507. }
  508.  
  509. @keyframes neon5 {
  510. from {
  511. text-shadow: 0 0 10px #fff,
  512. 0 0 20px #fff,
  513. 0 0 30px #fff,
  514. 0 0 40px #FF9900,
  515. 0 0 70px #FF9900,
  516. 0 0 80px #FF9900,
  517. 0 0 100px #FF9900,
  518. 0 0 150px #FF9900;
  519. }
  520. to {
  521. text-shadow: 0 0 5px #fff,
  522. 0 0 10px #fff,
  523. 0 0 15px #fff,
  524. 0 0 20px #FF9900,
  525. 0 0 35px #FF9900,
  526. 0 0 40px #FF9900,
  527. 0 0 50px #FF9900,
  528. 0 0 75px #FF9900;
  529. }
  530. }
  531.  
  532. @keyframes neon6 {
  533. from {
  534. text-shadow: 0 0 10px #fff,
  535. 0 0 20px #fff,
  536. 0 0 30px #fff,
  537. 0 0 40px #ff00de,
  538. 0 0 70px #ff00de,
  539. 0 0 80px #ff00de,
  540. 0 0 100px #ff00de,
  541. 0 0 150px #ff00de;
  542. }
  543. to {
  544. text-shadow: 0 0 5px #fff,
  545. 0 0 10px #fff,
  546. 0 0 15px #fff,
  547. 0 0 20px #ff00de,
  548. 0 0 35px #ff00de,
  549. 0 0 40px #ff00de,
  550. 0 0 50px #ff00de,
  551. 0 0 75px #ff00de;
  552. }
  553. }
  554.  
  555. /*REEEEEEEEEEESPONSIVE*/
  556. @media (max-width: 650px) {
  557.  
  558. #container{
  559. width: 100%;
  560. }
  561.  
  562. p{
  563. font-size:3.5em;
  564. }
  565.  
  566. }

以上就是本文的全部内容，希望对大家的学习有所帮助。

时间： 2024-09-17 17:56:50

CSS3制作炫酷的自定义发光文字的相关文章

JS+CSS3制作炫酷的弹窗效果_javascript技巧

昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~        首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给

PhotoShop制作炫酷复古线型文字效果教程

教大家用PhotoShop制作炫酷复古线型文字效果,在本教程中你将学到如何利用切片工具制作出背景的条纹格子装饰元素,切片工具我们平时 都很少用到,以为只有做网页的时候才用,喜欢的同学可以跟着做一下! 先看photoshop教程效果图: 具体教程:1.新建800*800大小文档,拉渐变#423931到黑色的渐变,新建图层用灰尘笔刷刷一点雾的感觉,ctrl+T把雾图层拉到画布底端(效果不用很明显). 2.用素材里提供的akka字体(点此下载) 打上文字,我这里选用的颜色是#f76a38. 3.给字体

如何使用PS制作炫酷旋转QQ头像？

  你还在为不会制作炫酷旋转QQ头像而烦恼吗?看到别人发布的好看的炫酷旋转QQ头像,自己也想学习制作?今天qq无极限小编教各位如何使用PS制作炫酷旋转QQ头像! 工具/原料 Adobe Photoshop CS3 方法/步骤 1双击图标打开photoshop图形图像软件 新建一个200*200大的透明图像 设置前景色为黑色(色值:#000000),并按快捷键:Alt+Delete键给新建的图层填充前景色 点击有图红圈内图标新建图层 使用矩形选框工具,框选如下图所示: 在虚线框内点击右键--描边,

photoshop设计制作炫酷的破碎效果

  给大家分享一个利用 photoshop设计制作炫酷的破碎效果,教程简单易学,仅需几个步骤即可设计完成,感兴趣的童鞋可以马了试试看 分类: PS图片处理

jquery+css3实现炫酷菜单导航实例

提示:您可以先修改部分代码再运行 点击列表图表后,内容页面向内移动显示菜单项.当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位.看下图 jquery和css3实现炫酷菜单导航  代码部分      代码如下 复制代码 <html> <head> <title>jquery和css3实现炫酷菜单导航</title> <script type="text/javascript" src="http://apps.bdimg.c

photoshop教程：制作炫酷街舞姿势图

这是一个高级教程,我的意思是没有技术很难做到,这项工作需要很高的艺术鉴赏力,运用一些颜色的经验和投放阴影的知识. 今天,我要给大家展示制作迷人的光线效果以及在工作中运用它们创作炫酷的图片.让我们开始吧! 来源活力盒子 最终效果预览 教程的细节 软件:dobe Photoshop CS3 难度:高级 准备 这是一个高级教程,我的意思是没有技术很难做到,这项工作需要很高的艺术鉴赏力,运用一些颜色的经验和投放阴影的知识.因此,我不推荐初学者做这个教程.我将跳过基本指南直接进入主要问题.基本上,我会教大

Photoshop制作炫酷的提升设计水平主题海报

  这是巧匠招生专题的海报,风格狂拽炫酷.加入一些Photoshop界面元素在画面中,为了让画面更有设计师专属的代入感. 最终效果 主题海报-photoshop炫酷字体"> 头脑风暴: 寻找灵感: 找素材: 1.深蓝色背景添加杂色,加入地面素材用蒙版擦出一个大概的椭圆形,曲线压暗地面亮度. 2.加入茧的素材,用污点修复画笔去掉大的瑕疵,然后用中性灰调整光影. 3.加入岩浆裂纹碎石素材,用曲线调整碎石明暗.然后用色彩平衡调整颜色偏红一点. 4.新建图层,用红色画笔在碎石周围加上红色,图层模式

Android中通过AsyncTask类来制作炫酷进度条的实例教程_Android

AsyncTask (API level 3,所以几乎所有目前在市面上流通的 Android 版本皆可使用) 是除 Thread 外的另一种选择,Android 团队鼓励主执行绪(UI thread) 专注于操作 & 画面的流畅呈现, 其余工作 (如网络资料传输.档案/磁碟/资料存取) 最好都在背景执行: Thread 通常要搭配 Handler 使用,而 AsyncTask 用意在简化背景执行 thread 程序码的撰写. 如果您预期要执行的工作能在几秒内完成,就可以选择使用 AsyncTas

Android中通过AsyncTask类来制作炫酷进度条的实例教程

AsyncTask (API level 3,所以几乎所有目前在市面上流通的 Android 版本皆可使用) 是除 Thread 外的另一种选择,Android 团队鼓励主执行绪(UI thread) 专注于操作 & 画面的流畅呈现, 其余工作 (如网络资料传输.档案/磁碟/资料存取) 最好都在背景执行: Thread 通常要搭配 Handler 使用,而 AsyncTask 用意在简化背景执行 thread 程序码的撰写. 如果您预期要执行的工作能在几秒内完成,就可以选择使用 AsyncTas