Как сделать эффект лупы CSS

Question

Есть такие часы, примерно.
Я пытаюсь понять, как можно было бы сделать этот эффект лупы, ничего не приходит в голову

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
*,
*::before,
*::after {
  box-sizing: inherit;
}

:root {
  box-sizing: border-box;
  --black: rgb(29, 29, 29);
  --white: white;
  --bgColorMain: var(--white);
  --colorMain: var(--black);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bgColorMain: var(--black);
    --colorMain: var(--white);
  }
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  background-color: var(--bgColorMain);
  color: var(--colorMain);
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock {
  font-size: 1.5em;
  display: flex;
}

.clock__line {
  color: var(--bgColorMain);
  border-radius: 5px;
}

.clock__line-item {
  padding: 0.5em 0.7em;
  position: relative;
}

.clock__line-item::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--colorMain);
  z-index: -1;
  opacity: 0.8;
}

.clock__line-item::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(1.5);
  box-shadow: 0px 0px 20px 0px rgba(2, 3, 3, 0.8);
  /* filter: blur(10px); */
  opacity: 0;
}

.clock__line-item_active::before {
  opacity: 1;
}

.clock__line-item_active::after {
  opacity: 1;
}

<div class="clock">
  <div class="clock__line">
    <div class="clock__line-item clock__line-item_active">0</div>
    <div class="clock__line-item">1</div>
    <div class="clock__line-item">2</div>
  </div>
</div>

Answer 1

Можно шрифт увеличить, к примеру.

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
*,
*::before,
*::after {
  box-sizing: inherit;
}

:root {
  box-sizing: border-box;
  --black: rgb(29, 29, 29);
  --white: white;
  --bgColorMain: var(--white);
  --colorMain: var(--black);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bgColorMain: var(--black);
    --colorMain: var(--white);
  }
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  background-color: var(--bgColorMain);
  color: var(--colorMain);
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock {
  font-size: 1.5em;
  display: flex;
}

.clock__line {
  color: var(--bgColorMain);
  border-radius: 5px;
}

.clock__line-item {
  padding: 0.5em 0.7em;
  position: relative;
}

.clock__line-item::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--colorMain);
  z-index: -1;
  opacity: 0.8;
}

.clock__line-item::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(1.5);
  box-shadow: 0px 0px 20px 0px rgba(2, 3, 3, 0.8);
  /* filter: blur(10px); */
  opacity: 0;
}

.clock__line-item_active::before {
  opacity: 1;
}

.clock__line-item_active::after {
  opacity: 1;
}

.clock__line-item_active {
  font-size: 2rem;
  font-weight: bold;
  filter: blur(1px);
}

<div class="clock">
  <div class="clock__line">
    <div class="clock__line-item clock__line-item_active">0</div>
    <div class="clock__line-item">1</div>
    <div class="clock__line-item">2</div>
  </div>
</div>

Или же, если цифры внутри взять в тег какой-нибудь, можно прямо их деформировать.

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
*,
*::before,
*::after {
  box-sizing: inherit;
}

:root {
  box-sizing: border-box;
  --black: rgb(29, 29, 29);
  --white: white;
  --bgColorMain: var(--white);
  --colorMain: var(--black);
}

@media (prefers-color-scheme: dark) {
   :root {
    --bgColorMain: var(--black);
    --colorMain: var(--white);
  }
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  background-color: var(--bgColorMain);
  color: var(--colorMain);
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock {
  font-size: 1.5em;
  display: flex;
}

.clock__line {
  color: var(--bgColorMain);
  border-radius: 5px;
}

.clock__line-item {
  padding: 0.5em 0.7em;
  position: relative;
}

.clock__line-item::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--colorMain);
  z-index: -1;
  opacity: 0.8;
}

.clock__line-item::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(1.5);
  box-shadow: 0px 0px 20px 0px rgba(2, 3, 3, 0.8);
  /* filter: blur(10px); */
  opacity: 0;
}

.clock__line-item_active::before {
  opacity: 1;
}

.clock__line-item_active::after {
  opacity: 1;
}

.clock__line-item_active>div {
  transform: scale(1.6);
  filter: blur(0.8px) drop-shadow(0 0 0.5rem black);
}

<div class="clock">
  <div class="clock__line">
    <div class="clock__line-item clock__line-item_active">
      <div>0</div>
    </div>
    <div class="clock__line-item">
      <div>1</div>
    </div>
    <div class="clock__line-item">
      <div>2</div>
    </div>
  </div>
</div>

Answer 2

Пришел в голову такой вариант, увеличение поставил на :hover для наглядности изменений в динамике

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
*,
*::before,
*::after {
  box-sizing: inherit;
}

:root {
  box-sizing: border-box;
  --black: rgb(29, 29, 29);
  --white: #e9e8e8;
  --bgColorMain: var(--white);
  --colorMain: var(--black);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bgColorMain: var(--black);
    --colorMain: var(--white);
  }
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  background-color: var(--bgColorMain);
  color: var(--colorMain);
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock {
  font-size: 1.5em;
  display: flex;
}

.clock__line {
  color: var(--bgColorMain);
  border-radius: 5px;
}

.clock__line-item {
  padding: 0.5em 0.7em;
  position: relative;
  height: 50px;
}

.clock__line-item::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--colorMain);
  z-index: -1;
  opacity: 0.8;
}

.clock__line-item:hover::after {
  content: attr(data-num);
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  width: 100%;
  text-align: center;
  border-radius: 50%;
  transform: scale(1.5);
  height: 100%;
  max-height: 75px;
  box-shadow: 0px 0px 20px 0px rgb(2 3 3 / 80%);
  opacity: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--white);
}

.clock__line-item:hover {
  opacity: 1;
  color: transparent;
}

.clock__line-item::before {
  opacity: 1;
}

.clock__line-item:hover::after {
  opacity: 1;
}

<div class="clock">
    <div class="clock__line">
      <div class="clock__line-item clock__line-item_active" data-num="0">0</div>
      <div class="clock__line-item" data-num="1">1</div>
      <div class="clock__line-item" data-num="2">2</div>
    </div>
  </div>

Answer 3

Я отчётливо увидел в этом часы и мне захотелось это реализовать.

const clock = document.querySelector('.clock');
const nums = clock.querySelectorAll('.clock__nums');

const tick = () => {
    const D = new Date();
    const f = (''+D.getHours()).padStart(2, '0')+(''+D.getMinutes()).padStart(2, '0')+(''+D.getSeconds()).padStart(2, '0');
    
    [...nums].map((el, i) => {
        const old = el.querySelector('.clock__nums--active');
        if(old) old.classList.remove('clock__nums--active');
        
        el.style.transform = `translateY(-${+f[i] / el.children.length * 100}%)`
        el.style.transitionDuration = `${i * 100}ms`;
        
        el.children[+f[i]].classList.add('clock__nums--active');
    });
};

tick();
setInterval(tick, 1000);

@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap';
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  margin: 0;
  background-color: #111;
}
.clock {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 40px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #ccc;
  position: relative;
}
.clock__item {
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.clock__item + .clock__item {
  margin-left: 15px;
}
.clock__item::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(0.5px);
          backdrop-filter: blur(0.5px);
  box-shadow: 1px 1px 1px -1px rgba(255,255,255,0.75) inset, -1px -1px 1px -1px rgba(0,0,0,0.75) inset, 5px 5px 10px -5px rgba(0,0,0,0.2);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.clock__nums {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: #333;
  transition-property: transform;
}
.clock__nums span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: inherit;
  transition-property: font-size, color;
}
.clock__nums--active {
  font-size: 120%;
  font-weight: 500;
  color: #fff;
}
.clock__sep {
  display: block;
  width: 20px;
}

<div class="clock">
  <div class="clock__item">
    <div class="clock__nums"><span>0</span><span>1</span><span>2</span>
    </div>
  </div>
  <div class="clock__item">
    <div class="clock__nums"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
    </div>
  </div>
  <div class="clock__sep"></div>
  <div class="clock__item">
    <div class="clock__nums"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
    </div>
  </div>
  <div class="clock__item">
    <div class="clock__nums"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
    </div>
  </div>
  <div class="clock__sep"></div>
  <div class="clock__item">
    <div class="clock__nums"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
    </div>
  </div>
  <div class="clock__item">
    <div class="clock__nums"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать эффект лупы CSS

Ответы (3 шт):