360是一家知名的互聯網安全公司,其產品演示中廣泛使用了css3和html5技術。
在360產品演示中,常常需要使用動態效果,比如按鈕點擊后的變化、頁面元素的動態展示等。這些效果通常使用css3實現。
以下是一個簡單的css3動畫示例:
.box { width: 100px; height: 100px; border-radius: 50%; background-color: #f00; position: relative; animation: spin 2s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
這段代碼會創建一個紅色的圓形div,并使用css3的animation屬性實現旋轉動畫。
除了動態效果,360產品演示中還使用了html5的canvas技術實現了一些更復雜的視覺效果。
以下是一個使用canvas繪制的簡單游戲示例:
<canvas id="myCanvas" width="480" height="320"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var x = canvas.width/2; var y = canvas.height-30; var dx = 2; var dy = -2; var ballRadius = 10; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); x += dx; y += dy; if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; } } setInterval(draw, 10); </script>
這段代碼會在頁面上創建一個canvas元素,并使用Javascript繪制一個球體,并實現其在畫布內的移動。通過setInterval函數以10毫秒的間隔不斷繪制球體并更新其位置,實現運動效果。