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制作精致的照片墙特效
Jun 07 HTML / CSS
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
使用CSS实现六边形的图片效果
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编写登录验证码功能 附调用方法
2016/05/19 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
JavaScript prototype 使用介绍
2013/08/29 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
python中管道用法入门实例
2015/06/04 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
创业计划书中包含的9个方面
2013/12/26 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
2014年工会工作总结
2014/11/12 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL