CSS3动画综合实战-CD光盘出仓效果

无锡/设计爱好者/14年前/1655浏览

版权

CSS3动画综合实战-CD光盘出仓效果

设计旋转出仓的光盘动画效果，这个实例也是在成林著作的《CSS3实战》这本书上面看到，自己按书上面的代码做的练习作品，附代码供大家学习参考下;也略说下这本书

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

贴出代码供大家学习参考下，兼容webkit内核与Gecko内核的浏览器，另外恳请管理员是否可能把代码贴一个链接地址出来，也算一素材

以下是样式代码部分：

/*<![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>

<li>

</span>

</ul>

<div>

<h5>Michael Jackson</h5>

<small>Thriller</small>

</div>

</div>

</li>

<li>

</span>

</ul>

<div>

<h5>Michael Jackson</h5>

</div>

</div>

</li>

<li>

</span>

</ul>

<div>

<h5>Michael Jackson</h5>

</div>

</div>

</li>

<li>

</span>

</ul>

<div>

<small>The Blueprint 3</small>

</div>

</div>

</li>

<li>

</span>

</ul>

<div>

<h5>Avril</h5>

<small>Avril Children1</small>

</div>

</div>

</li>

<li>

</span>

</ul>

<div>

<h5>Avril</h5>

<small>Avril Children</small>

</div>

</div>

</li>

</ul>

</body>

声明

原创文章网页