糊里糊涂 发表于 2019-5-19 15:35

糊里糊涂(Hlht)播放器 二泉映月

本帖最后由 糊里糊涂 于 2019-5-19 16:14 编辑 <br /><br /><div style="LEFT: 0px; WIDTH: 800px; POSITION: relative; TOP: 0px">
<embed src="http://up.yinhuabbs.cn/upload/糊里糊涂/swf/二泉映月song.swf" type="application/x-shockwave-flash" wmode="transparent" quality="high" allowscriptaccess="never" width="800" height="100"></div><br><br><br><br><br>



       <style>
            /* 这帖旋转体的id 为 items */
            /* 以下是定义所有图片的   */
            #items img{
                width:300px;      /* 图片宽度 */
                height: 300px;      /* 图片高度 */
                position: absolute;overflow:hidden;border-radius:20%;
               
            }         
            #items img:nth-child(1){
                transform: rotateY(0deg) translateZ(240px);
            }
            #items img:nth-child(2){
                transform: rotateY(72deg) translateZ(240px);
            }
            #items img:nth-child(3){
                transform: rotateY(144deg) translateZ(240px);
            }
            #items img:nth-child(4){
                transform: rotateY(216deg) translateZ(240px);
            }
            #items img:nth-child(5){
                transform: rotateY(288deg) translateZ(240px);
            }
            
            /*以下是旋转体的有关定义      */
            /*id选择器   id不能重复命名 ， 本例中 id 为 items*/
            #items{
                margin: 50px auto;         /*让父元素居中*/
                width: 300px;                /* 旋转体宽度， 和单张图片相等 */
                height: 300px;                /*旋转体高度， 和单张图片相等   */
                /*声明一个3D空间*/
                transform-style: preserve-3d;          /* 这句很重要，显示立体效果*/
                /*最重要的动画定义来了*/
                     /*名称animate00这个必须有，随自己心意起个名称*/
                /*   一次动画持续时间（秒）， 本例中是 120秒   */
                /*   动画变化曲线， 本例中 linear 表示匀速变化，
                     不设定则是两头快中间慢       */
                /*   动画次数， 本例中的 infinite表示无限次*/
                animation: animate00 60s linear infinite;
                position: relative;    /* 为内部的图片指定个定位依据*/
            }
            
            /*定义一个动画效果，注意动画名animate00 用到了这里*/
            /* 这动画定义的含义是，旋转体Y轴方向偏5°，绕X轴方向一周，360° --> 0 °   */
            @keyframes animate00 {
                from {
                  transform: rotateY(360deg);
                }
                to {
                  transform: rotateY(0deg);
                }
            }
      </style>

      <div style="width:500px;height:500px;margin:32px auto;">
                <div id="items">   <!-- 旋转体id在这里-->
               <!-- 以下是用到的各张图片-->
                <img src="https://www.yinling.com.cn/data/attachment/forum/201905/19/155727jwn2ww7fbnjetkwf.jpg"/>
                <img src="https://www.yinling.com.cn/data/attachment/forum/201905/19/155749xb169cf1w8b8896c.jpg"/>               
<img src="https://www.yinling.com.cn/data/attachment/forum/201905/19/155806zpszz0pf16hl3pwb.jpg"/>
<img src="https://www.yinling.com.cn/data/attachment/forum/201905/19/155821hg35fz5klhi7abyh.jpg"/>
<img src="https://www.yinling.com.cn/data/attachment/forum/201905/19/155837ben06nz2xefeeleb.jpg"/>
</div>

      </div>


<br><br><br><br><br><br>

绿地水池 发表于 2019-5-19 15:59

欣赏佳作。为你点赞。

落雨听禅 发表于 2019-5-19 19:24

问好，欣赏你的精美制作

落雨听禅 发表于 2019-5-19 19:24

画一抹明媚，采一丝夏雨，抓一片清风，送给你夏日的祝福。感谢您的精彩分享，中画有您更精彩！

幽园馨兰 发表于 2019-5-19 19:49

问好，欣赏你的精彩制作

幽园馨兰 发表于 2019-5-19 19:50

新颖的版式，动漫制作的漂亮，为你点赞！

幽园馨兰 发表于 2019-5-19 19:50

一杯香茗，一缕墨香，一曲悠扬，一幅画卷，一份祝福：遥祝安好！感谢精彩分享，中画因你而精彩！

雁归来 发表于 2019-5-19 20:22

分享糊里糊涂老师特效音画！

雁归来 发表于 2019-5-19 20:22

唯美的制作！我醉了！

安静听雨2016 发表于 2019-5-19 22:05


谢谢老师给大家带来美的享受和美的陶冶，祝幸福安好！
页: [1] 2
查看完整版本: 糊里糊涂(Hlht)播放器 二泉映月