论坛 › 【与图有染】 › 旗袍女儿情

绿地水池 发表于 2019-5-18 16:55

糊里糊涂 发表于 2019-5-18 16:35


我现在正在欣赏佳作。

绿地水池 发表于 2019-5-18 16:56

糊里糊涂 发表于 2019-5-18 16:34


我今天一天都在聆听美妙的歌声。

静思的 发表于 2019-5-18 20:20

静思的 发表于 2019-5-17 21:56


旋转体代码可以告人吗？

静思的 发表于 2019-5-18 20:21

糊里糊涂 发表于 2019-5-18 16:29
/* 这帖旋转体的id 为 items */
            /* 以下是定义所有图片的   */
            ...

太精彩了，作品真棒

静思的 发表于 2019-5-18 20:40

糊里糊涂 发表于 2019-5-18 16:31


旗袍女儿情
http://www.yinhuabbs.cn/forum.php?mod=viewthread&tid=220168&fromuid=87235
(出处: 中画网)

布衣人家 发表于 2019-5-18 21:06

老师晚上好！欣赏您的精彩佳作,为您点赞且学习,因故未能及时回复抱歉.遥祝安康！

黔中一叟 发表于 2019-5-18 22:21

糊里糊涂 发表于 2019-5-18 16:17


朋友不客气，因为有缘，相逢在网络空间，愿你的每一天都充满阳光和欢愉！

糊里糊涂 发表于 2019-5-19 09:04

静思的 发表于 2019-5-18 20:20
旋转体代码可以告人吗？

互相学习，没有秘密的，代码如下：

<style>
            /* 这帖旋转体的id 为 items */
            /* 以下是定义所有图片的   */
            #items img{
                width:300px;      /* 图片宽度 */
                height: 300px;      /* 图片高度 */
                position: absolute;
                /*---------下面几条不是必要的， 只是修饰图片所用    -------*/
                overflow:hidden;      /* 这条及下面一条是为使图片圆角 */
                border-radius:16px;
                border:4px blue inset;      /* 图片边框设置 */            
                opacity:0.9;       /* 图片透明度 */
            }         
         /*以下为逐一定义图片偏转角度及距中心的距离   */
         /*本例中用到8张图片，每张图片逐一偏转 360 / 8 = 45 度 (rotateX)*/                     
         /*距中心距离 = 图片高度 ÷ 2 ÷ tan(每一图片偏转角度 / 2)   */
         /*本例中： 300 ÷ 2 ÷ tan(45 ÷ 2) ≈ 362.132   */
         /*   小于计算值图片会挤在一起，略大于是为了使图片间有个小间隔*/
            #items img:nth-child(1){
                transform: rotateX(0deg)translateZ(375px);
            }
            #items img:nth-child(2){
                transform: rotateX(45deg) translateZ(375px);
            }
            #items img:nth-child(3){
                transform: rotateX(90deg) translateZ(375px);
            }
            #items img:nth-child(4){
                transform: rotateX(135deg) translateZ(375px);
            }
            #items img:nth-child(5){
                transform: rotateX(180deg) translateZ(375px);
            }
            #items img:nth-child(6){
                transform: rotateX(225deg) translateZ(375px);
            }
            #items img:nth-child(7){
                transform: rotateX(270deg) translateZ(375px);
            }
            #items img:nth-child(8){
                transform: rotateX(315deg) translateZ(375px);
            }
            
            /*以下是旋转体的有关定义      */
            /*id选择器   id不能重复命名 ， 本例中 id 为 items*/
            #items{
                margin: 300px auto;         /*让父元素居中*/
                width: 300px;                /* 旋转体宽度， 和单张图片相等 */
                height: 300px;                /*旋转体高度， 和单张图片相等   */
                /*声明一个3D空间*/
                transform-style: preserve-3d;          /* 这句很重要，显示立体效果*/
                transform: rotateY(5deg);       /* 略微偏转一点以免前后重叠*/
                /*最重要的动画定义来了*/
                     /*名称animate00这个必须有，随自己心意起个名称*/
                /*   一次动画持续时间（秒）， 本例中是 120秒   */
                /*   动画变化曲线， 本例中 linear 表示匀速变化，
                     不设定则是两头快中间慢       */
                /*   动画次数， 本例中的 infinite表示无限次*/
                animation: animate00 120s linear infinite;
                position: relative;    /* 为内部的图片指定个定位依据*/
                /* ----   下面的不重要， 根据自己需要设定， 与动画无关*/
                /*left:0px;top:50px;
                margin-bottom:80px;*/
            }
            
            /*定义一个动画效果，注意动画名animate00 用到了这里*/
            /* 这动画定义的含义是，旋转体Y轴方向偏5°，绕X轴方向一周，360° --> 0 °   */
            @keyframes animate00 {
                from {
                  transform: rotateY(5deg) rotateX(360deg);
                }
                to {
                  transform: rotateY(5deg) rotateX(0deg);
                }
            }
      </style>

      <div style="width:500px;height:900px;margin:32px auto;">
                <div id="items">   <!-- 旋转体id在这里-->
               <!-- 以下是用到的各张图片-->
                <img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
                <img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104028uaxj6mb3xos163b1.jpg"/>
                <img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
                <img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104106gtk6vuoouzzvk19y.jpg"/>
                <img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
                <img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104129i5yt5a2eeed6iiyp.jpg"/>
                <img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
                <img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104148u7nygaka5yi79sag.jpg"/>
                </div>

      </div>

糊里糊涂 发表于 2019-5-19 09:08

布衣人家 发表于 2019-5-18 21:06
老师晚上好！欣赏您的精彩佳作,为您点赞且学习,因故未能及时回复抱歉.遥祝安康！

http://www.yinhuabbs.cn/data/attachment/forum/201903/21/165223a09nl70y5qs0954m.gif

糊里糊涂 发表于 2019-5-19 09:09

绿地水池 发表于 2019-5-18 16:56
我今天一天都在聆听美妙的歌声。

http://www.yinhuabbs.cn/data/attachment/album/201505/10/160741mvs51wz90w0cf4q5.gif

查看完整版本: 旗袍女儿情