码迷,mamicode.com
首页 > 其他好文 > 详细

transform:rotate()制作摩天轮小案例

时间:2019-01-19 16:24:21      阅读:762      评论:0      收藏:0      [点我收藏+]

标签:.com   img   制作   游览器   splay   案例   spl   避免   技术分享   

这个案例跟我上一次发布的文章案例——旋转木马相册比较像,但更简单一点,用不到translate,只需要用rotate,而且不分x轴,Y轴,z轴。案例效果图如下:

技术分享图片

分析:摩天轮和中间的标题是两张导入的图片。它们都是定位到游览器的正中央,摩天轮图片我用的是固定定位,这样就可以避免产生竖向滚动条了。其它的用绝对定位就行。所有的娃娃是在同一个div里面,div的宽高跟摩天轮的图片一样。section的宽高也是一样。

html样式

<section>
    <img src="images/fsw.png" >
    <img src="images/big-title.png" >
</section>
<div>
    <img src="images/boy.png" >
    <img src="images/girl.png" >
    <img src="images/girls.png" >
    <img src="images/hairboy.png" >
    <img src="images/mimi.png" >
    <img src="images/dog.png" >
    <img src="images/mudog.png" >
    <img src="images/shamegirl.png" >
</div>

css样式

重置样式

        *{
            margin:0;padding:0;
        }
        body,html{
            height:100%;
        }
        img{
            display: block;
        }

难点:怎么让娃娃的头一直朝上转动?要做到两点,改变娃娃的旋转原点,和反方向转动。所有元素的转动要保持同频率

    section{
        width: 768px;
        height: 768px;
        background: url(images/fsw.png) no-repeat center;
        position:fixed;
        left: 0;right: 0;
        top: 0;bottom: 0;
        margin: auto;
        animation:rotate-circle 10s infinite linear; 
    }
    section img:nth-child(2){
        position: absolute;
        left: 0;right: 0;
        top: 0;bottom: 0;
        margin: auto;
        animation:yuanxin 10s infinite linear;
    }
    div{
        width: 768px;
        height: 768px;
        position: fixed;
        left:0;right: 0;
        top: 0;bottom: 0;
        margin: auto;
        animation:rotate-circle 10s infinite linear;        
    }
    div img{
        position: absolute;
        animation:divimg 10s infinite linear reverse;
        transform-origin:50% 0;
    }
    div img:nth-child(1){
        left:325px;top:9px;
    }
    div img:nth-child(2){
        left:-30px;top:350px;
    }
    div img:nth-child(3){
        left:325px;bottom:-150px;
    }
    div img:nth-child(4){
        right:-17px;top:350px;
    }
    div img:nth-child(5){
        left:54px;top:120px;
    }
    div img:nth-child(6){
        right:54px;top:120px;
    }
    div img:nth-child(7){
        left:54px;top:606px;
    }
    div img:nth-child(8){
        right:128px;top:620px;
    }
    @keyframes rotate-circle{
        0%{transform:rotate(0);}
        50%{transform: rotate(180deg);}
        100%{transform:rotate(360deg);}
    }
    @keyframes yuanxin{
        0%{transform:rotate(0);}
        50%{transform:rotate(-180deg);}
        100%{transform:rotate(-360deg);}
    }
    @keyframes divimg{
        0%{transform:rotate(0);}
        50%{transform: rotate(180deg);}
        100%{transform:rotate(360deg);}
    }

```

transform:rotate()制作摩天轮小案例

标签:.com   img   制作   游览器   splay   案例   spl   避免   技术分享   

原文地址:https://www.cnblogs.com/web-learning/p/10291747.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!