Camera click

Developer
António Capelo
Size
1,963 Kb
Views
10,120
  1. Camera click Previews
  2. Camera click HTML Codes
  3. Camera click CSS Codes
  4. Camera click JS Codes

How do I make an camera click?

What is a camera click? How do you make a camera click? This script and codes were developed by António Capelo on 15 December 2022, Thursday.

Camera click Previews
IQ Test

Camera click - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Camera click</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="camera"> <div class="top"></div> <div class="button"></div> <div class="lens"> <div class="eye"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Camera click - Script Codes CSS Codes

.camera { margin-top: 30px; width: 280px; height: 150px; background: black; border-radius: 5px; position: relative; border: 1px solid black;
}
.camera .button { width: 10px; height: 12px; background: white; position: absolute; left: 10px; top: -12px; border: 2px solid black; z-index: -1; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5 linear;
}
.camera.on .button { -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%);
}
.camera .lens { width: 100px; height: 100px; background: white; position: absolute; right: 30px; bottom: 20px; border-radius: 50%; border: 5px solid #1d1f20;
}
.camera .lens .eye { width: 10px; height: 10px; background: white; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translateY(-50%,-50%); border-radius: 50%; border: 8px solid #1d1f20; -webkit-transition: all 0.5s linear; -moz-transition: all 05s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;
}
.camera.on .eye { width: 2px; height: 2px; background: black;
}
.camera .top { box-sizing: border-box; width: 276px; height: 50px; background: white; position: absolute; left: 2px; top: 2px; background: white;
}

Camera click - Script Codes JS Codes

$(document).ready(function() { $('.camera').addClass('on');
})
Camera click - Script Codes
Camera click - Script Codes
Home Page Home
Developer António Capelo
Username capelo
Uploaded December 15, 2022
Rating 3
Size 1,963 Kb
Views 10,120
Do you need developer help for Camera click?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

António Capelo (capelo) Script Codes
Name
8-Bit Avatar
Brainerd scroller
Analog Clock
AngularJS Modal Factory
ToDo
Clock loading
Full-width slider.
Menu with following underline
Gif as page background
React Boilerplate
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!