Multi level expansion menu based on Bootstrap layout

Tutorial address: Original address (YouTube)

Tutorial of station B: Original reprint (bilibili bili)

The content of the two videos is the same, and the second is reprint

Design sketch

Code area

html

<div class="container">
		<div class="row">
			<div class="col-md-4">
				<div class="main">
					<div class="service">
						<div class="service-logo">
							<img src="img/android.svg">
						</div>
						<h4>App Disign</h4>
						<p>Mobile app (English: mobile application，Abbreviation mobile app,apps)，In mainland China and Taiwan APP(A P P Separate reading).</p>
					</div>
					<div class="shadowOne"></div>
					<div class="shadowTwo"></div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="main">
					<div class="service">
						<div class="service-logo">
							<img src="img/iPhone X.svg">
						</div>
						<h4>iPhone X</h4>
						<p>iPhone X Operating system use iOS 11，Adopted Apple A11 Bionic processor, with 6 processing cores: 2 high-performance cores, 4 high-efficiency power-saving cores and 3 Apple design images GPU. </p>
					</div>
					<div class="shadowOne"></div>
					<div class="shadowTwo"></div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="main">
					<div class="service">
						<div class="service-logo">
							<img src="img/world.svg">
						</div>
						<h4>world</h4>
						<p>In modern society, the word world means the pronoun of all things. Originally a Buddhist concept, the world is composed of "world" (time) and "world" (space),That is to say, everything consists of all time and space.</p>
					</div>
					<div class="shadowOne"></div>
					<div class="shadowTwo"></div>
				</div>
			</div>
		</div>
	</div>

CSS

* {
  margin: 0; /* Margin */
  padding: 0; /* padding */
  font-family: sans-serif; /* Typeface */
}
body {
  background-color: #007bff !important; /* Background color, weight level */
}
h1 {
  text-align: center; /* Font centered */
  margin: 50px auto 120px !important;
  color: #fff; /* Font color */
}
.main {
  width: 100%; /* width */
  min-height: 380px; /* Minimum height */
  text-align: center; /* Font centered */
  position: relative; /* Relative positioning */
  cursor: pointer; /* Mouse style */
}
.service {
  width: 100%;
  background: #fff;
  padding: 30px;
  border-radius: 10px; /* Border fillet */
  position: absolute; /* Absolute positioning */
  bottom: 0; /* From bottom */
  z-index: 1; /* Stacking sequence */
  box-shadow: 0 0 20px -15px #030380; /* Box shadow */
  transition: transform 0.8s; /* Transition time */
}
.service-logo {
  box-sizing: border-box;
  width: 136px;
  line-height: 100px; /* Row height */
  border-radius: 50%;
  margin: -90px auto 0;
  background-color: #fff;
  border: 18px solid #007bff;
  transition: 1s;
}
.service-logo img {
  width: 50%;
  vertical-align: middle; /* Vertical alignment */
  margin: auto;
}
.service h4 {
  height: 35px;
  widows: 70%;
  background: #fff;
  margin: 50px auto;
  position: relative;

}

.service h4::after { /* Then add */
  content: ''; /* content */
  width: 40px;
  height: 30px;
  background: linear-gradient(to right, #fff, #007bff); /* Gradual background */
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: -1;
}

.service h4::before { /* Before adding */
  content: '';
  width: 40px;
  height: 30px;
  background: linear-gradient(to right, #007bff, #fff);
  position: absolute;
  left: -5px;
  bottom: -5px;
  z-index: -1;
}

.shadowOne {
  background: #fff;
  position: absolute;
  border-radius: 10px;
  top: 40%;
  bottom: 0;
  right: 10%;
  left: 10%;
  z-index: -1;
  box-shadow: 0 0 20px -15px #030380;
  transition: transform 0.8s;
}
.shadowTwo {
  background: #fff;
  position: absolute;
  border-radius: 10px;
  top: 40%;
  bottom: 0;
  right: 18%;
  left: 18%; 
  z-index: -2;
}
.main:hover .service {
  transform: translateY(-50px); /* Y Shaft movement */
}
.main:hover .shadowOne {
  transform: translateY(-25px);
}
.main:hover  .service-logo{
  transform: rotateZ(-360deg);
}

JS

Tutorial address: Original address (YouTube)

Tutorial of station B: Original reprint (bilibili bili)