<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    51rgb-css3动画12-CSS3旋转图标特效.

                    分享 :

                    网盘下载链接:

                    提取密码: u4qi
                    复制提取密码
                    51RGB在线教育,WEB前端开发直播体验课,CSS3旋转图标特效.!源码下载
                    • 详情
                      文件来源

                      官方发布

                      更新日期

                      2018-01-26

                      适用平台

                      All

                      系统位数

                      ALL

                      文件格式

                      zip

                      文件语言

                      中文

                      文件授权

                      免费

                      下载次数

                      454次

                      源码,可以直接复制使用!

                      <!DOCTYPE html>
                      <html>
                      <head>
                      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
                      <title>CSS3鼠标滑过渐变颜色旋转图标特效</title>
                      <style type="text/css">
                      *{margin: 0;padding: 0;list-style: none;}
                      #order_nav {  position: relative; background: #fff; position: relative; }
                      #order_nav .list { width: 936px; margin: 0 auto; }
                      #order_nav .list li { width: 116px; height: 116px; float: left; border-radius: 50%; position: relative; margin: 0 20px 80px 20px; position: relative; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; transition: .4s all; }
                      #order_nav .list li a { display: block; width: 100%; height: 100%; }
                      #order_nav .list li .cycle_mark { position: absolute; left: 0; top: 0; z-index: 2; }
                      #order_nav .list li .ico { width: 102px; height: 102px; position: absolute; left: 7px; top: 7px; background: #424242 url(http://demo.lanrenzhijia.com/2015/css1125/images/rotate.png); border-radius: 50%; z-index: 1; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; transition: .4s all; }
                      #order_nav .list li ._1 { background-position: 0px 0px; }
                      #order_nav .list li ._2 { background-position: -102px 0px; }
                      #order_nav .list li ._3 { background-position: -204px 0px; }
                      #order_nav .list li ._4 { background-position: -306px 0px; }
                      #order_nav .list li ._5 { background-position: -408px 0px; }
                      #order_nav .list li ._6 { background-position: -510px 0px; }
                      #order_nav .list li p { width: 100%; position: absolute; left: 0; top: 126px; text-align: center; }
                      #order_nav .list li p span { font-size: 16px; color: #414141; display: block; font-weight: bold; }
                      #order_nav .list li p strong { font-size: 12px; color: #f00; display: block; }
                      #order_nav .list li.on { background: rgba(0,0,0,.5); }
                      #order_nav .list li.on .ico { background-color: #0ff; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
                      </style>
                      </head>
                      <body>
                      <div id="order_nav">
                          <ul class="list not_ie">
                            <li>
                              <div class="ico _1"><a href="#"></a></div>
                              <p><span>网站建设</span></p>
                            </li>
                            <li>
                              <div class="ico _2"><a href="#"></a></div>
                              <p><span>网站设计</span></p>
                            </li>
                            <li>
                              <div class="ico _3"><a href="#"></a></div>
                              <p><span>网站策划</span></p>
                            </li>
                            <li>
                              <div class="ico _4"><a href="#"></a></div>
                              <p><span>SEO优化</span></p>
                            </li>
                            <li>
                              <div class="ico _5"><a href="#"></a></div>
                              <p><span>WAP/APP</span></p>
                            </li>
                            <li>
                              <div class="ico _6"><a href="#"></a></div>
                              <p><span>网站营销</span></p>
                            </li>
                          </ul>
                      </div>
                      <script>
                      var orderNav = document.getElementById("order_nav");
                      var lis = orderNav.getElementsByTagName("li");
                      for(var i =0;i<lis.length;i++){
                         lis[i].onmouseover = function(){
                           this.className = "on";
                         };
                         lis[i].onmouseout = function(){
                           this.className = "";
                         }
                      }
                      </script>
                      </body>
                      </html>
                      
                    • 使用说明

                      本节课视频资源:

                      课程在线回放地址:http://www.gonooa.com/video/page-29/279.html

                      关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

                    • 相关下载
                    北京赛车玩法和赔率|官网_首页