📸 Use This Code & Create A Camera 📸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Camera 📸 </title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
.container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
background: #ee82ee;
}
.camera {
position: relative;
display: grid;
place-items: center;
width: 500px;
height: 350px;
background: #fff025;
border-radius: 20px;
box-shadow: 5px 5px 2px #98def7;
}
.camera::before {
content: "";
position: absolute;
top: 30px;
left: 30px; nb
width: 10px;
height: 10px;
border-radius: 50%;
background: #6f3445;
}
.circle {
position: relative;
display: grid;
place-items: center;
width: 150px;
height: 150px;
border-radius: 50%;
background: #21ff3f;
box-shadow: 5px 5px 2px rgba(0,0,0,0.2);
z-index: 9;
transition: .5s;
}
.circle::before {
content: "";
position: absolute;
top: 2.5px;
left: 2.5px;
width: calc(100% - 5px);
height: calc(100% - 5px);
z-index: 2;
border-radius: 50%;
background: linear-gradient(130deg, rgba(255,255,255,0.3) 50%, transparent 50%);
}
.inner1 {
position: relative;
display: grid;
place-items: center;
width: 110px;
height: 110px;
border-radius: 50%;
background: #384a5f;
}
.inner2 {
position: relative;
display: grid;
place-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
background: #2d3e4e;
}
.inner3 {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
background: #232f3f;
}
.inner3::before {
content: "";
right: 10px;
bottom: 15px;
position: absolute;
width: 15px;
height: 15px;
background: #414d5b;
border-radius: 50%;
}
.colors {
display: grid;
position: absolute;
right: 0;
width: 50%;
height: 40px;
}
.colors div:nth-child(1) {
background: #f6027b;
}
.colors div:nth-child(2) {
background: #e0930f;
}
.colors div:nth-child(3) {
background: #fec700;
}
.colors div:nth-child(4) {
background: #dcE86a;
}
.colors div:nth-child(5) {
background: #3ba12d;
}
.colors div:nth-child(6) {
background: #018cc6;
}
.top {
position: absolute;
top: -8px;
left: 30px;
width: 60px;
height: 8px;
border-radius: 12px 12px 0 0;
background: #005;
transition: .5s;
}
.top2 {
display: grid;
place-items: center;
position: absolute;
top: -20px;
width: 60px;
height: 20px;
border-radius: 8px 8px 0 0;
background: #369860;
}
.top2 .box {
width: 40%;
height: 65%;
border-radius: 2px;
background: #7295b3;
}
.top.press {
top: -4px;
height: 4px;
}
.circle.rotate {
transform: rotate(-90deg);
}
.flash {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.5);
z-index: 20;
opacity: 0;
pointer-events: none;
}
.flash.show {
animation: flash .5s linear 1;
}
@keyframes flash {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="camera">
<div class="circle">
<div class="inner1">
<div class="inner2">
<div class="inner3"></div>
</div>
</div>
</div>
<div class="colors">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="top"></div>
<div class="top2">
<div class="box"></div>
</div>
<div class="flash"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script>
swal("Click on Camera 📸 Button to Take Picture");
const $ = s => document.querySelector(s);
$(".top").addEventListener("click", ()=>{
$(".top").classList.add("press");
$(".circle").classList.add("rotate");
setTimeout(() => {
$(".top").classList.remove("press");
$(".circle").classList.remove("rotate");
$(".flash").classList.add("show");
}, 500);
setTimeout(() => {
$(".flash").classList.remove("show");
swal("Hello Guys Use This Camera & Fun With It","I Hope That U All Guys Like To This Camera & Also Enjoy With It");
}, 1000)
})
</script>
</body>
</html>
OUTPUT
Posts
52 Comments
Wow
ReplyDeleteAmazing 😕😕😕
ReplyDeleteWowwww
ReplyDeleteKallu
ReplyDeleteVery beautiful
Waw
ReplyDeleteAmazing
ReplyDeleteWah
ReplyDeleteNice post
ReplyDeleteWow Awsm
ReplyDeleteMind Blowing
ReplyDeleteWonderful
ReplyDeleteperfect
Perfect 👌
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeleteNicely done
Amazing
ReplyDeleteAmazing
ReplyDeletePerfect 👌
Perfect 👌
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeleteGreat
ReplyDeletePerfect 👌
ReplyDeleteNice work
ReplyDeletePerfect 👌
ReplyDeleteGood Program
ReplyDeletePerfect 👌
ReplyDeleteNice Camera 📸 Guys
ReplyDeletePerfect 👌
ReplyDeleteAmazing
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeletesuperb
ReplyDeleteVery Good
ReplyDeletePerfect 👌
ReplyDeleteSuper
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeleteAmazing
ReplyDeleteAwsm
ReplyDeleteInteresting
ReplyDeleteGood Job
ReplyDeleteSuper
ReplyDeletegreat
ReplyDeleteinteresting
ReplyDeleteWowww
ReplyDeleteWow
ReplyDeleteKallu
ReplyDeleteWow
wow amazing
ReplyDeletewow amazing
ReplyDeleteSuper se bhi upar
ReplyDelete