<div class="first-title">服务项目</div>

.first-title {
  position: relative;
  color: #a98661;
  font-weight: 400;
  font-size: 30px;
  text-align: center;
}

.first-title::before,
.first-title::after {
  position: absolute;
  content: "";
  width: 110px;
  border-bottom: 1px solid #a98661;
  top: 50%;
  transform: translateY(-50%);
}

.first-title::before {
  left: 100px;
}

.first-title::after {
  right: 100px;
}

<div class="black-mask"></div>

.black-mask {
  position: relative;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.black-mask:hover {
  transition-duration: 1s;
  scale: 1.02;
}

.black-mask:hover:before {
  object-fit: cover;
}

.black-mask:hover:after {
  height: 100%;
  opacity: 1;
  transition-duration: 1s;
  display: flex;
  align-items: flex-end;
  padding: 0 30px 15px;
}

.black-mask::before {
  position: absolute;
  content: "";
  background: url(https://dcdn.it120.cc/2019/11/14/f17c5848-6d1f-4254-b3ba-64d3969d16b6.jpg) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}

.black-mask::after {
  position: absolute;
  content: "雾在微风的吹动下滚来滚去，像冰峰雪山，似蓬莱仙境，如海市蜃楼，使人觉得飘然欲仙。山河景色在雾的装点下，变得更加美丽。远处的七连山巍峨挺拔，它们仿佛成了神仙住的宝山，令人神往。近处池塘边时时飘来雾气，在初升阳光的照耀下，呈现出赤、橙、黄、绿、青、蓝、紫七种色彩。......";
  width: 90%;
  height: 0%;
  bottom: 0;
  right: 0;
  z-index: 32;
  background: rgba(0, 0, 0, 0.3);
  opacity: 1;
  color: #fff;
  opacity: 0;
  padding: 0 30px 0;
}

<div class="aperture">光圈</div>

.aperture {
  width: 136px;
  height: 136px;
  background-color: #dc5947;
  border-radius: 50%;
  line-height: 136px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  position: relative;
}

.aperture::before {
  border: 3px dashed #a0ff80;
  content: "";
  width: 144px;
  height: 144px;
  position: absolute;
  border-radius: 50%;
  left: -8px;
  top: -6px;
  animation: clockwise 5s linear infinite;
}

@keyframes clockwise {
  100% {
    transform: rotate(360deg);
  }
}

<div class="rainbow"></div>

.rainbow {
  position: relative;
  z-index: 0;
  width: 400px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;
}

.rainbow::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-color: #399953;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
  -webkit-animation: rotate 4s linear infinite;
  animation: rotate 4s linear infinite;
}

.rainbow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: white;
  border-radius: 5px;
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

<div class="corner-button">CSS3</div>

.corner-button::before, .corner-button::after {
  content: '';
  position: absolute;
  background: #2f2f2f;
  z-index: 1;
  transition: all 0.3s;
}
.corner-button::before {
  width: calc(100% - 3rem);
  height: calc(101% + 1rem);
  top: -0.5rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.corner-button::after {
  height: calc(100% - 3rem);
  width: calc(101% + 1rem);
  left: -0.5rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}


.corner-button:hover {
  color: pink;
}
.corner-button {
  font-family: 'Lato', sans-serif;
  letter-spacing: .02rem;
  cursor: pointer;
  background: transparent;
  border: 0.5rem solid currentColor;
  padding: 1.5rem 2rem;
  font-size: 2.2rem;
  color: #06c17f;
  position: relative;
  transition: color 0.3s;
  text-align: center;
  margin: 5rem 12rem;
}
.corner-button:hover::after {
  height: 0;
}

.corner-button:hover::before {
  width: 0;
}
.bg-f2{
  background: #2f2f2f;
}

<div class="beautify-font" data-text='躲躲'>躲躲</div>
<div class="beautify-font2" data-text='躲躲'>躲躲</div>

.beautify-font{
  position: relative;
  font-size: 12rem;
  color: #0099CC
}
.beautify-font::before{
  position: absolute;
  font-size: 12rem;
  color: #333;
  content: attr(data-text);
  white-space:nowrap;
  width: 50%;
  display: inline-block;
  overflow: hidden;
  transition:1s ease-in-out 0s;
}
.beautify-font2{
  position: relative;
  font-size: 6rem;
  color: #0099CC
}
.beautify-font2::before{
  position: absolute;
  font-size: 6rem;
  color: #333;
  content: attr(data-text);
  white-space:nowrap;
  height: 50%;
  display: inline-block;
  overflow: hidden;
  transition:1s ease-in-out 0s;
}

.beautify-font:hover::before{
  width:0;
}
.beautify-font2:hover::before{
  height: 0;
}

<div class="stackthree"><img src="./images/city.jpg"></div>

.stackthree::before {
  background: #eff4de;
}

.stackthree, .stackthree::before, .stackthree::after {
  border: 6px solid #fff;
  height: 200px;
  width: 200px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.stackthree::before {
  top: 5px;
  left: -15px;
  z-index: -1;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.stackthree::after {
  top: -2px;
  left: -10px;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

.stackthree::before, .stackthree::after {
  background: #768590;
  content: "";
  position: absolute;
  z-index: -1;
  height: 0px\9;
  width: 0px\9;
  border: none\9;
}
.stackthree {
  float: left;
  position: relative;
  margin: 50px;
}