Canvas实现放射线动画

2019-09-10 郑州网站建设  

经常看见网站上一些放射线动画,出于程序员的好奇,divcss5小编也做了一款canvas实现的放射线动画,代码如下:

<!DOCTYPE html>

<html>

 

         <head>

                   <meta charset="UTF-8">

                   <title></title>

                   <style>

                            body {background: #000;overflow: hidden;margin: 0;padding: 0;}

                            #canv {width: 45%;margin: 5% 30%;animation: wheel-rotate 30s linear infinite;}

                            @keyframes wheel-rotate {

                                     from {

                                               transform: rotate(0deg);

                                     }

                                     to {

                                               transform: rotate(360deg);

                                     }

                            }

                   </style>

         </head>

 

         <body>

                   <canvas id="canv" width="600" height="600"></canvas>

                   <script type="text/javascript">

                            var c;

                            var $;

                            var w = 600;

                            var h = 600;


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1797.html转载请标明出处,谢谢合作!
标签:
  • 网站
  • 动画
  • 一些
  • Canvas
  • 经常
  • 线
  • 看见
  • 放射