HTML/CSS[09天]惊艳的CSS交互动效

0

[09天]惊艳的CSS交互动效

阅读:230 时间:2022年05月25日

很多提高体验的交互效果,CSS就够了。一、加载进度完整代码:<!DOCTYPE html> <html lang="en"> <head>   <meta&nbs...

很多提高体验的交互效果,CSS就够了。

一、加载进度

chrome-capture.gif

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #1b2125;
  position: relative;
}

@keyframes anims {
  0% {
    box-shadow: 0 0 0 0px;
  }
  50% {
    box-shadow: 0 0 0 20px;
  }
  100% {
    box-shadow: 0 0 0 0px;
  }
}
.loading {
  display: flex;
  justify-content: space-between;
  width: 300px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 45%;
}
.loading i {
  animation: anims 0.8s linear infinite;
  display: block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: 0 0 0 0px;
}
.loading i:nth-child(1) {
  background-color: #26a4f8;
  color: rgba(38, 164, 247, 0.2);
  animation-delay: 0s;
}
.loading i:nth-child(2) {
  background-color: #26d9f8;
  color: rgba(38, 216, 247, 0.2);
  animation-delay: 0.1s;
}
.loading i:nth-child(3) {
  background-color: #26f8e7;
  color: rgba(38, 248, 231, 0.2);
  animation-delay: 0.2s;
}
.loading i:nth-child(4) {
  background-color: #26f8a1;
  color: rgba(38, 248, 161, 0.2);
  animation-delay: 0.3s;
}
.loading i:nth-child(5) {
  background-color: #26f865;
  color: rgba(38, 248, 101, 0.2);
  animation-delay: 0.4s;
}
.loading i:nth-child(6) {
  background-color: #3ef826;
  color: rgba(62, 248, 38, 0.2);
  animation-delay: 0.5s;
}
  </style>
</head>
<body>
<div class="loading">
  <i class="point"></i>
  <i class="point"></i>
  <i class="point"></i>
  <i class="point"></i>
  <i class="point"></i>
  <i class="point"></i>
</div>
</body>
</html>


二、掉落文字

chrome-capture (1).gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #1b2125;
  position: relative;
}

@keyframes anims {
  0% {
    box-shadow: 0 0 0 0px;
  }
  50% {
    box-shadow: 0 0 0 20px;
  }
  100% {
    box-shadow: 0 0 0 0px;
  }
}
.loading {
  display: flex;
  justify-content: space-between;
  width: 300px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 45%;
  color: #dce8f0;
}
.loading i {
  font-style: normal;
  display: inline-block;
  transform: translateY(-30px);
  opacity: 0.1;
}
.loading i.show {
  transition: 0.4s all ease-in;
  transform: translateX(0px);
  opacity: 1;
}
  </style>
</head>
<body >
<div class="loading">
  <p></p>
</div>
<script>
  const str = '这是一行漂亮的文字'.split('')
  const len = str.length
  let index = 1
  for(let i=0;i<len;i++) {
    const tag = document.createElement('i')
    tag.innerHTML = str[i]
    document.querySelector('p').appendChild(tag)    
  }
  function run() {
    setTimeout(() => {
      document.querySelector('p i:nth-child('+index+')').className = 'show'
      index++
      if (str.length >= index) {
        run()
      }
    }, 50)
  }
  run()
</script>
</body>
</html>

也可以用CSS animation animation-delay实现,为每个原素递增延时


三、反光玻璃按钮

chrome-capture (4).gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #1b2125;
  position: relative;
}

.loading {
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 45%;
  color: #dce8f0;
}

.button {
  border: 1px solid;
  color: #1ca4ff;
  z-index: 1;
  padding: 10px 40px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 8px 0px rgba(55, 175, 255, 0.3);
}
.button::before {
  transition: 0.5s all ease-in-out;
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  z-index: -1;
  left: 0;
  top: 0;
  background-image: linear-gradient(45deg, rgba(206, 236, 255, 0), rgba(206, 236, 255, 0.3), rgba(206, 236, 255, 0));
  transform: translateX(-100%);
}
.button:hover::before {
  transform: translateX(0);
}    
  </style>  
</head>
<body >
<div class="loading">
  <div class="button"><span>LENTON</span></div>
</div>

</body>
</html>


四、月食

chrome-capture (5).gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #1b2125;
  position: relative;
}

.loading {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 45%;
  color: #dce8f0;
  flex-wrap: wrap;
}

.moon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 5px 5px 10px #81f7ff inset, -5px -5px 20px #225558;
  transition: 1s all ease-in-out;
  cursor: pointer;
}
.moon:hover {
  box-shadow: 100px 100px 10px #81f7ff inset, 0px 0px 180px #81f7ff;
}

.text {
  width: 100%;
  margin-top: 40px;
  text-align: center;
  font-size: 12px;
  color: #2f5f63;
}    
  </style>
</head>
<body >
<div class="loading">
  <div class="moon"></div>
  <p class="text">THIS IS A MOON</p>
</div>

</body>
</html>


五、追随发光文本

chrome-capture (6).gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #1b2125;
  position: relative;
}

.loading {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 45%;
  flex-wrap: wrap;
  color: #57b3f0;
}
.loading span {
  animation: glow-in 0.8s both;
  display: inline-block;
  min-width: 6px;
}

@keyframes glow-in {
  from {
    opacity: 0;
  }
  65% {
    opacity: 1;
    text-shadow: 0 0 25px #cbfcff;
    color: #8cdeff;
  }
  75% {
    opacity: 1;
  }
  to {
    opacity: 0.7;
  }
}
  </style>
</head>
<body >
<div class="loading">
  Hi, Man. Welcome to ccued.com!
</div>
<script>
let glowInTexts = document.querySelectorAll(".loading");
glowInTexts.forEach(glowInText => {
  let letters = glowInText.textContent.split("");
  glowInText.textContent = "";
  letters.forEach((letter, i) => {
    let span = document.createElement("span");
    span.textContent = letter;
    span.style.animationDelay = `${i * 0.05}s`;
    glowInText.append(span);
  });
});  
</script>
</body>
</html>


六、仿3D文字

微信截图_20220525152608.jpg

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");
    html,body{
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    body{
      background-color: #1b2125;
      position: relative;
    }
    .loading{
      display: flex;
      justify-content: center;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top:45%;
      flex-wrap: wrap;
      color: #8adaff;
      font-family: "Baloo Bhaijaan", cursive;
      text-transform: uppercase;
      font-size: 96px;
      text-shadow: 0 8px 0 #3a8cb3, 0 12px 8px #021720;
    }    
  </style>
</head>
<body >
<div class="loading">
  Lenton
</div>
</body>
</html>


还有好多,有时间以后再补充

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^