Focus!
07/12/2022
[html]
<style>
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow: hidden;
height: 450px;
width: 750px;
}
.bg {
position: relative;
overflow: hidden;
height: 100vh;
}
.bg div {
position: relative;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 101%;
height: 102%;
background: url("https://sm.ign.com/ign_ap/gallery/t/the-mandal/the-mandalorian-cara-dunes-funko-pop-reveal_wymk.jpg") center no-repeat;
background-size: cover;
-webkit-filter: blur(7px);
}
.lens {
position: absolute;
top: 50%;
left: 50%;
width: 275px;
height: 275px;
border-radius: 50%;
background: url("https://sm.ign.com/ign_ap/gallery/t/the-mandal/the-mandalorian-cara-dunes-funko-pop-reveal_wymk.jpg") center no-repeat fixed;
background-size: cover;
z-index: 2;
cursor: none;
}
.lens span:nth-child(1) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(1) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(2) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(48deg);
transform: rotate(48deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(2) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(3) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(72deg);
transform: rotate(72deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(3) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(4) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(96deg);
transform: rotate(96deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(4) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(5) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(5) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(6) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(6) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(7) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(168deg);
transform: rotate(168deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(7) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(8) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(192deg);
transform: rotate(192deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(8) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(9) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(216deg);
transform: rotate(216deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(9) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(10) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(10) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(11) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(264deg);
transform: rotate(264deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(11) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(12) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(288deg);
transform: rotate(288deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(12) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(13) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(312deg);
transform: rotate(312deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(13) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(14) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(336deg);
transform: rotate(336deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(14) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(15) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(15) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lens span:nth-child(16) {
position: absolute;
top: -22px;
left: 113px;
height: 165px;
width: 50px;
-webkit-transform: rotate(384deg);
transform: rotate(384deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.lens span:nth-child(16) div {
position: absolute;
width: 100%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
<div class="bg">
<div></div>
</div>
<div class="lens" style="border: 2px #ccc solid">
</div>
<script>
$(document).ready(function() {
var $lens = $('.lens'),
lensWHalf = $lens.width() / 2;
$(document).on('mousemove', function(e) {
$lens.css({
//Subtract half width of the container, so cursor would be right in the center
"left": e.pageX - lensWHalf,
"top": e.pageY - lensWHalf
});
})
})</script>
[/html]
Alexandra Brown \\ Juan Rivera
Отредактировано Juan Rivera (2023-01-15 02:28:19)