zoukankan      html  css  js  c++  java
  • 小制作-css+html旋转木马

    源代码:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style type="text/css">
        body{
    transform-style: preserve-3d;
        background-image: radial-gradient(yellow,pink)

        }
            .outer{
                 200px;
                height: 300px;
    /*            border:1px solid green;*/
                position: relative;
                margin:100px auto;
                transform: rotateY(10deg) rotateX(30deg);
                transform-style: preserve-3d;
                /*transform: rotateX(-38deg)rotateY(-35deg) ;*/
                animation: mofang 7s linear infinite;
            }
            @keyframes mofang{
                from{
                    transform:rotateX(0deg) rotateY(10deg);

                }
                to{
                    transform:rotateY(360deg)rotateX(10DEG);
                }
            }
            .inner{
                 200px;
                height: 300px;
                border:2px solid red;
                position: absolute;
            }
            .inner:nth-child(1){
                transform: translateZ(308PX);
            }
            .inner:nth-child(2){
                transform: translateZ(-308PX);
            }
            .inner:nth-child(3){
                transform: rotateY(36deg)translateZ(310PX);
            }
            .inner:nth-child(4){
                transform: rotateY(36deg)translateZ(-310PX);
            }
            .inner:nth-child(5){
                transform: rotateY(72deg)translateZ(310PX);
            }
            .inner:nth-child(6){
                transform: rotateY(72deg)translateZ(-310PX);
            }
            .inner:nth-child(7){
                transform: rotateY(108deg)translateZ(310PX);
            }
            .inner:nth-child(8){
                transform: rotateY(108deg)translateZ(-310PX);
            }
            .inner:nth-child(9){
                transform: rotateY(144deg)translateZ(310PX);
            }
            .inner:nth-child(10){
                transform: rotateY(144deg)translateZ(-308PX);
            }
            h2{
                color: orange;
            }
        </style>
    </head>
    <body>
    <marquee scrollamount="5">
    <h2>
    《多幸运》
    词:刘家泽

    曲:胜屿

    演唱:韩安旭

    在亿万人海相遇

    有同样默契

    是多么不容易

    你懂得我的固执

    我懂你脾气

    两颗心在靠近

    等不及解释我的心情

    怕错过爱上你的时机

    浪漫已经 准备就绪

    全新的旅行

    多幸运

    在最美的年纪

    遇见你

    没有遗憾和可惜

    抱紧你

    用尽全部力气

    不让幸福逃离

    多幸运

    爱你这件事情

    成为我

    今生最对的决定

    我相信

    你就是那唯一

    愿陪你到底

    多幸运 遇见了你

    多幸运 爱上了你

    多幸运 能在一起

    多幸运 遇见了你

    多幸运 爱上了你

    多幸运 能在一起

    在亿万人海相遇

    有同样默契

    是多么不容易

    你懂得我的固执

    我懂你脾气

    两颗心在靠近

    等不及解释我的心情

    怕错过爱上你的时机

    浪漫已经 准备就绪

    全新的旅行

    多幸运

    在最美的年纪

    遇见你

    没有遗憾和可惜

    抱紧你

    用尽全部力气

    不让幸福逃离

    多幸运

    爱你这件事情

    成为我

    今生最对的决定

    我相信

    你就是那唯一

    愿陪你到底

    多幸运 遇见了你

    多幸运 爱上了你

    多幸运 能在一起

    多幸运 遇见了你

    多幸运 爱上了你

    多幸运 能在一起

    多幸运

    在最美的年纪

    遇见你

    没有遗憾和可惜

    抱紧你

    用尽全部力气

    不让幸福逃离

    多幸运

    爱你这件事情

    成为我

    今生最对的决定

    我相信

    你就是那唯一

    愿陪你到底 </h2></marquee>
    <audio src="http://wl.baidu190.com/1465095357/fbef26cbf77c7072a34ba1dd074e889b.mp3" autoplay loop="loop"></audio>
    <div class="outer">
        <div class="inner"><img src="1.jpg" width="200px" height="300px"></div>
        <div class="inner"><img src="2.jpg" width="200px" height="300px"></div>
        <div class="inner"><img src="3.jpg" width="200px" height="300px"></div>
        <div class="inner"><img src="4.jpg" width="200px" height="300px"></div>
        <div class="inner"><img src="5.jpg" width="200px" height="300px"></div>
        <div class="inner"><img src="6.jpg" width="200px" height="300px"></div>
        <div class="inner"><img src="7.jpg" width="200px" height="300px"></div>
        <div class="inner"><img src="8.jpg" width="200px" height="300px"></div>
        <div class="inner"><img src="9.jpg" width="200px" height="300px"></div>
        <div class="inner"><img src="10.jpg" width="200px" height="300px"></div>

    </div>

    </body>
    </html>

    静态截图《想侧面添加图片的,把准备好的图片插入源代码相应位置就ok啦》:

  • 相关阅读:
    一个有趣的.net程序死锁问题
    腾讯2013年实习生笔试题目(附答案)
    C#函数式程序设计初探基础理论篇
    IE的BUG?
    OpenPetra 以及CentOS Mono 3.0 部署包
    自己封装的内存缓存类DotNet.Caches.Bytecached
    Windows Azure Services安装及故障排查
    接口
    利用SQL Server的扩展属性自动生成数据字典
    CentOS配置ssh无密码登录的注意点
  • 原文地址:https://www.cnblogs.com/zhangzhen950702/p/5671976.html
Copyright © 2011-2022 走看看