请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5实战 HTML5应用 查看内容

css3 制作光盘滑动动画

2013-11-19 00:37| 发布者: admin| 查看: 1851| 评论: 0

摘要: 本例给大家介绍一个css3 制作的光盘滑动动画。本示例能够兼容webkit类型的浏览器,,光盘动画效果主要通过旋转转换实现,光盘出仓的动画则主要是通过移动转换实现。通过渐变和阴影设计光盘效果。将鼠标放到光盘专辑 ...
本例给大家介绍一个css3 制作的光盘滑动动画。本示例能够兼容webkit类型的浏览器,,光盘动画效果主要通过旋转转换实现,光盘出仓的动画则主要是通过移动转换实现。通过渐变和阴影设计光盘效果。

将鼠标放到光盘专辑上方,查看效果:


    超人不会飞
    作词:周杰伦
    作曲:周杰伦
    演唱:周杰伦

html代码如下:
<ul class="tunes">
    <li>
        <div class="album"> <a href=""><img src="images/222.JPG" /></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>超人不会飞</h5>
                <small>作词:周杰伦<br />作曲:周杰伦<br />演唱:周杰伦</small></div>
            <span class="gloss"></span></div>
    </li>
</ul>
关键css代码解析:
1. 设计音乐盒的外框代码,这里注意用到了一个线性动画为1.5秒。-webkit-transition: all .15s linear;
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;
    color: #333;
    left: 0px;
    top: 0px;
}
2. 给音乐盒添加底部阴影代码:
 -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
 -webkit-border-radius: 2px;

3.当鼠标浮到音乐盒上,用到的css代码如下:
ul.tunes li div.album ul.actions li:hover {
 background: -webkit-gradient(linear, left top, left bottom, from(#333), to(black)); 
}
此处对音乐盒的美化运用了大量的css3渐变效果。
 
完整css代码:





鲜花

握手

雷人

路过

鸡蛋

相关阅读

相关分类

快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2020-4-10 08:05 , Processed in 0.139610 second(s), 29 queries .

返回顶部