• 思缘论坛首页
  • 论坛搜索
  • 下载记录
  • 每日签到
  • 设计软件,PS下载
  • VIP素材区预览
  • VIP素材区下载
  • 缘分币充值
发新话题
打印

[CSS教程] CSS3实例教程:CD光盘出仓动画效果

CSS3实例教程:CD光盘出仓动画效果

设计旋转出仓的光盘动画效果,这个实例也是在成林著作的 《CSS3实战》这本书上面看到,自己按书上面的代码做的练习作品,附代码供大家学习参考下;也略说下这本书大部份的实例都还是值得学习研究下的,也相信好多朋友都早已看过了,只是作者并没有在网上附出原书上面的代码供对比参考。

另外原著也有个别错误出,因无法与作者的对比,或许效果有些出入的贴出代码供大家学习参考下,兼容webkit内核与Gecko内核的浏览器,另外恳请管理员是否可能把代码贴一个链接地址出来,也算一素材

以下是样式代码部分:
复制内容到剪贴板
代码:
<style type=text/css>
/*<![CDATA[*/
        *{ margin:0; padding:0;}
        body{ background:#fff url(images/web_bg_9.jpg) no-repeat center top; padding:10px;}
        ul,li{list-style:none; list-style-type:none;}
        ul.tunes{ margin-left:-20px;}/* 设计外框向左移动 */
        /* 定义每个光盘项样式 */
        ul.tunes li{ position:relative; width:200px; height:190px; float:left; margin-left:20px; }
        ul.tunes li div.album{ margin:0 0 48px 0; display:inline; width:200px; height:120px; position:absolute; text-decoration:none;
               -webkit-transition:all .15s linear;/*线性动画*/
               -moz-transition:all .15s linear;
               -o-transition:all .15s linear;
               color:#333;
               left:0px;
               top:0px;
        }
        ul.tunes img{ width:120px; position:relative; z-index: 30; float: left;
               -webkit-box-shadow:0 3px 6px rgba(0, 0, 0, .5);/*音乐盒阴影*/
               -moz-box-shadow:0 3px 6px rgba(0, 0, 0, .5);
               box-shadow:0 3px 6px rgba(0, 0, 0, .5);
               border-radius:2px;
               -webkit-border-radius:2px;
               -moz-border-radius:2px;/*音乐盒圆角*/
        }
        ul.tunes li div.album div{
               display:block; opacity:.95; filter:alpha(opacity=90); text-align:center;
               -webkit-transition:all .25s linear;/*线性动画 0.25秒 针对所包含的所有元素*/
               -moz-transition-property:all;
               -moz-transition-duration:.25s;
               -moz-transition-timing-function:linear;
               -o-transition-property:all;
               -o-transition-duration:.25s;
               -o-transition-timing-function:linear;
               clear:left;
               width:120px;
        }
        ul.tunes li div.album div h5{
               text-align:center;
        }
        /*鼠标经过外框时不透明*/
        ul.tunes li div.album:hover div{ opacity:1; filter:alpha(opacity=100);}
        /* 光驱样式 */
        ul.tunes li div.album span.vinyl{width:116px; height:116px; z-index: 1; display: block;
               -webkit-transition:all .25s linear;/* 线性动画 */
               -moz-transition-property:all;
               -moz-transition-duration:.25s;
               -moz-transition-timing-function:linear;
               -o-transition-property:all;
               -o-transition-duration:.25s;
               -o-transition-timing-function:linear;
               position:absolute;
               top:2px;
               left:2px;
               margin-left:16px;
        }
        /* 光驱内框样式 */
        
        ul.tunes li div.album span.vinyl div{
               position:absolute;
               top:2px;
               left:2px;
               display:block;
               z-index:10;
               width:112px;
               height:112px;
               -webkit-border-radius:59px;
               -moz-border-radius:59px;
               border-radius:59px;
               -webkit-box-shadow:0 0 6px rgba(0, 0, 0, .5);
               -moz-box-shadow:0 0 6px rgba(0, 0, 0, .5);
            box-shadow:0 0 6px rgba(0, 0, 0, .5);
            -webkit-transition:all .25s linear;
            -moz-transition-property:all;
               -moz-transition-duration:.25s;
               -moz-transition-timing-function:linear;
               -o-transition-property:all;
               -o-transition-duration:.25s;
               -o-transition-timing-function:linear;
            overflow:hidden;
            border:solid 1px black;
            /*设置光驱效果,通过直线渐变和径向渐变设计光泽效果*/
            /* webkit内核 */
            background:
            -webkit-gradient(linear,left top, left bottom,from(transparent), color-stop(0.1, transparent), color-stop(0.5, rgba(255, 255, 255, 0.25)), color-stop(0.9, transparent), to(transparent)), -webkit-gradient(radial, 56 56, 10, 56 56, 114, from(transparent), color-stop(0.01,transparent), color-stop(0.021, rgba(0, 0, 0, 1)), color-stop(0.09, rgba(0, 0, 0, 1)), color-stop(0.1, rgba(28, 28, 28, 1)), to(rgba(28, 28, 28, 1)));
           /* Gecko内核 */
    background:-moz-linear-gradient(transparent,transparent 10%,rgba(255, 255, 255, 0.25) 50%,transparent 90%,transparent 100%),-moz-radial-gradient(circle farthest-side,transparent 20%,#000000 23%,rgba(37, 37, 37, 1) 36%,rgba(0, 0, 0, 1) 37%,rgba(28, 28, 28, 1) 100%,rgba(28, 28, 28, 1));
            
            
            border-top:1px solid rgba(255, 255, 255, .25);
        }
       /* 鼠标经过时,设计出仓动画效果 */
       ul.tunes li div.album:hover span.vinyl{ -webkit-transform:translateX(60px); -moz-transform:translateX(60px);}
       /* 在出仓过程中旋转内框,营造立体动画效果 */
       ul.tunes li div.album:hover span.vinyl div{
             -webkit-transform:rotate(120deg);
             -moz-transform:rotate(120deg);
             border-top:0;
             border-left:1px solid rgba(255, 255, 255, .25);
       }
       ul.tunes li span.gloss{/* 设计掩饰物 */
          display:block;
          position:absolute; top:0; left:0; width:120px; height:120px; background:url(images/sheen3.png) no-repeat;
          z-index: 100;
       }
       ul.tunes li div.album ul.actions{ /* 设计音乐盒被激活时的样式 */
           display:block;
           position:absolute;
           width: 60px;
           border-radius:3px;
           -webkit-border-radius:3px;
           -moz-border-radius:3px;
              left:70px;
              top:0;
              height:114px;
              z-index:20;
              -webkit-transition:all 0.25s linear;
               -moz-transition-property:all;
               -moz-transition-duration:.25s;
               -moz-transition-timing-function:linear;
               -o-transition-property:all;
               -o-transition-duration:.25s;
               -o-transition-timing-function:linear;
       }
       /* 激活时出仓动画 */
       ul.tunes li div.album:hover ul.actions{
              -webkit-transform:translateX(60px);
              -moz-transform:translateX(60px);
       }
       /* 设置激活时光盘上按钮样式 */
       ul.tunes li div.album ul.actions li{
              display:block;
              position:absolute;
              height:20px;
              width:20px;
              left:10px;
              top:22px;
              /*设计凹凸效果*/
              background: -webkit-gradient(linear, left top, left bottom, from(black),to(#333));
              background:-moz-linear-gradient(left top, left bottom, from(black),to(#333));
              border-radius:10px;
              -webkit-border-radius:10px;
              -moz-border-radius:10px;
              -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .15);
              -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .15);
              box-shadow:0 1px 0 rgba(255, 255, 255, .15);
       }
       ul.tunes li div.album ul.actions li:hover{
              background:-webkit-gradient(linear, left top, left bottom, from(#333), to(black));
              background:-moz-linear-gradient(left top, left bottom, from(#333), to(black));
       }
       /* 被激活时改变光盘上按钮的凹凸效果 */
       ul.tunes li div.album ul.actions li.info{
              top:48px;
              left:19px;
       }
       ul.tunes li div.album ul.actions li a{
              display:block;
              width:20px;
              height:20px;
       }
       ul.tunes li div.album ul.actions li.play-pause a{
              background:url(images/play-button.png) no-repeat center center;/* 播放按钮 */
             
       }
       ul.tunes li div.album ul.actions li.info a{
              background:url(images/info.png) no-repeat center center;/* 信息按钮 */
       }
       ul.tunes li{ text-shadow:0 2px 3px rgba(0, 0, 0, .75);}
       ul.tunes h5{
              padding-top:8px;
              color:#fff;
       }
       ul.tunes small{
              color:#fff;
              opacity:0.75;
              filter:alpha(opacity=75);
       }
    /*]]>*/
    </style>
以下是HTML结构部分:
复制内容到剪贴板
代码:
<body>
<ul class=tunes>
        <li>
                <div class=album>
                        <a href=#><img src=images/Steven.png alt= /></a>
                        <span class=vinyl>
                        <div></div>
                        </span>
                        <ul class=actions>
                                <li class=play-pause><a href=#></a></li>
                                <li class=info><a href=#></a></li>
                        </ul>
                        <div>
                                <h5>Michael Jackson</h5>
                                <small>Thriller</small>
                        </div>
                        <span class=gloss></span>
                </div>
        </li>
        <li>
                <div class=album>
                        <a href=#><img src=images/Magnolia.png alt= /></a>
                        <span class=vinyl>
                        <div></div>
                        </span>
                        <ul class=actions>
                                <li class=play-pause><a href=#></a></li>
                                <li class=info><a href=#></a></li>
                        </ul>
                        <div>
                                <h5>Michael Jackson</h5>
                                <small>Bad</small>
                        </div>
                        <span class=gloss></span>
                </div>
        </li>
        <li>
                <div class=album>
                        <a href=#><img src=images/Flying-house.png alt= /></a>
                        <span class=vinyl>
                        <div></div>
                        </span>
                        <ul class=actions>
                                <li class=play-pause><a href=#></a></li>
                                <li class=info><a href=#></a></li>
                        </ul>
                        <div>
                                <h5>Michael Jackson</h5>
                                <small>Off the Wall</small>
                        </div>
                        <span class=gloss></span>
                </div>
        </li>
        <li>
                <div class=album>
                        <a href=#><img src=images/Soul-Train.png alt= /></a>
                        <span class=vinyl>
                        <div></div>
                        </span>
                        <ul class=actions>
                                <li class=play-pause><a href=#></a></li>
                                <li class=info><a href=#></a></li>
                        </ul>
                        <div>
                                <h5>Jay-Z</h5>
                                <small>The Blueprint 3</small>
                        </div>
                        <span class=gloss></span>
                </div>
        </li>
        <li>
                <div class=album>
                        <a href=#><img src=images/AvrilChildren.png alt= /></a>
                        <span class=vinyl>
                        <div></div>
                        </span>
                        <ul class=actions>
                                <li class=play-pause><a href=#></a></li>
                                <li class=info><a href=#></a></li>
                        </ul>
                        <div>
                                <h5>Avril</h5>
                                <small>Avril Children1</small>
                        </div>
                        <span class=gloss></span>
                </div>
        </li>
        <li>
                <div class=album>
                        <a href=#><img src=images/AvrilChildren1.png alt= /></a>
                        <span class=vinyl>
                        <div></div>
                        </span>
                        <ul class=actions>
                                <li class=play-pause><a href=#></a></li>
                                <li class=info><a href=#></a></li>
                        </ul>
                        <div>
                                <h5>Avril</h5>
                                <small>Avril Children</small>
                        </div>
                        <span class=gloss></span>
                </div>
        </li>
</ul>
</body>

教程中需要的素材请访问:优秀的PS素材和图片素材

TOP

发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz Copyright © 2005-2019 www.MissYuan.com All rights reserved.站长QQ8713688 邮箱8713688@qq.com