整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
不多說，直接進入我們今天的主題！今天就為大家分享一款最近多人使用的純HTML代碼動畫頁面源碼~
先讓我們一起看看效果是怎么樣的
是不是特別的炫酷呢！就問你想不想要源代碼！現在就立馬分享給你們哦！收好了~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
overflow: hidden;
}
.twitter:hover a {
transform: rotate(-45deg) scale(1.05);
}
.twitter:hover i {
color: #21c2ff;
}
.twitter a {
bottom: -40px;
right: -75px;
transform: rotate(-45deg);
}
.twitter i {
bottom: 7px;
right: 7px;
color: #00ACED;
}
.social-icon a {
position: absolute;
background: white;
color: white;
box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
display: inline-block;
width: 150px;
height: 80px;
transform-origin: 50% 50%;
transition: .15s ease-out;
}
.social-icon i {
position: absolute;
pointer-events: none;
z-index: 1000;
transition: .15s ease-out;
}
.youtube:hover a {
transform: rotate(45deg) scale(1.05);
}
.youtube:hover i {
color: #ec4c44;
}
.youtube a {
bottom: -40px;
left: -75px;
transform: rotate(45deg);
}
.youtube i {
bottom: 7px;
left: 7px;
color: #E62117;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
var canvas = document.querySelector("canvas");
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var mouse = {
x: canvas.width / 2,
y: canvas.height / 2
}
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
window.addEventListener("mousemove", function(e) {
mouse.x = e.clientX;
mouse.y = e.clientY;
});
var colors = [
{r: 255, g: 71, b: 71},
{r: 0, g: 206, b: 237},
{r: 255, g: 255, b: 255}
];
function Particle(x, y, dx, dy, r, ttl) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.r = r;
this.opacity = 1;
this.shouldRemove = false;
this.timeToLive = ttl;
this.randomColor = Math.floor(Math.random() * colors.length);
this.update = function() {
this.x += this.dx
this.y += this.dy
if (this.x + this.r >= canvas.width || this.x - this.r <= 0)
this.dx = -this.dx
if (this.y + this.r >= canvas.height || this.y - this.r <= 0)
this.dy = -this.dy
// Ensure that particles cannot be spawned past canvas boundaries
this.x = Math.min(Math.max(this.x, 0 + this.r), canvas.width - this.r)
this.y = Math.min(Math.max(this.y, 0 + this.r), canvas.height - this.r)
c.beginPath()
c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false)
c.strokeStyle =
'rgba(' +
colors[this.randomColor].r +
',' +
colors[this.randomColor].g +
',' +
colors[this.randomColor].b +
',' +
this.opacity +
')'
c.fillStyle =
'rgba(' +
colors[this.randomColor].r +
',' +
colors[this.randomColor].g +
',' +
colors[this.randomColor].b +
',' +
this.opacity +
')'
c.stroke()
c.closePath()
this.opacity -= 1 / (ttl / 0.1)
this.r -= r / (ttl / 0.1)
if (this.r < 0) this.r = 0 // Thank you Akash for the conditional!
this.timeToLive -= 0.1
}
this.remove = function() {
// If timeToLive expires, return a true value.
// This signifies that the particle should be removed from the scene.
return this.timeToLive <= 0;
}
}
function Explosion(x, y) {
this.particles = [];
this.init = function() {
for (var i = 1; i <= 1; i++) {
var randomVelocity = {
x: (Math.random() - 0.5) * 3.5,
y: (Math.random() - 0.5) * 3.5,
}
this.particles.push(new Particle(x, y, randomVelocity.x, randomVelocity.y, 30, 8));
}
}
this.init();
this.draw = function() {
for (var i = 0; i < this.particles.length; i++) {
this.particles[i].update();
if (this.particles[i].remove() == true) {
this.particles.splice(i, 1);
};
}
}
}
var explosions = [];
function animate() {
window.requestAnimationFrame(animate);
c.fillStyle = "#1e1e1e";
c.fillRect(0, 0, canvas.width, canvas.height);
explosions.push(new Explosion(mouse.x, mouse.y));
for (var i = 0; i < explosions.length; i++) {
explosions[i].draw();
}
}
animate();</script>
</body>
</html>
想要了解更多HTML5的特效，繼續關注我喲，或者關注重慶千鋒教育官網，學習更多的技術知識。想要學習HTML5技術知識的同學們，也可以到千鋒重慶HTML5培訓班試聽課程。千鋒重慶提供兩周免費試聽課程，歡迎你來試聽。
適的動畫不僅更能吸引人們的眼球，也能讓你的應用體驗更為流暢，而將動畫的效果做到極致，才能讓用戶感到使用你的應用是一種享受，而不是覺得生硬和枯燥。那么Web前端人員是否了解各種前端動畫效果實現方式的異同，具體應用中又是如何實現的呢?下面就讓我們一起來看一看吧~
一、JavaScript 動畫
因為沒有其它可用的實現方式，最初的前端動畫都是JS來實現，實現上就是通過一個定時器setInterval 每隔一定時間來改變元素的樣式，動畫結束時clearInterval即可。早期的類庫包括 jquery、prototype、mootools 等等都是這種方式。
盡管這種方式動畫的可控性很強，但是問題也很明顯：
· 性能不佳，因為需要不斷獲取和修改Dom的布局，所以導致了大量頁面重排(repaint)
· 缺乏標準，不同的庫使用了不同的API，導致即使是簡單的動畫也有各不相同的實現方式，調整起來比較耗時
· 帶寬消耗，相對豐富的動畫庫代碼量都很大，結果就是增加了http請求的大小，降低了頁面的載入時間
二、CSS3 動畫
css3 加了兩種動畫的實現方式，一種是 transition， 一種是 animation。
transition 包含4種屬性：transition-delay transition-duration transition-property transition-timing-function，對應動畫的4種屬性： 延遲、持續時間、對應css屬性和緩動函數，
transform 包含7種屬性：animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state，它們可以定義動畫名稱，持續時間，緩動函數，動畫延遲，動畫方向，重復次數，填充模式。
總的來書，css 動畫相比與JS更輕量，性能更好，更易于實現，同時也不必擔心缺乏標準和增加帶寬消耗的問題。animation 相比 transtion 使用起來更為復雜，但也提供了更多的控制，其中最重要的就是 frame 的支持，不過通過一些簡單的JS庫，例如 TJ 的 move.js, 我們也能在JS中通過 transition 來實現更復雜的控制。
三、Html5 動畫
Html5 定義了三種繪圖的方式，canvas svg Webgl，其中svg做為一種可縮放矢量圖形的實現是基于xml標簽定義的，它有專門的 animate 標簽來定義動畫。而為 canvas 或者 Webgl 實現動畫則需要通過 requestAnimationFrame (簡稱 raf) 來定期刷新畫布。盡管說 raf 的方式會讓代碼變得復雜，但是因為不需要那么多的文檔對象(通常瀏覽器只需要管理一個畫布)，它的性能也好很多，尤其是在內存吃緊的移動端上面。
通過新的 raf 接口以及一些改進手段我們也可以用JS來實現高性能的動畫。主要手段如下：
1. 減少 Dom 樣式屬性查詢，Dom 樣式屬性的查詢會導致頁面重排，從而消耗性能，通過將屬性保存在JS變量中就可以避免在動畫時去查詢，從而減少卡頓。
2. 使用性能更好的 css transform 替代改變絕對定位元素的定位屬性
3. 在移動設備上使用 3d 硬件加速，最簡單辦法就是添加 -Webkit-transform: translateZ(0)，原因是移動端的顯卡有很強的圖形渲染能力，而每個應用的 WebvieW 內存卻是極其有限的。
使用JS的動畫可控性更好，比如說通過事件捕捉可以很容易的設定不同參數。這方面做的最全面的有 Velocity.js，它可做為jquery 插件使用，對于初學者很友好。加入465042726，關于前端方面的更多問題我們可以一起交流！
是一個基于HTML5的齒輪動畫特效，我們將齒輪轉動的物理學原理，
轉換為HTML5代碼，在網頁上實現了模擬齒輪轉動的動畫效果。
該齒輪動畫的最大特點是它由好多個齒輪組成，
這對齒輪傳動的算法要求就大大提高了，而且我們并沒有用JavaScript，而是純CSS3實現的。
HTML代碼
<div id="level"> <div id="content"> <div id="gears"> <div id="gears-static"></div> <div id="gear-system-1"> <div class="shadow"id="shadow15"></div> <div id="gear15"></div> <div class="shadow"id="shadow14"></div> <div id="gear14"></div> <div class="shadow"id="shadow13"></div> <div id="gear13"></div> </div> <div id="gear-system-2"> <div class="shadow"id="shadow10"></div> <div id="gear10"></div> <div class="shadow"id="shadow3"></div> <div id="gear3"></div> </div> <div id="gear-system-3"> <div class="shadow"id="shadow9"></div> <div id="gear9"></div> <div class="shadow"id="shadow7"></div> <div id="gear7"></div> </div> <div id="gear-system-4"> <div class="shadow"id="shadow6"></div> <div id="gear6"></div> <div id="gear4"></div> </div> <div id="gear-system-5"> <div class="shadow"id="shadow12"></div> <div id="gear12"></div> <div class="shadow"id="shadow11"></div> <div id="gear11"></div> <div class="shadow"id="shadow8"></div> <div id="gear8"></div> </div> <div class="shadow"id="shadow1"></div> <div id="gear1"></div> <div id="gear-system-6"> <div class="shadow"id="shadow5"></div> <div id="gear5"></div> <div id="gear2"></div> </div> <div class="shadow"id="shadowweight"></div> <div id="chain-circle"></div> <div id="chain"></div> <div id="weight"></div> </div> </div></div>
CSS代碼
#level{ width:100%; height:1px; position:absolute; top:50%;}#content{ text-align:center; margin-top:-327px;}#gears{ width:478px; height:655px; position:relative; display:inline-block; vertical-align:middle;}#gears-static{ background:url(FgFnjks.png) no-repeat -363px -903px; width:329px; height:602px; position:absolute; bottom:5px; right:0px; opacity:0.4;}#title{ vertical-align:middle; color:#9EB7B5; width:43%; display:inline-block;}#title h1{ font-family: 'PTSansNarrowBold', sans-serif; font-size:3.6em; text-shadow:rgba(0, 0, 0, 0.36) 7px7px10px;}#title p{ font-family: sans-serif; font-size:1.2em; line-height:148%; text-shadow:rgba(0, 0, 0, 0.36) 1px1px0px;} .shadow{ -webkit-box-shadow: 4px7px25px10pxrgba(43, 36, 0, 0.36); -moz-box-shadow: 4px7px25px10pxrgba(43, 36, 0, 0.36); box-shadow: 4px7px25px10pxrgba(43, 36, 0, 0.36);} /*gear-system-1*/#gear15{ background: url(FgFnjks.png) no-repeat 0 -993px; width: 321px; height: 321px; position:absolute; left:45px; top:179px; -webkit-animation: rotate-back 24000ms linear infinite; -moz-animation: rotate-back 24000ms linear infinite; -ms-animation: rotate-back 24000ms linear infinite; animation: rotate-back 24000ms linear infinite;}#shadow15{ width:306px; height:306px; -webkit-border-radius:153px; -moz-border-radius:153px; border-radius:153px; position:absolute; left:52px; top:186px;}#gear14{ background: url(FgFnjks.png) no-repeat 0 -856px; width: 87px; height: 87px; position:absolute; left:162px; top:296px;}#shadow14{ width:70px; height:70px; -webkit-border-radius:35px; -moz-border-radius:35px; border-radius:35px; position:absolute; left:171px; top:304px;}#gear13{ background: url(FgFnjks.png) no-repeat 0 -744px; width: 62px; height: 62px; position:absolute; left:174px; top:309px; -webkit-animation: rotate 8000ms linear infinite; -moz-animation: rotate 8000ms linear infinite; -ms-animation: rotate 8000ms linear infinite; animation: rotate 8000ms linear infinite;}#shadow13{ width:36px; height:36px; -webkit-border-radius:18px; -moz-border-radius:18px; border-radius:18px; position:absolute; left:187px; top:322px;} /*gear-system-2*/#gear10{ background: url(FgFnjks.png) no-repeat 0 -184px; width: 122px; height: 122px; position:absolute; left:175px; top:0; -webkit-animation: rotate-back 8000ms linear infinite; -moz-animation: rotate-back 8000ms linear infinite; -ms-animation: rotate-back 8000ms linear infinite; animation: rotate-back 8000ms linear infinite;}#shadow10{ width:86px; height:86px; -webkit-border-radius:43px; -moz-border-radius:43px; border-radius:43px; position:absolute; left:193px; top:18px;}#gear3{ background: url(FgFnjks.png) no-repeat 0 -1493px; width: 85px; height: 84px; position:absolute; left:194px; top:19px; -webkit-animation: rotate 10000ms linear infinite; -moz-animation: rotate 10000ms linear infinite; -ms-animation: rotate 10000ms linear infinite; animation: rotate 10000ms linear infinite;}#shadow3{ width:60px; height:60px; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; position:absolute; left:206px; top:31px;} /*gear-system-3*/#gear9{ background: url(FgFnjks.png) no-repeat -371px -280px; width: 234px; height: 234px; position:absolute; left:197px; top:96px; -webkit-animation: rotate 12000ms linear infinite; -moz-animation: rotate 12000ms linear infinite; -ms-animation: rotate 12000ms linear infinite; animation: rotate 12000ms linear infinite;}#shadow9{ width:200px; height:200px; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; position:absolute; left:214px; top:113px;}#gear7{ background: url(FgFnjks.png) no-repeat -371px0; width: 108px; height: 108px; position:absolute; left:260px; top:159px; -webkit-animation: rotate-back 10000ms linear infinite; -moz-animation: rotate-back 10000ms linear infinite; -ms-animation: rotate-back 10000ms linear infinite; animation: rotate-back 10000ms linear infinite;}#shadow7{ width:76px; height:76px; -webkit-border-radius:38px; -moz-border-radius: 38px; border-radius: 38px; position:absolute; left:276px; top:175px;} /*gear-system-4*/#gear6{ background: url(FgFnjks.png) no-repeat 0 -1931px; width: 134px; height: 134px; position:absolute; left:305px; bottom:212px; -webkit-animation: rotate-back 10000ms linear infinite; -moz-animation: rotate-back 10000ms linear infinite; -ms-animation: rotate-back 10000ms linear infinite; animation: rotate-back 10000ms linear infinite;}#shadow6{ width:98px; height:98px; -webkit-border-radius:49px; -moz-border-radius: 49px; border-radius: 49px; position:absolute; left:323px; bottom:230px;}#gear4{ background: url(FgFnjks.png) no-repeat 0 -1627px; width: 69px; height: 69px; position:absolute; left:337px; bottom:245px; -webkit-animation: rotate-back 10000ms linear infinite; -moz-animation: rotate-back 10000ms linear infinite; -ms-animation: rotate-back 10000ms linear infinite; animation: rotate-back 10000ms linear infinite;} /*gear-system-5*/#gear12{ background: url(FgFnjks.png) no-repeat 0 -530px; width: 164px;
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
