国庆欣赏《兵马俑》 - 第3页 - 【与图有染】 - 中画网

糊里糊涂 发表于 2018-10-4 09:58

绿地水池发表于 2018-10-1 18:15
欣赏佳作。为你点赞。



   <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"> 
            
            <img src="http://thyrsi.com/t6/380/1538534949x-1566688347.jpg"/>
            <img src="http://thyrsi.com/t6/380/1538534982x-1566688347.jpg"/>

<img src="http://thyrsi.com/t6/380/1538535012x-1566688347.jpg" />
<img src="http://thyrsi.com/t6/380/1538535043x-1566688347.jpg"/>
<img src="http://thyrsi.com/t6/380/1538617998x-1404775437.jpg"/>
</div>

   </div>

糊里糊涂 发表于 2018-10-4 09:59

雲朵发表于 2018-10-1 18:41
动漫制作精彩，翻页效果好看，音乐好听，图漂亮，欣赏



   <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"> 
            
            <img src="http://thyrsi.com/t6/380/1538534949x-1566688347.jpg"/>
            <img src="http://thyrsi.com/t6/380/1538534982x-1566688347.jpg"/>

<img src="http://thyrsi.com/t6/380/1538535012x-1566688347.jpg" />
<img src="http://thyrsi.com/t6/380/1538535043x-1566688347.jpg"/>
<img src="http://thyrsi.com/t6/380/1538617998x-1404775437.jpg"/>
</div>

   </div>

糊里糊涂 发表于 2018-10-4 10:00

红松故乡发表于 2018-10-1 18:58
问好老师，祝国庆节快乐。



   <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"> 
            
            <img src="http://thyrsi.com/t6/380/1538534949x-1566688347.jpg"/>
            <img src="http://thyrsi.com/t6/380/1538534982x-1566688347.jpg"/>

<img src="http://thyrsi.com/t6/380/1538535012x-1566688347.jpg" />
<img src="http://thyrsi.com/t6/380/1538535043x-1566688347.jpg"/>
<img src="http://thyrsi.com/t6/380/1538617998x-1404775437.jpg"/>
</div>

   </div>

绿地水池 发表于 2018-10-4 19:46

糊里糊涂发表于 2018-10-4 09:58
/* 这帖旋转体的id 为 items */
/* 以下是定义所有图片的 */ ...

糊里糊涂国庆节假日快乐！

黔中一叟 发表于 2018-10-4 22:41

糊里糊涂发表于 2018-10-4 09:58
/* 这帖旋转体的id 为 items */
/* 以下是定义所有图片的 */ ...

朋友，欣赏你的美文美图，在此轻轻道一声：朋友辛苦了！祝愿你和你的朋友永远幸福快乐！

糊里糊涂 发表于 2018-10-5 15:17

绿地水池发表于 2018-10-4 19:46
糊里糊涂国庆节假日快乐！

http://www.yinhuabbs.cn/data/attachment/forum/201607/17/082848nc6m1601wg660viw.gif

糊里糊涂 发表于 2018-10-5 15:17

黔中一叟发表于 2018-10-4 22:41
朋友，欣赏你的美文美图，在此轻轻道一声：朋友辛苦了！祝愿你和你的朋友永远幸福快乐！

http://www.yinhuabbs.cn/data/attachment/forum/201801/20/152027wq8ctji258pttvpu.gif

绿地水池 发表于 2018-10-5 15:19

糊里糊涂发表于 2018-10-5 15:17

糊里糊涂朋友下午好！

黔中一叟 发表于 2018-10-5 21:50

糊里糊涂发表于 2018-10-5 15:17

看望朋友，愿友情永远连着我和你！

页: 1 2 [3]

中画网's Archiver