html css期末大作业 （无偿提供完整代码）人物介绍

html css期末大作业 （人物介绍）

---

一、完整源码获取

https://drive.uc.cn/s/f1e0070021a94

二、演示视频

人物介绍

1.效果图

三、主题代码

该功能实现主要是对卡片的运用，在加以动画，实现在使用时有网页的动态效果
上代码

 <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
      .main{
        width: 80%;
        height: 100%;
        margin: auto;
        border: 1px black solid;
      }
      .tou img{
        display: block;
          width: 100%;
          height: 200px;
          margin: auto;
      }
      .font img{
    width: 100%;
    height: 150px;
    margin-top: 40px;
}
.n1{
        list-style: none;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 60px;
      }
      .n1 li{
        line-height: 60px;
      }

      .n1 li a{
        text-decoration: none;
      }
      .card {
  width: 190px;
  height: 120px;
  padding: 0.5rem;
  border-radius: 8px;
  backdrop-filter: blur(5px);
  border-bottom: 3px solid rgba(255, 255, 255, 0.440);
  border-left: 2px  rgba(255, 255, 255, 0.545) outset;
  box-shadow: -40px 50px 30px rgba(0, 0, 0, 0.280);
  transform: skewX(10deg);
  transition: .4s;
  overflow: hidden;
  color: white;
}
.card1{
    background-image: url(./image/da.jpg);
    background-position: center;
    background-size: 100% 100%;
}
.card2{
    background-image: url(./image/do.jpg);
    background-position: center;
    background-size: 100% 100%;
}
.card3{
    background-image: url(./image/gang.jpg);
    background-position: center;
    background-size: 100% 100%;
}
.card4{
    background-image: url(./image/jing.jpg);
    background-position: center;
    background-size: 100% 100%;
}
.card5{
    background-image: url(./image/xiao.jpg);
    background-position: center;
    background-size: 100% 100%;
}
.card:hover {
  height: 254px;
  transform: skew(0deg);
}

.align {
  padding: 1rem;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-self: flex-start;
}

.red {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff605c;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
}

.yellow {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffbd44;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
}

.green {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00ca4e;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
}

.card h1 {
  text-align: center;
  margin: 1.3rem;
  color: rgb(218, 244, 237);
  text-shadow: -10px 5px 10px rgba(0, 0, 0, 0.573);
}

.cc{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}


h4{
		   text-align:center; 
		   color:#00FFFF; 
		   font-size:40px; 
		   -webkit-transform-style:preserve-3d;            
		   -webkit-animation:run  ease-in-out 9s infinite;    
		}
		@-webkit-keyframes run{                            
		   0%{
		      -webkit-transform:rotateX(-5deg) rotateY(0);
		   }
		   50%{
		      -webkit-transform:rotateX(0) rotateY(180deg);
		   }
		   100%{
		      -webkit-transform:rotateX(5deg) rotateY(360deg);
		   }

		}
p{
    color: #00FFFF;
}
button {
  --width: 100px;
  --timing: 2s;
  border: 0;
  width: var(--width);
  padding-block: 1em;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
 background-image: url(./image/6.jpg);
  transition: all 0.2s;
  border-radius: 50%;
}

button:hover {
  background-image: linear-gradient(to right, rgb(250, 82, 82), rgb(250, 82, 82) 16.65%, rgb(190, 75, 219) 16.65%, rgb(190, 75, 219) 33.3%, rgb(76, 110, 245) 33.3%, rgb(76, 110, 245) 49.95%, rgb(64, 192, 87) 49.95%, rgb(64, 192, 87) 66.6%, rgb(250, 176, 5) 66.6%, rgb(250, 176, 5) 83.25%, rgb(253, 126, 20) 83.25%, rgb(253, 126, 20) 100%, rgb(250, 82, 82) 100%);
  animation: var(--timing) linear dance6123 infinite;
  transform: scale(1.1) translateY(-1px);
}

@keyframes dance6123 {
  to {
    background-position: var(--width);
  }
}
    </style>

四、总结

今天记录到这里了，需要完整代码的自取。