2022年 7 月 04日- (星期一) / Published in css 设计, html 设计, javascript 设计, 前端设计

CSS3 html 制作多文本动画/个文本幻灯片cid1128-网页前端设计

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Splash and Coming Soon Page Effects with CSS3</title>
         
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
      <style>
        
        body {
  background-image: url(1.jpg);
        height: 100vh;
            background-size: cover;
            background-position: center;
  font-family: 'MisoRegular';
}
h1.main,p.demos {	 
  animation-delay: 8s;
}
.sp-container {
  width: 900px;
  height: 400px;
  position: relative;
  margin: 190px auto 0px 40px;
}
.sp-content {
  width: 100%;
  height: 400px;
  position: relative;	 
  animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
}
.sp-content:after {
  content: '';
  width: 4px;
  background: #000;
  height: 100%;
  position: absolute;
  left: 50%;
}
.sp-container h2 {
  color: #000;
  text-shadow: 0px 0px 1px rgba(0,0,0,0.9);
}
.sp-wrap {
  width: 400px;
  padding: 0px 25px;
  height: 100%;
  text-align: right;
  font-size: 70px;
  line-height: 80px;
  float: left;
  position: relative;
   
  overflow: hidden;
}
.sp-wrap span {
  display: block;
   	 
  filter: alpha(opacity=0);
  opacity: 0;
}
.sp-wrap span.sp-mid { 
  filter: alpha(opacity=100);
  opacity: 1;
}
.sp-container .sp-right h2 {
  color: #fff;
  text-shadow: 0px 0px 1px rgba(255,255,255,0.9);
}
.sp-wrap span.sp-mid {
  font-family: 'MisoBold';
  text-transform: uppercase;
  font-size: 160px;
  line-height: 130px;
  position: relative;
}
.sp-left span.sp-top { 
  animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
}
.sp-left span.sp-mid {	 
  animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
}
.sp-left span.sp-bottom {	 
  animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
}
.sp-right span {
  text-align: left;
}
.sp-right span.sp-top {	 
  animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
}
.sp-right span.sp-mid { 
  animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
}
.sp-right span.sp-bottom {	 
  animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
}
.sp-wrap i {
  position: absolute;
 
  width: 60px;
}
 
.sp-wrap i:last-child {	
  filter: alpha(opacity=0);
  opacity: 0;	 
  animation: fadeOut 1s linear 6s backwards;
}
.sp-full {
  position: absolute;
  font-size: 67px;
  top: 142px;
  width: 700px;
  left: 145px;	 
  animation: fadeIn 1s linear 6.6s backwards;
}
.sp-full a {
  background: #000;
  color: #fff; 
  border-radius: 4px;
  padding: 10px 40px;
  display: inline-block;
  font-size: 40px;
  margin-top: 40px;	 
  animation: zoomIn 0.7s ease-in-out 7s backwards;
}
.sp-full h2 {
  width: 400px;
  padding: 0px 50px 0px 0px;
  float: left;
  text-align: right;
}
.sp-full a:hover {	 
  filter: alpha(opacity=80);
  opacity: 0.8;
}
 
 
@keyframes open{
  0%{
    transform: scale(1,0);
  }
  100%{
    transform: scale(1,1);
  }
}
@keyframes squeeze{
  0%{
    height: 400px;
  }
  100%{
    height: 120px;
  }
}
@keyframes fadeOut{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes slideLeft{
  0%{
    transform: translateX(120%);
  }
  100%{
    transform: translateX(0%);
  }
}
@keyframes slideRight{
  0%{
    transform: translateX(-120%);
  }
  100%{
    transform: translateX(0%);
  }
}
@keyframes moveUp{
  0%{
    transform: translateY(0px);
  }
  100%{
    transform: translateY(-170px);
  }

}
@keyframes zoomIn{
  0%{
    transform: scale(0);
  }
  100%{
    transform: scale(1);
  }
}
          
          
        </style>
    </head>
    <body>
        <div class="container">
          
      <div class="sp-container">
        <div class="sp-content">
          <div class="sp-wrap sp-left">
            <h2>
              <span class="sp-top">What if you wouldn't Learn</span> 
              <span class="sp-mid">CSS 3</span> 
              <span class="sp-bottom">anymore?</span>
            </h2>
          </div>
          <div class="sp-wrap sp-right">
            <h2>
              <span class="sp-top">Wouldn't that be absolutely</span> 
              <span class="sp-mid">great <i>?</i></span> 
              <span class="sp-bottom">Yeah, it would!</span> 
            </h2>
          </div>
        </div>
        <div class="sp-full">
          <h2>A good way to get rid of !</h2>
          <a href="">LEARN TODAY!</a>
        </div>
      </div>
        </div>
    </body>
</html>

让链接同时具备两种打开方式