扫描转换html,html+css实现图片扫描仪特效
本文主要介绍了html css 图片扫描仪,分享给大家,具体如下:
效果:
这样,有抖动的:
无抖动的:
实现:
1.定义一个盒子:
2.基本样式,长宽背景图等等~
.tu{
width: 500px;
height: 300px;
background-image: url(8.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
cursor: pointer;
}
cursor: pointer;鼠标经过盒子样式为小手
3.用伪类元素做扫描线,基本样式:
.tu::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 35px;
background-image: url(8.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
filter: sepia(100%);
opacity: 0;
}
filter: sepia(100%); 图片发黄。
filter: invert(100%); 像X光底片。
4.实现扫描:
.tu:hover::after{
opacity: 1;
animation: move 1.8s linear infinite;
}
@keyframes move{
0%{
top: 0;
background-position: 6px 0px;
}
20%{
top: 60px;
background-position: -6px -60px;
}
40%{
top: 120px;
background-position: 6px -120px;
}
60%{
top: 180px;
background-position: -6px -180px;
}
80%{
top: 240px;
background-position: 6px -240px;
}
100%{
top: 300px;
background-position: -6px -300px;
}
}
让background-position的y轴位移刚好等于top的距离,然后x轴为0的话就不抖,有数值就会抖动。
完整代码:
Document
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0);
}
.tu{
width: 500px;
height: 300px;
background-image: url(8.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
cursor: pointer;
}
.tu::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 20px;
background-image: url(8.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
filter: invert(100%);
opacity: 0;
}
.tu:hover::after{
opacity: 1;
animation: move 1.8s linear infinite;
}
@keyframes move{
0%{
top: 0;
background-position: 6px 0px;
}
20%{
top: 60px;
background-position: -6px -60px;
}
40%{
top: 120px;
background-position: 6px -120px;
}
60%{
top: 180px;
background-position: -6px -180px;
}
80%{
top: 240px;
background-position: 6px -240px;
}
100%{
top: 300px;
background-position: -6px -300px;
}
}
总结:
这是网上看到一外国博主的创意,然后自己也弄了一个,虽然效果是比较简单的,但也是挺好玩的~
到此这篇关于html+css实现图片扫描仪特效 的文章就介绍到这了,更多相关html+css图片扫描仪 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
扫描转换html,html+css实现图片扫描仪特效相关推荐
- 【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 网页开发中常见的样式与特效,收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYP ...
- 图片扫描仪特效 html+css
效果: 这样,有抖动的: 无抖动的: 实现: 1.定义一个盒子: <body><div class="tu"></div> </body& ...
- html 图片渲染方式,仅用CSS实现图片渲染特效
前言 实现图片高亮效果等特效,就不得不提到CSS3的滤镜filter属性,CSS过滤器是一个强大的工具,可以使用它来实现不同的视觉效果(有点像浏览器的Photoshop过滤器).CSS filter属 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效 原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
- css 剪辑图片_css剪裁GIF背景图片动画特效
插件介绍 这是一款css剪裁GIF背景图片动画特效.该特效利用css的background-clip技术,将gif图片剪裁为文字效果,非常炫酷. 使用方法 HTML结构 2020 CSS样式 .wra ...
- web大二实训作业:校园运动会网站设计——运动会图片轮播图片遮罩特效(4页)体育 HTML+CSS+JavaScript HTML5期末大作业...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
- 纯CSS翻牌图片特效
使用图片 <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...
- html+css+js表白代码,实现打字动画、动态爱心、图片旋转木马特效、下雪特效
给男朋友准备的520礼物,他觉得太尴尬了,于是我特地把这个项目开源,让大家一起感受一下男票的尴尬,哈哈哈哈哈哈我好恶趣味. 话不多说上代码: 一.动态爱心+打字动画 html部分: <!doct ...
- 图片展示html css代码,纯CSS3实现图片展示特效
Web浏览器端的特效越来越让人兴奋,通过CSS和JavaScript,各种意想不到的绚丽效果都能用简单的几句代码完成.本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可 ...
最新文章
- 微信公众号支付php demo,200行代码实现微信支付-公众号支付,不再踩坑,附:demo...
- oracle ebs 数据源,Oracle EBS环境下查找数据源(Form篇)
- 入门篇|学渣是如何自学数据结构的?
- jenkins显示html样式问题的几种解决方案总结
- 20175322 周弋鸿 2018-2019-2 《Java程序设计》第八周学习总结
- C语言中的`sprintf`和`sscanf`两个函数介绍
- Nexus Indexer 2.0:增量下载
- ap mt7260a 华硕_带你入坑,用MT7620A带USB口的路由器搭建一个私有网盘
- Struts2的简单使用
- linux运行office2016,CrossOver 17让您可以在Linux上安装Microsoft Office 2016
- 明星玩跨界,全民娱乐时代来临!
- 中文关键词提取tfidf算法改进bsaeline
- 图。Dijkstra标号算法(最短路径)
- 【步态识别】LagrangeGait基于拉格朗日《Lagrange Motion Analysis and View Embeddings for Improved Gait Recognition》
- 有效解决Ubuntu18.04无法联网问题
- 说一说递归里的return返回!!!
- unity3d环境搭建
- 那些年,我们一起做过的 Java 课后练习题(56 - 60)
- MongoDB 查询语法与常用查询语句总结
- 单表代换密码(凯撒密码)
热门文章
- 消费管理系统java代码_SSH框架+Mysql数据库开发java web会员积分消费管理系统
- Vero praesentium odio suscipit dolor.Eos accusamus rem tempore.
- python 打印乘法表各种形式_Python使用while循环花式打印乘法表
- M415步进电机驱动器的使用(C51)
- 微信团队分享:微信每日亿次实时音视频聊天背后的技术解密
- CentOS 7.9 Xfce桌面安装中文输入法
- 【树莓派】基于树莓派,实现无线路由功能
- 计算机数值方法之最小二乘法拟合多项式C语言
- 免费的微信签到抽奖——微信大屏幕
- linux挂载u盘显示目录忙,linux下挂载u盘及iso8859-1 not found错误解决