48种字体特效
文字虛幻抖動, 抖音破壞風
<!DOCTYPE > <html lang="en"> <head><meta charset="UTF-8"/><title>文字虛幻抖動</title></head> <body style="background-color: #000"> <div id="Title2" style="color: gray; font: bold 50px arial; position: absolute; visibility:hidden; top:100px; left:300px;"><h1>思江南</h1><p>昨日草枯今日青， <br/>羈人又動故鄉情。<br/>夜來有夢登歸路，<br/>不到桐廬已及明。</p> </div> <div id="Title1" style="color: white; font: bold 50px arial; position: absolute; visibility:hidden; top:100px; left:300px"><h1>思江南</h1><p>昨日草枯今日青， <br/>羈人又動故鄉情。<br/>夜來有夢登歸路，<br/>不到桐廬已及明。</p> </div> <script>var Tle2 = "document.all.Title2.style";var Tle1 = "document.all.Title1.style";eval(Tle2).top = eval(Tle1).top = document.body.clientHeight / 2 - 250;eval(Tle2).left = eval(Tle1).left = document.body.clientWidth / 2 - 150;function Fade() {var BackX = Math.random() * 10;var BackY = Math.random() * 5;if (Math.random() < 0.5) {BackX = -BackX;BackY = -BackY;}eval(Tle1).visibility = eval(Tle2).visibility = "visible";eval(Tle2).left = parseInt(eval(Tle1).left) + BackX;eval(Tle2).top = parseInt(eval(Tle1).top) + BackY;var FadeID = setTimeout("Fade()", 50);}Fade(); </script></body> </html>HTML5炫酷光粒子動畫特效
HTML5確實非常強大，很多時候我們可以利用HTML5中的新技術實現非常炫酷的粒子動畫效果，粒子動畫在HTML5應用中也是比較消耗本地資源的，尤其是CPU，但是有些HTML5粒子效果確實能給用戶帶來不一樣的驚艷用戶體驗。本文就是要分享11款效果驚艷的HTML5粒子動畫特效，希望你可以喜歡。
文字自動滾屏
公眾號排版中經常會使用一些特殊的樣式，增加排版效果，增進跟用戶之間的互動，那么文字段落滾動效果是怎么做出來的，下面就為大家帶來教程。
使用SVG實現文字旋轉的動畫效果
???????CSS 3.0實現水紋晃動特效?
純CSS實現實現水紋晃動特效
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS 3.0實現水紋晃動特效</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: '微軟雅黑', sans-serif;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #000;}.container {position: relative;}.container h2 {position: absolute;font-size: 20em;transform: translate(-50%, -50%);}.container h2:nth-child(1) {color: transparent;-webkit-text-stroke: 2px #03a9f4;}.container h2:nth-child(2) {color: #03a9f4;animation: animate 4s ease-in-out infinite;}@keyframes animate {0%,100% {clip-path: polygon(1% 65%, 32% 75%, 44% 75%, 69% 70%, 86% 62%, 97% 57%, 100% 54%, 100% 99%, 3% 100%, 1% 100%);}50% {clip-path: polygon(1% 73%, 24% 74%, 40% 74%, 66% 59%, 87% 50%, 97% 45%, 100% 43%, 100% 99%, 3% 100%, 1% 100%);}}</style></head><body> <div class="container"><h2>Water</h2><h2>Water</h2> </div> </body></html>更多字體特效請看 ztf.net.cn?
總結
- 上一篇： FFmpeg开发(七)——Qt视频播放器
- 下一篇： 雷电pygame代码