前端特效学习5

用户7162790

发布于 2022-03-23 14:35:15

3330

效果图

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换特效</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <input type="radio" name="select" id="slide_1" checked>
            <input type="radio" name="select" id="slide_2">
            <input type="radio" name="select" id="slide_3">
            <input type="radio" name="select" id="slide_4">
            <input type="radio" name="select" id="slide_5">
            <div class="slider">
                <label for="slide_1" class="slide slide_1"></label>
                <label for="slide_2" class="slide slide_2"></label>
                <label for="slide_3" class="slide slide_3"></label>
                <label for="slide_4" class="slide slide_4"></label>
                <label for="slide_5" class="slide slide_5"></label>
            </div>
            <div class="inner_part">
                <label for="slideImg" class="img">
                    <img class="img_1" src="http://p6.qhimg.com/bdm/1024_768_85/t01f06956f127bfd1c8.jpg">
                </label>
            </div>
            <div class="inner_part">
                <label for="slideImg" class="img">
                    <img class="img_2" src="http://p5.qhimg.com/bdm/1024_768_85/t017a2749af9ea8c00e.jpg">
                </label>
            </div>
            <div class="inner_part">
                <label for="slideImg" class="img">
                    <img class="img_3" src="http://p1.qhimg.com/bdm/1024_768_85/t01434cf14f1923aac2.jpg">
                </label>
            </div>
            <div class="inner_part">
                <label for="slideImg" class="img">
                    <img class="img_4" src="http://p9.qhimg.com/bdm/1024_768_85/t01678c7fa1f713fb19.jpg">
                </label>
            </div>
            <div class="inner_part">
                <label for="slideImg" class="img">
                    <img class="img_5" src="http://p4.qhimg.com/bdm/1024_768_85/t014fff6ed91935cd74.jpg">
                </label>
            </div>
        </div>
    </div>
</body>
</html>

css代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #cecece;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  position: absolute;
  height: 768px;
  width: 100%;
  max-width: 1024px;
  margin: auto;
  border-radius: 10px;
}

.card .inner_part {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 768px;
  position: absolute;
}

.inner_part .img {
  height: 768px;
  width: 1024px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 10px;
  box-shadow: inset 20px 16px 20px 0px rgb(0 0 0 / 21%);;
}

.img img {
  opacity: 0;
  transition: .6s;
}

#slide_1:checked ~ .inner_part .img_1,
#slide_2:checked ~ .inner_part .img_2,
#slide_3:checked ~ .inner_part .img_3,
#slide_4:checked ~ .inner_part .img_4,
#slide_5:checked ~ .inner_part .img_5 {
  opacity: 1;
  transition-delay: 0.2s;
}

.slider {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

#slideImg:checked ~ .slider {
  display: none;
}

.slider .slide {
  position: relative;
  height: 10px;
  width: 50px;
  background: #d9d9d9;
  border-radius: 5px;
  display: inline-flex;
  margin: 0 3px;
  cursor: pointer;
}

input {
  display: none;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css