【艾尔升杂志】盛世华章祝论坛的朋友们国庆快乐 - 第2页 - 【与图有染】 - 中画网

幽园馨兰 发表于 2018-9-29 19:08

金秋十月，一个诗意的季节，一缕墨香，一曲悠扬，一幅画卷，感谢精彩分享，中画一路有你相伴很精彩，至此国庆来临之际，送一份真挚的祝福，祝福国庆节快乐！

黔中一叟 发表于 2018-9-29 20:56

国庆如期而至，问候提前送达，愿走亲戚顺顺利利，访友人留下美好记忆，如果您出门旅游去，愿玩得开心而惬意，国庆提前问候，愿假期事事如意！

蹬着破车去吹风 发表于 2018-9-30 07:58

感谢老师分享精彩

江淮大地 发表于 2018-10-1 07:05

好久没见了，节日愉快！

江淮大地 发表于 2018-10-1 07:06

电子杂志作的真棒~~~~~~

云中雷 发表于 2018-10-1 09:43

欣赏你的佳作!分享你的精彩!遥祝国庆节快快乐乐!

布衣人家 发表于 2018-10-1 11:15

问好老师，欣赏你的精彩佳作。

糊里糊涂 发表于 2018-10-1 16:45

<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/377/1538208624x-1566688347.jpg"/>
            <img src="http://thyrsi.com/t6/377/1538208700x-1566688347.jpg"/>

<img src="http://thyrsi.com/t6/377/1538209460x-1376440090.jpg" />
<img src="http://thyrsi.com/t6/377/1538208793x-1566688347.jpg"/>
<img src="http://thyrsi.com/t6/377/1538208828x-1566688347.jpg"/>
</div>

   </div>

http://thyrsi.com/t6/377/1538209460x-1376440090.jpg

雲朵发表于 2018-10-1 18:42

问好，谢谢分享精彩

雲朵发表于 2018-10-1 18:44

动画制作精彩，翻页效果好看，视觉听觉享受, 欣赏

页: 1 [2] 3

中画网's Archiver