程序博客网 > js调用微信扫一扫接口

CSS3打造的10种创意动画菜单效果

来源：互联网 发布：js调用微信扫一扫接口 编辑：程序博客网 时间：2024/06/05 13:21
 CSS3新增添了实现动画效果的新功能，通过本文，你可以对这些新功能有个初步了解。本文将为大家带来一些充满创意的菜单悬停效果。它由图标，主标题，副标题等简单的元素构成，通过CSS3最新的过渡（transition）和动画（animation）两个功能实现鼠标悬停时的动画效果

演示下载

示例中所用的图标实际上是一种网络符号字体，包含在@font-face。这种字体是有Just Be Nice工作室所开发。

标记

菜单的HTML架构是一个无序列表，其中的每个选项都是由图标跨度和内容层组成的链接元素。内容层包含主标题和副标题：

  1. <ul class="ca-menu"> 
  2.     <li> 
  3.         <a href="#"> 
  4.             <span class="ca-icon">A</span> 
  5.             <div class="ca-content"> 
  6.                 <h2 class="ca-main">Exceptional Service</h2> 
  7.                 <h3 class="ca-sub">Personalized to your needs</h3> 
  8.             </div> 
  9.         </a> 
  10.     </li> 
  11.     ...  
  12. </ul> 

因为我们使用符号字体作为图标，我们为图标写上字母。

CSS

所有示例中的共有的样式都包含符号字体：

  1. @font-face {  
  2.     font-family: 'WebSymbolsRegular';  
  3.     src: url('websymbols/websymbols-regular-webfont.eot');  
  4.     src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),  
  5.          url('websymbols/websymbols-regular-webfont.woff') format('woff'),  
  6.          url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),  
  7.          url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');  
  8.     font-weight: normal;  
  9.     font-style: normal;  
  10. } 

文件的路径是相对于CSS文件而言的，因此，它们应放在css目录下的websymbols中（css/websymbols/）。

用图标作为字体的好处在于，可以为它运用漂亮的效果，比如说，文本投影（text shadow）。还可以根据需求按比例放大或缩小。

每个示例中的无序列表样式都相同。我们只是让它的宽度适合，方便其居于屏幕中央：

  1. .ca-menu{  
  2.     padding: 0;  
  3.     margin: 20px auto;  
  4.     width: 500px;  
  5. } 

在下面的示例中，会向大家展示元素的样式是如何为最终效果服务的。

在第1个示例中，我们会研究所有元素的样式，其它示例，我们侧重对代码进行改写。

注意：以下示例中，我不会写任何浏览器特定的前缀，但是你会在示例文件夹中看到所有必要前缀。


CSS3打造的10种创意动画菜单效果-1

在示例1的堆叠菜单中，可实现各个元素的大小，以及各个菜单项的背景颜色的改变。

为列表项定义样式：

  1. .ca-menu li{  
  2.     width: 500px;  
  3.     height: 100px;  
  4.     overflow: hidden;  
  5.     display: block;  
  6.     background: #fff;  
  7.     -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
  8.     -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
  9.     box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
  10.     margin-bottom: 4px;  
  11.     border-left: 10px solid #000;  
  12.     -webkit-transition: all 300ms ease-in-out;  
  13.     -moz-transition: all 300ms ease-in-out;  
  14.     -o-transition: all 300ms ease-in-out;  
  15.     -ms-transition: all 300ms ease-in-out;  
  16.     transition: all 300ms ease-in-out;  
  17. } 

过渡效果适合所有属性，因为鼠标移上时，边框颜色和背景色都会发生相应的变化。

链接元素样式见下：

  1. .ca-menu li a{  
  2.     text-align: left;  
  3.     display: block;  
  4.     width: 100%;  
  5.     height: 100%;  
  6.     color: #333;  
  7.     position:relative;  
  8. } 

为单个元素定义样式。

图标位于左边，它的跨度样式见下：

  1. .ca-icon{  
  2.     font-family: 'WebSymbolsRegular', cursive;  
  3.     font-size: 20px;  
  4.     text-shadow: 0px 0px 1px #333;  
  5.     line-height: 90px;  
  6.     position: absolute;  
  7.     width: 90px;  
  8.     left: 20px;  
  9.     text-align: center;  
  10.     -webkit-transition: all 300ms linear;  
  11.     -moz-transition: all 300ms linear;  
  12.     -o-transition: all 300ms linear;  
  13.     -ms-transition: all 300ms linear;  
  14.     transition: all 300ms linear;  
  15. } 

如你所见，我们使用了网络符号做字体。每个字母都是一个图标。

内容元素的封装见下面的样式：

  1. .ca-content{  
  2.     position: absolute;  
  3.     left: 120px;  
  4.     width: 370px;  
  5.     height: 60px;  
  6.     top: 20px;  
  7. } 

在代码中修改内容元素的字体值，为transition添加linear属性实现匀速过渡效果：

  1. .ca-main{  
  2.     font-size: 30px;  
  3.     -webkit-transition: all 300ms linear;  
  4.     -moz-transition: all 300ms linear;  
  5.     -o-transition: all 300ms linear;  
  6.     -ms-transition: all 300ms linear;  
  7.     transition: all 300ms linear;  
  8. }  
  9. .ca-sub{  
  10.     font-size: 14px;  
  11.     color: #666;  
  12.     -webkit-transition: all 300ms linear;  
  13.     -moz-transition: all 300ms linear;  
  14.     -o-transition: all 300ms linear;  
  15.     -ms-transition: all 300ms linear;  
  16.     transition: all 300ms linear;   
  17. } 

现在，我们进行最有趣的部分，当鼠标悬停在列表元素上时，我们会看到字体大小和颜色的变化：

  1. .ca-menu li:hover{  
  2.     border-color: #fff004;  
  3.     background: #000;  
  4. }  
  5. .ca-menu li:hover .ca-icon{  
  6.     color: #fff004;  
  7.     text-shadow: 0px 0px 1px #fff004;  
  8.     font-size: 50px;  
  9. }  
  10. .ca-menu li:hover .ca-main{  
  11.     color: #fff004;  
  12.     font-size: 14px;  
  13. }  
  14. .ca-menu li:hover .ca-sub{  
  15.     color: #fff;  
  16.     font-size: 30px;  
  17. } 

由于我们为每一个元素定义了过渡效果，切换时就会看到动画效果。

CSS3打造的10种创意动画菜单效果-2

在示例2中，我们让内容元素分别从上和下两个方向实现的动画效果。

  1. .ca-menu li:hover{  
  2.     background: #e1f0fa;  
  3. }  
  4. .ca-menu li:hover .ca-icon{  
  5.     font-size: 40px;  
  6.     color: #259add;  
  7.     opacity: 0.8;  
  8.     text-shadow: 0px 0px 13px #fff;  
  9. }  
  10. .ca-menu li:hover .ca-main{  
  11.     opacity: 1;  
  12.     color:#2676ac;  
  13.     -webkit-animation: moveFromTop 300ms ease-in-out;  
  14.     -moz-animation: moveFromTop 300ms ease-in-out;  
  15.     -ms-animation: moveFromTop 300ms ease-in-out;  
  16. }  
  17. .ca-menu li:hover .ca-sub{  
  18.     opacity: 1;  
  19.     -webkit-animation: moveFromBottom 300ms ease-in-out;  
  20.     -moz-animation: moveFromBottom 300ms ease-in-out;  
  21.     -ms-animation: moveFromBottom 300ms ease-in-out;  
  22. } 

首先定义两种动画效果。第一种将各个元素沿着Y轴下移200%（即translateY的值为200%）。另外，它的不透明度设为0（即opacity 的值设为0）。鼠标移开时，即回到原始效果，在下面代码所示的”to“后面将 translateY的值设为0%即可。

  1. @-webkit-keyframes moveFromBottom {  
  2.     from {  
  3.         opacity: 0;  
  4.         -webkit-transform: translateY(200%);  
  5.     }  
  6.     to {  
  7.         opacity: 1;  
  8.         -webkit-transform: translateY(0%);  
  9.     }  
  10. } 

第二种动画效果实现元素从上到下滑入，遵循同样的规则，只是相应的数要进行修改：

  1. @-webkit-keyframes moveFromTop {  
  2.     from {  
  3.         opacity: 0;  
  4.         -webkit-transform: translateY(-200%);  
  5.     }  
  6.     to {  
  7.         opacity: 1;  
  8.         -webkit-transform: translateY(0%);  
  9.     }  
  10. }

CSS3打造的10种创意动画菜单效果-3

CSS3打造创意动画菜单效果

在示例3中，当鼠标悬停时，会看到背景和文本颜色发生改变，并同时伴有图标旋转和放大效果。通过改变transform属性和修改图标的字体大小的值，即可实现以上效果：

  1. .ca-menu li:hover{  
  2.     background-color: #000;  
  3. }  
  4. .ca-menu li:hover .ca-icon{  
  5.     color: #f900b0;  
  6.     font-size: 120px;  
  7.     opacity: 0.2;  
  8.     left: -20px;  
  9.     -webkit-transform: rotate(20deg);  
  10.     -moz-transform: rotate(20deg);  
  11.     -ms-transform: rotate(20deg);  
  12.     transform: rotate(20deg);  
  13. }  
  14. .ca-menu li:hover .ca-main{  
  15.     color: #f900b0;  
  16.     opacity: 0.8;  
  17. }  
  18. .ca-menu li:hover .ca-sub{  
  19.     color: #fff;  
  20.     opacity: 0.8;  
  21. } 

 CSS3打造的10种创意动画菜单效果-4

CSS3打造创意动画菜单效果

示例4到示例8都采用了不同布局的菜单。各个菜单项相邻排列，呈浮动状。

  1. .ca-menu li{  
  2.     width: 200px;  
  3.     height: 300px;  
  4.     overflow: hidden;  
  5.     position: relative;  
  6.     float: left;  
  7.     border: 5px solid #fff;  
  8.     background: #e2f0ff;  
  9.     -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
  10.     -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
  11.     box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
  12.     margin-right: 4px;  
  13.     -webkit-transition: all 300ms linear;  
  14.     -moz-transition: all 300ms linear;  
  15.     -o-transition: all 300ms linear;  
  16.     -ms-transition: all 300ms linear;  
  17.     transition: all 300ms linear;  
  18. }  
  19. .ca-menu li:last-child{  
  20.     margin-right: 0px;  
  21. } 

图标的位置在菜单项的中上位置：

  1. .ca-icon{  
  2.     font-family: 'WebSymbolsRegular', cursive;  
  3.     color: #c5e4f4;  
  4.     font-size: 90px;  
  5.     text-shadow: 1px 0px 1px rgba(255,255,255,0.7);  
  6.     line-height: 150px;  
  7.     position: absolute;  
  8.     width: 100%;  
  9.     height: 50%;  
  10.     left: 0px;  
  11.     top: 0px;  
  12.     text-align: center;  
  13.     -webkit-transition: all 200ms linear;  
  14.     -moz-transition: all 200ms linear;  
  15.     -o-transition: all 200ms linear;  
  16.     -ms-transition: all 200ms linear;  
  17.     transition: all 200ms linear;  
  18. } 

内容封装放在菜单项较底部位置：

  1. .ca-content{  
  2.     position: absolute;  
  3.     left: 0px;  
  4.     width: 100%;  
  5.     height: 50%;  
  6.     top: 50%;  
  7. } 

主标题和副标题的样式设置见下：

  1. .ca-main{  
  2.     font-size: 30px;  
  3.     color: #005382;  
  4.     opacity: 0.8;  
  5.     text-align: center;  
  6.     -webkit-transition: all 200ms linear;  
  7.     -moz-transition: all 200ms linear;  
  8.     -o-transition: all 200ms linear;  
  9.     -ms-transition: all 200ms linear;  
  10.     transition: all 200ms linear;  
  11. }  
  12. .ca-sub{  
  13.     text-align:center;  
  14.     font-size: 14px;  
  15.     color: #666;  
  16.     line-height: 40px;  
  17.     opacity: 0.8;  
  18.     -webkit-transition: all 200ms linear;  
  19.     -moz-transition: all 200ms linear;  
  20.     -o-transition: all 200ms linear;  
  21.     -ms-transition: all 200ms linear;  
  22.     transition: all 200ms linear;  
  23. } 

鼠标悬停时，我们实现图标模糊，并从上向下滑入，同时背景颜色改变，文本内容从上、下分别滑入的效果。

  1. .ca-menu li:hover{  
  2.     background-color: #fff;  
  3. }  
  4. .ca-menu li:hover .ca-icon{  
  5.     text-shadow: 0px 0px 20px #c5e4f4;  
  6.     color: transparent;  
  7.     -webkit-animation: moveFromTop 400ms ease;  
  8.     -moz-animation: moveFromTop 400ms ease;  
  9.     -ms-animation: moveFromTop 400ms ease;  
  10. }  
  11. .ca-menu li:hover .ca-main{  
  12.     color: #000;  
  13.     -webkit-animation: moveFromTop 300ms ease;  
  14.     -moz-animation: moveFromTop 300ms ease;  
  15.     -ms-animation: moveFromTop 300ms ease;  
  16. }  
  17. .ca-menu li:hover .ca-sub{  
  18.     color: #000;  
  19.     -webkit-animation: moveFromBottom 500ms ease;  
  20.     -moz-animation: moveFromBottom 500ms ease;  
  21.     -ms-animation: moveFromBottom 500ms ease;  
  22. } 

把图标的颜色设为透明（transparent），并按照下图为文本投影（text-shadow）属性赋值（产生模糊），这样图标的模糊效果也就产生了。此处的动画效果与前面几个示例相同，只不过实现从上到下的动画效果的translate值不同罢了。这里的 translateY的值设为-300%。

CSS3打造的10种创意动画菜单效果-5

在本示例中，我们可实现：图标自左向右，第一排文字自右向左，第二排文字自下向上同时滑动出现。

  1. .ca-menu li:hover{  
  2.     background:#fff;  
  3. }  
  4. .ca-menu li:hover .ca-icon{  
  5.     color: #afa379;  
  6.     font-size: 90px;  
  7.     opacity: 0.1;  
  8.     -webkit-animation: moveFromLeft 400ms ease;  
  9.     -moz-animation: moveFromLeft 400ms ease;  
  10.     -ms-animation: moveFromLeft 400ms ease;  
  11. }  
  12. .ca-menu li:hover .ca-main{  
  13.     color: #afa379;  
  14.     -webkit-animation: moveFromRight 300ms ease;  
  15.     -moz-animation: moveFromRight 300ms ease;  
  16.     -ms-animation: moveFromRight 300ms ease;  
  17. }  
  18. .ca-menu li:hover .ca-sub{  
  19.     color: #000;  
  20.     -webkit-animation: moveFromBottom 500ms ease;  
  21.     -moz-animation: moveFromBottom 500ms ease;  
  22.     -ms-animation: moveFromBottom 500ms ease;  
  23. } 

从下往上（moveFromBottom）的动画效果前面已经提过。接下来看看从左向右（moveFromLeft）的动画效果，通过将translateX的值设为-100%，实现各个元素从左向右的移动效果；translateX的值设为0%则表示，当鼠标离开时，就回到原始效果。

  1. @-webkit-keyframes moveFromLeft{  
  2.     from {  
  3.         -webkit-transform: translateX(-100%);  
  4.     }  
  5.     to {  
  6.         -webkit-transform: translateX(0%);  
  7.     }  
  8. } 

将translateX的值设为100%即可实现从右向左（moveFromRight ）的动画效果。

CSS3打造的10种创意动画菜单效果-6

本示例实现的效果：主标题从左滑入，同时伴有旋转效果：

  1. .ca-menu li:hover{  
  2.     background-color: #000;  
  3. }  
  4. .ca-menu li:hover .ca-icon{  
  5.     color: #fff;  
  6.     font-size: 90px;  
  7. }  
  8. .ca-menu li:hover .ca-main{  
  9.     color: #00ccff;  
  10.     -webkit-animation: moveFromLeftRotate 300ms ease;  
  11.     -moz-animation: moveFromLeftRotate 300ms ease;  
  12.     -ms-animation: moveFromLeftRotate 300ms ease;  
  13. }  
  14. .ca-menu li:hover .ca-sub{  
  15.     color: #fff;  
  16.     -webkit-animation: moveFromBottom 500ms ease;  
  17.     -moz-animation: moveFromBottom 500ms ease;  
  18.     -ms-animation: moveFromBottom 500ms ease;  
  19. } 

该效果（moveFromLeftRotate）的实现代码：

  1. @-webkit-keyframes moveFromLeftRotate{  
  2.     from {  
  3.         -webkit-transform: translateX(-100%) rotate(-90deg);  
  4.     }  
  5.     to {  
  6.         -webkit-transform: translateX(0%) rotate(0deg);  
  7.     }  
  8. }

CSS3打造的10种创意动画菜单效果-7

在本示例中，我们将副标题放置在最底部。

  1. .ca-sub{  
  2.     text-align:center;  
  3.     font-size: 14px;  
  4.     color: #666;  
  5.     line-height: 40px;  
  6.     opacity: 0.8;  
  7.     position: absolute;  
  8.     bottom: 0;  
  9.     width: 100%;   
  10.     -webkit-transition: all 200ms linear;  
  11.     -moz-transition: all 200ms linear;  
  12.     -o-transition: all 200ms linear;  
  13.     -ms-transition: all 200ms linear;  
  14.     transition: all 200ms linear;  
  15. } 

我们希望副标题从下往上滑入，同时改变背景色的动画效果。

  1. .ca-menu li:hover{  
  2.     background-color: #000;  
  3. }  
  4. .ca-menu li:hover .ca-icon{  
  5.     color: #ff2020;  
  6.     -webkit-animation: moveFromBottom 300ms ease;  
  7.     -moz-animation: moveFromBottom 300ms ease;  
  8.     -ms-animation: moveFromBottom 300ms ease;  
  9. }  
  10. .ca-menu li:hover .ca-main{  
  11.     color: #ff2020;  
  12.     -webkit-animation: smallToBig 300ms ease;  
  13.     -moz-animation: smallToBig 300ms ease;  
  14.     -ms-animation: smallToBig 300ms ease;  
  15. }  
  16. .ca-menu li:hover .ca-sub{  
  17.     color: #000;  
  18.     background-color: #ff2020;  
  19.     -webkit-animation: moveFromBottom 500ms ease;  
  20.     -moz-animation: moveFromBottom 500ms ease;  
  21.     -ms-animation: moveFromBottom 500ms ease;  
  22. } 

图标从下往上滑入，同时，主标题则由小变大。

  1. @-webkit-keyframes smallToBig{  
  2.     from {  
  3.         -webkit-transform: scale(0.1);  
  4.     }  
  5.     to {  
  6.         -webkit-transform: scale(1);  
  7.     }  
  8. } 

由小变大（ smallToBig ）的动画效果展示了如何使用CSS3的变换处理（transform）中的scale属性。

CSS3打造的10种创意动画菜单效果-8

本示例要实现鼠标悬停时，列表项所有内容都放大的效果。

菜单中的心形图标还有一个特殊的切换效果。当鼠标悬停时，通过运用由小变大和不断循环交替的特殊方式来实现可爱的心跳动画效果。

  1. .ca-menu li:hover{  
  2.     background-color: #000;  
  3.     z-index:999;  
  4.     -webkit-transform: scale(1.1);    
  5.     -moz-transform: scale(1.1);    
  6.     -ms-transform: scale(1.1);     
  7.     -o-transform: scale(1.1);     
  8.     transform: scale(1.1);    
  9. }  
  10. .ca-menu li:hover .ca-icon{  
  11.     color: #ccff00;  
  12.     font-size: 90px;  
  13.     opacity:0.3;  
  14. }  
  15. .ca-menu li:hover .ca-icon#heart{  
  16.     -webkit-animation: smallToBig 900ms alternate infinite ease;  
  17.     -moz-animation: smallToBig 900ms alternate infinite ease;  
  18.     -ms-animation: smallToBig 900ms alternate infinite ease;  
  19. }  
  20. .ca-menu li:hover .ca-main{  
  21.     color: #ccff00;  
  22.     -webkit-animation: smallToBig 300ms ease;  
  23.     -moz-animation: smallToBig 300ms ease;  
  24.     -ms-animation: smallToBig 300ms ease;  
  25. }  
  26. .ca-menu li:hover .ca-sub{  
  27.     color: #ccff00;  
  28.     -webkit-animation: moveFromBottom 500ms ease;  
  29.     -moz-animation: moveFromBottom 500ms ease;  
  30.     -ms-animation: moveFromBottom 500ms ease;  
  31. }

CSS3打造的10种创意动画菜单效果-9

示例9和示例10都是环形的菜单结构，所以我们会对列表中的元素更换样式。

  1. .ca-menu li{  
  2.     width: 230px;  
  3.     height: 230px;  
  4.     border: 10px solid #f6f6f6;  
  5.     overflow: hidden;  
  6.     position: relative;  
  7.     float:left;  
  8.     background: #fff;  
  9.     margin-right: 4px;  
  10.     -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
  11.     -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
  12.     box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
  13.     -webkit-border-radius: 125px;  
  14.     -moz-border-radius: 125px;  
  15.     border-radius: 125px;  
  16.     -webkit-transition: all 400ms linear;  
  17.     -moz-transition: all 400ms linear;  
  18.     -o-transition: all 400ms linear;  
  19.     -ms-transition: all 400ms linear;  
  20.     transition: all 400ms linear;  
  21. } 

为了创建环形，我们要把圆角的值改为元素的外宽度/高度的一半。 将所有元素全部放在列表项中，并居中。下面我们实现鼠标悬停时的效果。

  1. .ca-menu li:hover{  
  2.     background: #f7f7f7;  
  3.     border-color: #fff;  
  4.     -webkit-transform: rotate(360deg);  
  5.     -moz-transform: rotate(360deg);  
  6.     -o-transform: rotate(360deg);  
  7.     -ms-transform: rotate(360deg);  
  8.     transform: rotate(360deg);  
  9. }  
  10. .ca-menu li:hover .ca-icon{  
  11.     color: #555;  
  12.     font-size: 60px;  
  13. }  
  14. .ca-menu li:hover .ca-main{  
  15.     display: none;  
  16. }  
  17. .ca-menu li:hover .ca-sub{  
  18.     opacity: 0.8;  
  19. } 

本例所实现的效果：菜单项旋转360°，主标题消失，副标题出现（不透明度开始的值为0）。

CSS3打造的10种创意动画菜单效果-10

最后一个例子中，每个菜单项的左外边距都是48像素，且相互重叠。当鼠标移上去时，环形菜单项整体变大，菜单的堆叠顺序也上移（z-index是决定元素的堆叠顺序）。最终就呈现出菜单项上浮的效果。

  1. .ca-menu li:hover{  
  2.     border-color: #333;  
  3.     z-index: 999;  
  4.     -webkit-transform: scale(1.1);  
  5.     -moz-transform: scale(1.1);  
  6.     -o-transform: scale(1.1);  
  7.     -ms-transform: scale(1.1);  
  8.     transform: scale(1.1);  
  9. }  
  10. .ca-menu li:hover .ca-icon{  
  11.     color: #000;  
  12.     font-size: 60px;  
  13.     text-shadow: 0px 0px 1px #000;  
  14.     -webkit-animation: moveFromBottom 300ms ease;  
  15.     -moz-animation: moveFromBottom 300ms ease;  
  16.     -ms-animation: moveFromBottom 300ms ease;  
  17. }  
  18. .ca-menu li:hover .ca-main{  
  19.     color: #000;  
  20.     -webkit-animation: moveFromBottom 500ms ease;  
  21.     -moz-animation: moveFromBottom 500ms ease;  
  22.     -ms-animation: moveFromBottom 500ms ease;  
  23. } 

我希望大家能从这些小实验上找到灵感和创意。

请注意，所有这些动画和过渡效果都只能在诸如Google Chrome，苹果的Safari，Mozilla Firefox等现代浏览器中生效。（jaysming）

摘自 http://www.okajax.com/a/201204/css3_menu_6.html

js调用微信扫一扫接口 js调用微信扫一扫接口
原创粉丝点击
热门IT博客
html webgl 书籍 知乎html webgl 书籍 知乎
遗传算法 图形分割遗传算法 图形分割
淘宝我要开店
linux访问https地址
招聘简章制作软件
淘宝特卖女童三件套
淘宝双十一销售数据
上帝之城奥古斯丁知乎
hifi软件下载
阿里影业 知乎
淘宝充值平台退款
电气计算软件
大数据飞轮效应
淘宝登录界面一直转圈
数据 配招 分析
虚拟交易平台网站源码
sass for mac
python数据挖掘案例
工业设计软件有哪些
淘宝上买的gba模拟器
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 吃什么可以增肌 瘦人增肌吃什么好 如何增肌增肥 增重增肌吃什么 增肌减肥餐 吃什么增肌减脂 瘦人增肌健身 快速增肌增重 俯卧撑增肌 无氧运动增肌 先减肥再增肌 健身增肌方法 增肌的饮食 怎么增肌减脂 瘦身增肌饮食 康宝莱增肌 增肌训练饮食 减肥增肌怎么吃 怎样增肌又减脂 增肌蛋白质粉哪个牌子好 增重增肌饮食计划 增肌健身饮食 瘦子健身增肥计划 瘦人健身前后变化照片 瘦子健身 健身增重 快速增重 增重食谱 瘦人长胖小妙方 如何增重 胖不起来 我想长胖 怎样增重 增重 吃什么比较容易长胖 吃什么才可以长胖 瘦人怎么才能吃胖 瘦人吃不胖的原因 吃什么变胖 吃不胖是怎么回事 吃什么都不胖

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里