HTML+CSS+JS实现 ❤️照相机快门图片动画特效❤️

 效果演示:  

代码目录:

主要代码实现:

部分CSS样式:

html {height: 100%;overflow: hidden;
}body {min-height: 100%;
}.container {cursor: pointer;background-position: center center;background-size: cover;background-image: url("../img/1.jpg");width: 100vw;height: 100vh;position: relative;
}.container:focus {display: none;
}.flap {width: 150vmax;height: 150vmax;position: absolute;bottom: 50%;right: 50%;pointer-events: none;will-change: transform;background: hsl(calc(1turn * var(--p)), 80%, 80%);background: linear-gradient(35deg, #555, black);border: solid 4px #999;--p: calc(var(--i) / var(--flaps));-webkit-animation: click 0.9s cubic-bezier(0.5, 0, 0.5, 1) 0.1s;animation: click 0.9s cubic-bezier(0.5, 0, 0.5, 1) 0.1s;transform-origin: bottom right;transform: rotate(-0.5turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(-100%) translateY(90%);
}@-webkit-keyframes click {48%,52% {transform: rotate(-0.25turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(0%) translateY(0%);}
}@keyframes click {48%,52% {transform: rotate(-0.25turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(0%) translateY(0%);}
}.photo {position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;background-position: center center;background-size: cover;box-shadow: 0 10px 40px #000;margin: -1rem;margin-bottom: -5rem;border: solid 1rem #fff;border-bottom-width: 5rem;-webkit-animation: photo 5s cubic-bezier(0.5, 0, 0.5, 1) 0.9s both;animation: photo 5s cubic-bezier(0.5, 0, 0.5, 1) 0.9s both;
}@-webkit-keyframes photo {30%,60%,70% {filter: sepia(30%) saturate(140%) contrast(120%);transform: scale(0.5) rotate(-4deg);}61% {opacity: 1;}71% {opacity: 0;transform: none;}100% {filter: none;opacity: 1;}
}@keyframes photo {30%,60%,70% {filter: sepia(30%) saturate(140%) contrast(120%);transform: scale(0.5) rotate(-4deg);}61% {opacity: 1;}71% {opacity: 0;transform: none;}100% {filter: none;opacity: 1;}
}.instructions {position: absolute;top: 0;right: 0;left: 0;padding: 1rem;font-family: monospace;text-transform: uppercase;text-shadow: 0 1px 8px #fff;
}

HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS only Camera Shutter</title><link rel="stylesheet" href="css/normalize.min.css"><link rel="stylesheet" href="css/style.css"></head><body><div class="container" tabIndex="0"><div class="photo" style="background-image:url('img/2.jpg');"></div><div class="instructions">网页双击图片演示</div><div class="shutter" style="--flaps: 6"><div class="flap" style="--i: 0"></div><div class="flap" style="--i: 1"></div><div class="flap" style="--i: 2"></div><div class="flap" style="--i: 3"></div><div class="flap" style="--i: 4"></div><div class="flap" style="--i: 5"></div></div></div></body></html>

需要引入截图找中的CSS样式和选择自己喜欢的图片即可 

源码获取

查看博主主页或私信博主获取

精彩推荐更新中:

HTML5大作业实战100套

  打卡 文章 更新  40  /  100天

大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562063.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

往map里的vector添加_面试官问我同步容器(如Vector)的所有操作一定是线程安全的吗?我懵了!...

为了方便编写出线程安全的程序&#xff0c;Java里面提供了一些线程安全类和并发工具&#xff0c;比如&#xff1a;同步容器、并发容器、阻塞队列等。最常见的同步容器就是Vector和Hashtable了&#xff0c;那么&#xff0c;同步容器的所有操作都是线程安全的吗&#xff1f;这个问…

HTML+CSS+JS实现 ❤️3D方块弹跳动画特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分CSS样式&#xff1a; *, *::before, *::after {padding: 0;margin: 0 auto;box-sizing: border-box;transform-style: preserve-3d; }body {background-color: black;min-height: 100vh;display: f…

HTML+CSS+JS实现 ❤️520爱心背景表白网页动画特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分HTML代码 : <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"><title>好朋友-相册</title&…

pillow python 划线_Python-PIL(pillow)图片处理入门(一)

Pillow是Python里的图像处理库(PIL&#xff1a;Python Image Library)&#xff0c;提供了了广泛的文件格式支持&#xff0c;强大的图像处理能力&#xff0c;主要包括图像储存、图像显示、格式转换以及基本的图像处理操作等。1)使用 Image 类PIL最重要的类是 Image class, 你可以…

python中的键不允许重复_为什么python允许您使用重复键创建字典

>>> d {a : b, a : c}>>> d{a: c}不,这只是你使用预先存在的密钥初始化一个字典,它只是覆盖了现有密钥的当前值.>>> dis.dis("d {a : b, a : c}")1 0 BUILD_MAP 23 LOAD_CONST 0 (b)6 LOAD_CONST 1 (a)9 STORE_MAP10 LOAD_CONST 2 (c)1…

HTML+CSS+JS实现 ❤️three 3D铅笔绘图工具特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分CSS样式&#xff1a; #mfPreviewBar {display: none !important; }html, body {position: fixed;overflow: hidden;touch-action: none; }body {background-color: #f7f4f0;cursor: url("http…

mysql linux改密码忘记了怎么办_linux上mysql改密码忘了怎么办?

解决方法&#xff1a;1、在my.cnf中&#xff0c;增加“[mysqld]”和“skip-grant-tables”2行代码&#xff0c;用于登录时跳过密码验证&#xff1b;2、启动mysql服务&#xff0c;并登录mysql&#xff1b;3、连接mysql数据库&#xff0c;使用UPDATE命令修改用户密码即可。linux上…

HTML+CSS+JS实现 ❤️透明的水滴文字背景特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分CSS样式&#xff1a; import url(https://fonts.googleapis.com/css2?familyMontserrat:wght100&displayswap); import url(https://fonts.googleapis.com/css2?familyPoppins:wght900&d…

sqoop导出数据单mysql_sqoop导出hive表数据到mysql

直接在mysql里从本地文件系统导入数据mysql》LOAD DATA LOCAL INFILE C:\\Users\\asys\\Documents\\Tencent Files\\13174605\\FileRecv\\2015082818 INTO TABLE track_logFIELDS TERMINATED BY \t LINES TERMINATED BY \n; (注意这里文件是从linux导出的&#xff0c;以\n结尾…

HTML+CSS+JS实现 ❤️3D旋转魔方图片相册特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分CSS样式&#xff1a; background: url(../img/s3.jpg);background-size: 100% 100%;opacity: 0.8;transform: rotateY(90deg) translateZ(200px); }.box .box1 .left {background: url(../img/s4.jp…

HTML+CSS+JS实现 ❤️响应式的幸运大转盘❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分CSS样式&#xff1a; .winnerBox {max-width: 40rem;padding: 30px;margin: 30px auto;/*height: calc(100vh - 98px);*//*background-color: #fd6504 #9470fd;*/background: linear-gradient(to b…

maya python 开根号_maya python

胡泳滨MayaPython简易教程&#xff0c;如需转载&#xff0c;请标明出处地址&#xff1a;http://huyongbin.blogbus.com/c3363976/谢谢配合&#xff01;MayaPython第一篇 - 介绍大家好&#xff0c;这是一个简易的MAYA PYTHON学习教程。简易教程的目的是可以让更多的人快速掌握这…

HTML+CSS+JS实现 ❤️发光的线条爱心形状动画特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分CSS样式&#xff1a; body {background-color: #000;margin: 0;overflow: hidden;background-repeat: no-repeat; } HTML代码 : <!DOCTYPE html> <html lang"en"><head…

mysql 钩子_面试官: 什么是 Hook (钩子) 线程以及应用场景?

一、Hook 线程介绍通常情况下&#xff0c;我们可以向应用程序注入一个或多个 Hook (钩子) 线程&#xff0c;这样&#xff0c;在程序即将退出的时候&#xff0c;也就是 JVM 程序即将退出的时候&#xff0c;Hook 线程就会被启动执行。先看一段示例代码&#xff1a;①&#xff1a;…

HTML+CSS+JS实现 ❤️H5 3D传送带视差照片特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分CSS样式&#xff1a; html, body, .stage, .ring, .img {width: 100%;height: 100%;transform-style: preserve-3d;user-select: none; }html, body, .stage {overflow: hidden;background: #000; …

mysql慢查询日志轮转_MySQL slow log相关参数解释

slow_query_log1 #是否启用慢查询日志&#xff0c;1为启用&#xff0c;0为禁用slow_query_log_fileslow.log #指定慢查询日志文件的路径和名字&#xff0c;可使用绝对路径指定&#xff1b;默认值是主机名_slow.log&#xff0c;位于datadir目录long_query_time2 …

HTML+CSS+JS实现 ❤️h5酷炫的天体木星动画特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分CSS样式&#xff1a; body {margin: 0;overflow: hidden;position: relative;width: 100vw;height: 100vh;background-image: url("../img/bg.jpg");background-size: cover; }canvas {d…

HTML+CSS+JS实现 ❤️彩色3D线条动画特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; HTML代码 : <!doctype html> <html><head><meta charset"utf-8"><title>彩带特效</title></head><body><script id"fs" type…

mysql column legnth too big for_Column length too big for column 'Flist' (max = 21845);

建表语句报如下错误&#xff1a;CREATE TABLE test_1 (Fid bigint(20) unsigned NOT NULL,Ftype tinyint(4) unsigned NOT NULL,Flist varchar(65532) DEFAULT NULL,Fstatus tinyint(3) unsigned DEFAULT 0,Ftime bigint unsigned DEFAULT 0,Faddtime bigint unsigned DEFAULT …

HTML+CSS+JS实现 ❤️卡通人物吃水果游戏❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; HTML代码 : <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial…