图片扫描仪特效 html+css

效果：

这样，有抖动的：

无抖动的：

实现：

1.定义一个盒子：

<body><div class="tu"></div>
</body>

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的话就不抖，有数值就会抖动。

完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{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; }}</style>
</head>
<body><div class="tu"></div>
</body>
</html>

总结：

这是网上看到一外国博主的创意，然后自己也弄了一个，虽然效果是比较简单的，但也是挺好玩的~

图片扫描仪特效 html+css相关推荐

扫描转换html,html+css实现图片扫描仪特效
本文主要介绍了html css 图片扫描仪,分享给大家,具体如下: 效果: 这样,有抖动的: 无抖动的: 实现: 1.定义一个盒子: 2.基本样式,长宽背景图等等~ .tu{ width: 500px ...
css 剪辑图片_css剪裁GIF背景图片动画特效
插件介绍这是一款css剪裁GIF背景图片动画特效.该特效利用css的background-clip技术,将gif图片剪裁为文字效果,非常炫酷. 使用方法 HTML结构 2020 CSS样式 .wra ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
web大二实训作业：校园运动会网站设计——运动会图片轮播图片遮罩特效(4页)体育 HTML+CSS+JavaScript HTML5期末大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
html+css+js表白代码，实现打字动画、动态爱心、图片旋转木马特效、下雪特效
给男朋友准备的520礼物,他觉得太尴尬了,于是我特地把这个项目开源,让大家一起感受一下男票的尴尬,哈哈哈哈哈哈我好恶趣味. 话不多说上代码: 一.动态爱心+打字动画 html部分: <!doct ...
图片展示html css代码,纯CSS3实现图片展示特效
Web浏览器端的特效越来越让人兴奋,通过CSS和JavaScript,各种意想不到的绚丽效果都能用简单的几句代码完成.本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可 ...
【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYP ...
html图片动态效果编码,CSS 图片动画特效的示例代码（相框）
本文介绍了CSS 图片动画特效的示例代码(相框),分享给大家,具体如下: 下面是效果图 HTML代码 Rabbit Web Developer CSS代码 /* 初始化 */ body, html { ...
css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...

图片扫描仪特效 html+css

效果：

实现：

完整代码：

总结：

图片扫描仪特效 html+css相关推荐

最新文章

热门文章