这篇博客探讨了如何使用CSS伪元素`:before`和`:after`创建一个时间轴按钮的效果。当点击时间轴按钮时，会添加事件并改变元素的透明度和边框颜色。博主展示了代码示例，并在鼠标悬停时改变元素的透明度。文章还提到了动画效果的实现，如`fadein2s`，但没有提及如何在事件后删除最后一个事件的问题。
我正在使用：after和：在我的活动之前的CSS之前.我有一个名为时间轴的按钮.当我点击时间轴按钮时,它会添加一个事件并使用：在我连接此事件后看起来不错,但我想在效果后删除最后一个事件.
在这里,我粘贴我正常工作的代码我正在添加一个图像,显示出现了什么问题.
这是我的代码：
div[type="timeline"]>section {
margin: auto;
width: 900px;
z-index: 100;
opacity: 0.5;
border-left: 4px solid #00BCD4;
border-top: 1px solid grey;
min-height: 250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: relative;
top: 50px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
-webkit-animation: fadein 2s -moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
div[type="timeline"]>section:hover {
opacity: 1;
}
div[type="timeline"]::before {
content: "";
position: absolute;
top: 0;
left: 50%;
bottom: 0;
width: .2rem;
background: white;
height: 55px;
}
div[type="timeline"]>section::after {
content: "";
position: absolute;
left: 50%;
bottom: -55px;
width: .2rem;
background: grey;
height: 55px;
}
div[type="timeline"]>section>header {
font-weight: 600;
color: cadetblue;
transform: translate(16px, 23px);
font-size: 34px;
font-family: arial;
position: relative;
}
div[type="timeline"]>section>article {
transform: translate(12px, 14px);
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
Title One
Content
Title Two
Content
Title Three
Content
Title Four
Content
扫一扫
6140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
