守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 436|回复: 0

[技术资料] CSS3实现全景图特效

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-3 12:46:14 | 显示全部楼层 |阅读模式

    本篇文章将给大家带来一个css3的黑科技:如何仅仅使用css来实现全景图的效果?

    最终效果演示:demo

    页面布局

    <div class="panorama"></div>

    基础样式

    首先定义一些基本的样式和动画

    .panorama {
      width: 300px;
      height: 300px;
      background-image: url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);
      background-size: auto 100%;
      cursor: pointer;
      animation: panorama 10s linear infinite alternate;
    }
    
    @keyframes panorama {
      to {
        background-position: 100% 0;
      }
    }

    background-size: auto 100%; 这段代码的意思是让图片的高等于容器的高,并且水平方向自动,即图片最左边贴着容器左侧。

    执行动画的流程是:周而复始、往复交替、线性并且时间周期是10s。

    手动控制动画执行

    到这里为止,当我们打开该网页后,立马会出现一张图片来回水平滑动的效果。但是这样的话,访客可能会被动画吸引而忽略了真正的内容。
    我们的要求是当鼠标悬浮于图片时才让它动起来,我们当然可以很简单的实现这个效果。

    删除之前的animation,添加以下样式。

    .panorama:hover,
    .panorama:focus {
      animation: panorama 10s linear infinite alternate;
    }

    现在的效果是:鼠标移入图片,图片开始水平来回滑动。

    动画的优化

    虽然效果达到了,但是你会发现,当鼠标移出图片,图片立刻回到初始位置。
    对于我们来说,这有点突然,如何记录图片当前的位置并且当鼠标移入时继续执行动画呢?

    我们可以依靠这个属性animation-play-state: paused | running,它表示动画的两个状态:暂停和运行。

    完整css代码

    .panorama {
      width: 300px;
      height: 300px;
      background-image: url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);
      background-size: auto 100%;
      cursor: pointer;
      animation: panorama 10s linear infinite alternate;
      animation-play-state: paused;
    }
    
    .panorama:hover,
    .panorama:focus {
      animation-play-state: running;
    }
    
    @keyframes panorama {
      to {
        background-position: 100% 0;
      }
    }

    你也可以在我的博客上阅览本篇文章,你的关注是我最大的写作动力,感谢你的支持。


    来源:http://div.io/topic/1693

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-10-23 01:08 , Processed in 0.043761 second(s), 31 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表