小编Hus*_*sna的帖子

.at-timeline .timeline--details {
  position: relative;
}
.at-timeline .timeline--single {
    display: flex;
    flex-direction: row;
}
.at-timeline .timeline--details,
.at-timeline .time--date {
    flex-basis: 14%;
    padding: 15px 50px;
}
.text-right { text-align: right;}
.at-timeline .timeline--details:before {
  content: "";
  position: absolute;
  width: 35px;
  height: 2px;
  top: 17%;
  right: 0;
  background: #2783e8;
}
.at-timeline:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 300%;
  top: 15%;
  left: 24%;
  background: #2783e8;
}

<div class="timeline at-timeline" style="padding: 100px;">
	<div class="timeline--single">
		<div class="timeline--details text-right"> …

.overlay {
  background-image: url('https://picsum.photos/id/118/1000/800');
  background-repeat: no-repeat;
  background-size: cover;
}

.overlay use {
  opacity: 0;
  transition: all 0.4s linear;
}

.overlay use:hover {
  opacity: 1;
}

.vr-head-tilt {
  position: relative;
}

.big img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.overlay .vr-images1:hover~.big .default {
  opacity: 0;
}

.overlay .vr-images1:hover~.big>img:nth-child(1) {
  z-index: 5;
  opacity: 1;
}

.overlay .vr-images2:hover~.big>img:nth-child(2) {
  z-index: 5;
  opacity: 1;
}

.overlay .vr-images3:hover~.big>img:nth-child(3) {
  z-index: 5;
  opacity: 1;
}

.overlay .vr-images4:hover~.big>img:nth-child(4) {
  z-index: …

/* set radius for all circles */
var r = 400;
var circles = document.querySelectorAll('.circle');
var total_circles = circles.length;
for (var i = 0; i < total_circles; i++) {
  circles[i].setAttribute('r', r);
}
/* set meter's wrapper dimension */
var meter_dimension = (r * 2) + 100;
var wrapper = document.querySelector('#wrapper');
wrapper.style.width = meter_dimension + 'px';
wrapper.style.height = meter_dimension + 'px';
/* add strokes to circles  */
var cf = 2 * Math.PI …

<svg viewBox="0 0 400 400">
				<defs>  
	  <linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat">
      <stop offset="0.05" stop-color="#fff" stop-opacity="0"/>
      <stop offset="1" stop-color="#777" stop-opacity="1"/>
    </linearGradient>
	  </defs>
    <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
 </svg>

<svg viewBox="0 0 700 700" class="bubble-svg">
	<defs>

		<linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat" gradientTransform="rotate(170)">
			<stop offset="0%" stop-color="#fff" stop-opacity="0"/>
			<stop offset="10%" stop-color="#bdbdbd" stop-opacity="0.5"/>
			<stop offset="20%" stop-color="#fff" stop-opacity="0"/>
			<stop offset="30%" stop-color="#bdbdbd" stop-opacity="0.5"/>
			<stop offset="40%" stop-color="#fff" stop-opacity="0"/>
			<stop offset="50%" stop-color="#bdbdbd" stop-opacity="1"/>

			<stop offset="60%" stop-color="#fff" stop-opacity="0"/>
			<stop …

$(".benefits").click(function() {
  let otherButtons = $(".benefits").not($(this));
  otherButtons.siblings(".card-body").addClass("noDisplay");
  otherButtons.parent().removeClass("active");
  $(this).parent().addClass("active");
  $('.benefits-wrap').children('div').addClass("noDisplay");
  let divClass = $(this).data('div');
  $(`.${divClass}`).toggleClass("noDisplay");
});

.benefits-slideDiv1 {
  background-color: red;
}

.benefits-slideDiv2 {
  background-color: blue;
}

.benefits-slideDiv3 {
  background-color: green;
}

.benefits-slideDiv4 {
  background-color: pink;
}

.noDisplay {
  display: none;
}

div#accordionExample {
  display: flex;
  flex-direction: column;
}

.benefits-wrap {
  background: #ccc;
  height: 100px;
}

.benefits-acc.active {
  background-color: lightblue;
}

.benefits-acc.active h3 {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="accordion nav" id="accordionExample" id="myTab" role="tablist">
  <div class="benefits-acc active"> …