js+css实现多个单词反向显示切换动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js+css实现多个单词反向显示切换动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
/* Add your CSS here */
.wrapper {
  --anadrome-rotate: 0turn;
  --anadrome-letter-rotate: 0turn;
  --anadrome-duration: 1000ms;
  --anadrome-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anadrome-letter-size: 30px;
  --anadrome-font-size: 1rem;
  --anadrome-letter-gap: 1.5rem;
  --anadrome-pivot-size: 10px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

pre {
  /*display: none;*/
  max-width: 42ch;
  text-align: left;
  white-space: pre-wrap;
  font-size: clamp(0.8rem, 2.5vw - .25rem, .9rem);
  font-family: "Courier New", Courier, monospace;
}
h1 {
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: clamp(1.2rem, 2.5vw - .05rem, 1.4rem);
}

.controls {
  --controls-bg: #000;
  --controls-txt: #FFF;
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.wrapper:has(#btn-rotate:checked) {
  --anadrome-rotate: 180deg;
  --anadrome-letter-rotate: -180deg;
  --checked-scale: -1 1;
  --checked-bg: hotpink;
}

.controls > * {
  position: relative;
  width: 50px;
  height: 50px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  padding: 1rem;
  font-size: 1rem;
  background-color: var(--controls-bg);
  color: var(--controls-txt);
  border: none;
  outline: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 300ms ease;
}
.controls > *::before {
  content: attr(data-title);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, .5rem);
  text-wrap: nowrap;
  font-size: 0.8rem;
  opacity: var(--opacity, 0);
  translate: 0 var(--y, -1rem);
  transition: 300ms ease-in-out;
}
.controls > *:focus-visible,
.controls > *:hover {
  --controls-bg: #444;
  --opacity: 1;
  --y: 0;
  --rotate: 360deg;
}
.controls > svg .line{
  transition: 300ms ease-in-out;
}
.controls > *:hover svg .line{
  color: steelblue;
}

.controls > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--checked-bg,var(--controls-bg));
}
.controls > input[type="checkbox"]::after {
  content: "\293E";
  color: var(--controls-txt);
  font-size: 1.3rem;
  transition: 300ms linear;
  rotate: var(--rotate,0deg);
  scale: var(--checked-scale, 1);
}

.anadrome {
  
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--anadrome-letter-gap);
  transition: rotate var(--anadrome-duration) var(--anadrome-easing);
  z-index: 2;
  rotate: var(--anadrome-rotate);
}
.anadrome::before,
.anadrome::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: -1;
  transition: all var(--anadrome-duration) ease-in-out;
}
/* background line */
.anadrome::before{
  left: 0;
  width: 100%;
  translate: 0 -50%;
  scale: var(--bg-line-scale, 100%) 1;
  transform-origin: center;
  height: 1px;
  border-bottom: 1px dashed white;
}
/* pivot point */
.anadrome::after {
  left: 50%;
  translate: -50% -50%;
  width: var(--anadrome-pivot-size);
  height: var(--anadrome-pivot-size);
  background-color: white;
  z-index: -1;
  border-radius: 50%;
}
/* Letters */
.anadrome > span {
  position: relative;
  background-color: steelblue;
  color: white;
  padding: 1rem;
  width: var(--anadrome-letter-size);
  height: var(--anadrome-letter-size);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border-radius: 50%;
  font-size: var(--anadrome-font-size);
  font-weight: 800;
  font-family: monospace;
  transform-origin: center;
  transition: all var(--anadrome-duration) var(--anadrome-easing);
  rotate: var(--anadrome-letter-rotate);
  cursor: none;
  pointer-events: none;
}
@media (min-width: 500px){
  .wrapper{
      --anadrome-letter-size: 60px;
      --anadrome-font-size: 2rem;
      --anadrome-letter-gap: 1.5rem;
      --anadrome-pivot-size: 12px;
  }
}
@media (min-width: 900px){
  .wrapper{
      --anadrome-letter-size: 90px;
      --anadrome-font-size: 3rem;
      --anadrome-letter-gap: 3rem;
      --anadrome-pivot-size: 15px;
  }
}


/* general styling */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --clr-bg: #222;
  --clr-primary: #f5f5f5;
  --clr-secondary: #075985;
}
html {
  background-color: var(--clr-bg);
  font-family: system-ui;
}
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  /*font-size: clamp(0.9rem, 2.5vw,1.4rem);*/
  color: var(--clr-primary);
  padding: 1rem;
  background-image: radial-gradient(
    circle,
    rgba(175, 208, 84, 0.25) 1px,
    rgba(0, 0, 0, 0) 1px
  );
  background-size: 40px 40px;
}

body::after {
  content: "";
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 32px;
  height: 32px;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1"><g id="surface1"><path fill="rgb(175, 208, 84)" d="M 47.894531 0.789062 C 46.320312 0.878906 45.480469 0.949219 44.601562 1.042969 C 37.023438 1.863281 29.746094 4.394531 23.386719 8.414062 C 20.214844 10.421875 17.402344 12.65625 14.757812 15.285156 C 7.773438 22.222656 3.027344 30.992188 1.113281 40.5 C -0.460938 48.332031 -0.132812 56.378906 2.070312 64.003906 C 4.0625 70.890625 7.507812 77.195312 12.277344 82.675781 C 16.65625 87.714844 22.109375 91.898438 28.074219 94.804688 C 37.914062 99.59375 49.078125 101.03125 59.875 98.886719 C 69.480469 96.976562 78.265625 92.300781 85.253906 85.371094 C 92.304688 78.386719 97.027344 69.65625 98.960938 60.039062 C 99.636719 56.675781 99.902344 53.996094 99.902344 50.285156 C 99.902344 47.910156 99.855469 46.925781 99.660156 45.128906 C 98.671875 35.808594 95.136719 27.136719 89.324219 19.773438 C 86.917969 16.722656 83.851562 13.675781 80.777344 11.285156 C 75.664062 7.304688 69.949219 4.410156 63.695312 2.628906 C 60.5625 1.742188 57.058594 1.128906 53.609375 0.867188 C 52.796875 0.804688 48.566406 0.746094 47.894531 0.789062 Z M 54.105469 24.300781 C 54.105469 24.355469 53.550781 25.921875 52.875 27.773438 L 51.636719 31.148438 L 41.390625 31.148438 C 34.375 31.148438 31 31.167969 30.683594 31.210938 C 27.867188 31.601562 25.414062 33.695312 24.371094 36.621094 C 24.054688 37.503906 23.910156 38.265625 23.83.........完整代码请登录后点击上方下载按钮下载查看