css3 html5 动效

CSS3与HTML5是现代网页设计中最受欢迎的技术之一，能够为网页带来丰富的动态效果。

/* CSS3代码示例 */.box {
        width: 200px;
        height: 200px;
        background: #ff9900;
        border-radius: 50%;
        animation: rotate 3s linear infinite;
}
@keyframes rotate {
    from {
            transform: rotate(0deg);
    }
    to {
            transform: rotate(360deg);
    }
}
    

CSS3提供了丰富的动态效果，通过使用关键帧动画或过渡效果，可以轻松地为网页添加旋转、缩放、平移等动态效果。

HTML5另一方面可以用来创建流媒体、处理图像和音频，并且还可以通过canvas来绘制各种矢量和位图图像。下面是一个HTML5中canvas标签的动态效果实例。

!-- HTML5代码示例 -->
    canvas id="myCanvas" width="200" height="200">
    /canvas>
    script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var x = canvas.width / 2;
        var y = canvas.height / 2;
        var radius = 75;
        var startAngle = 0;
        var endAngle = Math.PI * 2;
        var counterClockwise = false;
        ctx.beginPath();
        ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        ctx.lineWidth = 15;
        //设置线条渐变色     var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
        gradient.addColorStop(0, "red");
        gradient.addColorStop(0.5, "orange");
        gradient.addColorStop(1, "yellow");
        ctx.strokeStyle = gradient;
        ctx.stroke();
    /script>
    

以上展示了如何使用HTML5的canvas标签绘制一个圆形并且重绘出线条渐变色。HTML5的canvas标签提供了强大的绘图API，可以用来绘制各种形状、渐变、图片等。通过JavaScript来控制canvas的绘制，可以实现多种复杂的动态效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！