网站地图    收藏   

子栏目

主页 > 前端 > html5 >

利用纯html5绘制出来的一款非常漂亮的时钟_html

来源：自学PHP网    时间：2015-01-26 11:14 作者： 阅读:次

[导读] 今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。下面我们来看看具体实现的代码，需要的朋友可以参考下...

今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。下面我们来看看具体实现的代码，需要的朋友可以参考下

　　今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图：

　　实现的代码。

　　htm代码：

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.         <svg width="600" height="600" class='svg-element'>  
  3.        
  4.     <filter id="f4" x="-50%" y="-20%" width="200%" height="140%">  
  5.       <feOffset result="offOut" in="SourceAlpha" dx="0" dy="25" />  
  6.       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />  
  7.       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />  
  8.     </filter>  
  9.        
  10.   <filter id="blurred-source" x="-50%" y="-20%" width="200%" height="140%">  
  11.     <feGaussianBlur in="color" stdDeviation="5" result="blurOut"/>  
  12.   </filter>  
  13.         
  14.     <filter id="inset-shadow">  
  15.         <feOffset dx="0" dy="10"/>                                                         <!-- Shadow Offset -->  
  16.         <feGaussianBlur stdDeviation="15"  result="offset-blur"/>                           <!-- Shadow Blur -->  
  17.         <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->  
  18.         <feFlood flood-color="black" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->  
  19.         <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->  
  20.         <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->  
  21.             <feFuncA type="linear" slope="1"/>  
  22.         </feComponentTransfer>  
  23.         <feComposite operator="over" in="shadow" in2="SourceGraphic"/>                    <!-- Put shadow over original object -->  
  24.     </filter>  
  25.        
  26.     <filter id="inset-shadow-big">  
  27.         <feOffset dx="0" dy="4"/>                                                         <!-- Shadow Offset -->  
  28.         <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->  
  29.         <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->  
  30.         <feFlood flood-color="white" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->  
  31.         <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->  
  32.         <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->  
  33.             <feFuncA type="linear" slope="0.5"/>  
  34.         </feComponentTransfer>  
  35.         <feComposite operator="over" in="shadow" in2="SourceGraphic"/>                    <!-- Put shadow over original object -->  
  36.     </filter>  
  37.        
  38.     <filter id="inset-shadow-big-bottom">  
  39.         <feOffset dx="0" dy="10"/>                                             &nbs

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论