旋转木马的小效果!

Posted WANGJUN59451

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了旋转木马的小效果!相关的知识,希望对你有一定的参考价值。

游乐场里的旋转木马是一个非常好玩的项目,尤其是很多女生都非常向往。那么,生活里的旋转木马尚能如此吸引人,何况计算机中的编码呢?在我看来,计算机中的旋转木马更为可爱,虽然我不能身临其境,但它比我身临其境却要更加满足~

先来一个旋转动物大聚会:

由于上传的动图比较大,就不上传了。

这个是对这个旋转木马截的图,效果不太明显,但是隐约可以看到后面存在的小方格,小版块,其实就是其他的照片。

下面献上我的代码,为了以后更加熟练掌握和熟练运用css,在这里做上一个笔记。

复制代码
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片旋转</title>
        <style type="text/css">
            div{
                width: 300px;
                height: 240px;    
                margin:200px auto;
                animation: rolldiv 10s linear infinite;
                transform-style: preserve-3d;
            }
            
            @keyframes rolldiv{
                from{
                    transform: rotateY(0deg);
                }
                to{
                    transform: rotateY(360deg);
                }
            }
            
            img{
                width: 300px;
                height: 240px;
                opacity: 0.9;
                position: absolute;
            }
            img:nth-child(1){
                transform: rotateY(36deg) translateZ(500px);
            }
            img:nth-child(2){
                transform: rotateY(72deg) translateZ(500px);
            }
            img:nth-child(3){
                transform: rotateY(108deg) translateZ(500px);
            }
            img:nth-child(4){
                transform: rotateY(144deg) translateZ(500px);
            }
            img:nth-child(5){
                transform: rotateY(180deg) translateZ(500px);
            }
            img:nth-child(6){
                transform: rotateY(216deg) translateZ(500px);
            }
            img:nth-child(7){
                transform: rotateY(252deg) translateZ(500px);
            }
            img:nth-child(8){
                transform: rotateY(288deg) translateZ(500px);
            }
            img:nth-child(9){
                transform: rotateY(324deg) translateZ(500px);
            }
            img:nth-child(10){
                transform: rotateY(360deg) translateZ(500px);
            }
            
            body{
                transform-style: preserve-3d;
                -moz-perspective: 2000px;
            }

            
        </style>
    </head>
    <body>
        <div>
            <img src="img/pic1.jpg" />
            <img src="img/pic2.jpg" />
            <img src="img/pic3.jpg" />
            <img src="img/pic4.jpg" />
            <img src="img/pic5.jpg" />
            <img src="img/pic6.jpg" />
            <img src="img/pic7.jpg" />
            <img src="img/pic8.jpg" />
            <img src="img/pic9.jpg" />
            <img src="img/pic10.jpg" />
        </div>
    </body>
</html>
复制代码
复制代码

这个是在 Hbuilder 里面写的代码,效果不错。

逐一分析css的属性:

margin:与上面的边框的相隔的像素值,与左边相离像素值。  

from {} to {}  这个表示从0°旋转到360°。

@keyframes rolldiv  :这个是对动画进行定义,其中rolldiv是这个动画的名称,方便在后文中进行引用。

在这里面的animation里面便进行了引用,10s表示它整个动画维持的时间总和,linear infinite 这个则是表示它运行无限次,当然你也可以规定次数,比如3,就表示三次。

下面这个transform-style则表示它这个是3d的效果。

opacity表示它的透明度,最上方的照片我定义的为0.9。这个属性值的范围是0~1,从全透明变成不透明。

position 表示位置。

在下面来的就是这个我第一次见到的属性了!

因为我总共10张图片,然后需要旋转360°,于是每张图片旋转为36°,后面的translateZ(500px),表示距离旋转中心Z轴500个像素。

而前面的nth-child(1~10)表示每一张子图片。

style这个表示它是3d的效果。,后面这个perspective我的测试效果是,值越大,整体就越矮。

综述,这里面的图片也可以转换为video,加上js代码便可以实现鼠标置上时,播放视频等效果。过程也是比较简单的。

 

接下来,关于旋转,这里列举时钟的例子:

首先,不得不说,颜色搭配得不太美观,但是没关系,你可以自己尝试搭配你喜欢的颜色。

代码展示:

复制代码
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>时钟</title>
        <style type="text/css">
            .yuan{
                width: 500px;
                height: 500px;
                background-color: #ddd;
                border-radius: 50%;
                border: 6px solid #000000;
                position: relative;
            }
            .miaozhen{
                width: 10px;
                height: 170px;
                background-color: #000000;
                position: absolute;
                left: 245px;
                top: 114px;
                animation: animationmiaozhen 60s;
                animation-iteration-count: infinite;
                transform-origin:50% 80%;
            }
            .fenzhen{
                width: 14px;
                height: 140px;
                background-color: #A2A2A2;
                position: absolute;
                left: 243px;
                top: 144px;
                animation: animationfenzhen 3600s;
                animation-iteration-count: infinite;
                transform-origin:50% 76%;
            }
            .shizhen{
                width: 18px;
                height: 110px;
                background-color: #16160D;
                position: absolute;
                left: 241px;
                top: 174px;
                animation: animationshizhen 43200s;
                animation-iteration-count: infinite;
                transform-origin:50% 69%;
            }
            
            @keyframes animationmiaozhen{ 
                from{
                    transform: rotate(0deg);
                }
                
                to{
                    transform: rotate(360deg);
                }
            }
            @keyframes animationfenzhen{ 
                from{
                    transform: rotate(0deg);
                }
                
                to{
                    transform: rotate(360deg);
                }
            }
            @keyframes animationshizhen{ 
                from{
                    transform: rotate(0deg);
                }
                
                to{
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="yuan">
            <div class="shizhen">
                
            </div>
            <div class="fenzhen">
            
            </div>
            <div class="miaozhen">
                
            </div>
        </div>
    
        
    </body>
</html>
复制代码
复制代码

代码看起来也比较容易写,难度也不算很大。

left——>左间距,top——>上间距。

animation:动画定义后的实现及完成时间。

animation-iteration-count:次数,这里是无限次。

transform-origin:这里表示旋转中心点分别在width和height的所占比例,由于,我在追求美观,希望针尾长度一致,所以这里的比例便不同。需要编程人员自己计算,so easy!

然后结合上面提到的旋转木马,其实这个就很容易理解了。

 

心向旋转巧得木马    峰回路转偶得时钟    希望总有一款可以让我们更加了解css!

 

 

 

 

 

每天都要进步一点,积少以成多。。。转

以上是关于旋转木马的小效果!的主要内容,如果未能解决你的问题,请参考以下文章

旋转木马的小效果!

旋转木马的小效果!

心向旋转巧得木马 峰回路转偶得时钟

JQuery——banner旋转木马效果

jQuery仿3D旋转木马效果插件(带索引按钮)

在Android中的旋转木马