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之多背景background使用示例
Oct 18 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Django实现跨域的2种方法
2019/07/31 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
枚举与#define宏的区别
2014/04/30 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
财务副总经理工作职责
2013/11/25 职场文书
专营店会计助理岗位职责
2013/11/29 职场文书
六查六看剖析材料
2014/02/15 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
Redis 哨兵机制及配置实现
2022/03/25 Redis