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 相关文章推荐
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 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统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
nodeJS微信分享
2017/12/20 NodeJs
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
python设置环境变量的作用和实例
2019/07/09 Python
django列表筛选功能的实现代码
2020/03/27 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python中内建模块collections如何使用
2020/05/27 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
大学军训自我鉴定
2013/12/15 职场文书
小班重阳节活动方案
2014/02/08 职场文书
司机职责范本
2014/03/08 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
OpenCV实现普通阈值
2021/11/17 Java/Android