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实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php基础教程
2015/08/26 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
司机岗位职责
2013/11/15 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
抄作业检讨书
2014/02/17 职场文书
搞笑婚前保证书
2015/02/28 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
python pyhs2 的安装操作
2021/04/07 Python
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android