H5+CSS--雨滴特效

最新推荐文章于 2024-05-28 12:36:33 发布

CasT1R

最新推荐文章于 2024-05-28 12:36:33 发布

阅读量1.9k

点赞数

分类专栏： HTML5+CSS3基础

本文链接：https://blog.csdn.net/qq_41681743/article/details/82427059

版权

本文详细讲解如何使用HTML5和CSS3创建逼真的雨滴下落动画效果，包括雨滴的生成、运动轨迹及透明度变化，让网页增加动态视觉魅力。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Rain</title>  
    <style>  
        body,html{margin:0px;height:100%;}  
        ul,ol{margin:0;padding:0;list-style:none;}  
        a{text-decoration:none;}  
        img{border:none;}  
        canvas{background:#000;display: block;}  
    </style>  
</head>  
<body>  
    <canvas id="canvas">您的浏览器不支持canvas标签，请更换浏览器！</canvas>  
    <script>  
        // window.requestAnimFram = (function(){  
        //  // return   
        // })();  
        var can = document.getElementById('canvas');  
        var cxt = can.getContext('2d');  
        // 获取浏览器窗口宽高，并设置canvas全屏显示（必须给canvas设置宽高，否则会采用默认宽高，对后面绘图的坐标都难以控制（坐标和宽高都难以控制））  
        var w = can.width =