CSS3实现全景图特效示例代码


Posted in HTML / CSS onMarch 26, 2018

本文介绍了CSS3实现全景图特效示例代码,分享给大家,具体如下:

基本代码

html代码:

<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-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;
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 #HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 #HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 #HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 #HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 #HTML / CSS
css3 矩阵的使用详解
Mar 20 #HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 #HTML / CSS
You might like
PHP define函数的使用说明
2008/08/27 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
提示$ is not defined错误分析及解决
2013/04/09 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python-接口开发入门解析
2019/08/01 Python
如何在django中运行scrapy框架
2020/04/22 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
历史学专业毕业生求职信
2013/09/27 职场文书
辩论赛主持词
2014/03/18 职场文书
公司请假条范文
2014/04/11 职场文书
主持人演讲稿
2014/05/13 职场文书
应届生求职自荐信
2014/07/04 职场文书
销售员试用期自我评价
2014/09/15 职场文书
合作协议书模板2014
2014/09/26 职场文书
教师三严三实心得体会
2014/10/11 职场文书
五好家庭事迹材料
2014/12/20 职场文书