HTML
html结构非常简单：用一个wrapper div作为包裹容器，里面放一个用于显示信息的p标签和一个用来做进度条的div。
Your settings have been saved successfully!
为了给包裹div设置不同的颜色，给它设置两个class：tn-box和tn-box-color-1。
CSS
.tn-box {
width: 360px
position: relative
margin: 0 auto 20px auto
padding: 25px 15px
text-align: left
border-radius: 5px
box-shadow:
0 1px 1px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.6)
opacity: 0
cursor: default
display: none
}
.tn-box-color-1{
background: #ffe691
border: 1px solid #f6db7b
}
设置包裹div的初始dispaly:none，并给设置它的透明度为0。
进度条的样式如下：
.tn-progress {
width: 0
height: 4px
background: rgba(255,255,255,0.3)
position: absolute
bottom: 5px
left: 2%
border-radius: 3px
box-shadow:
inset 0 1px 1px rgba(0,0,0,0.05),
0 -1px 0 rgba(255,255,255,0.6)
}
动画开始前，进度条的宽度为0。
在demo中，使用一个checkbox来作为按钮触发消息提示框动画。
input.fire-check:checked ~ section .tn-box {
display: block
animation: fadeOut 5s linear forwards
}
input.fire-check:checked ~ section .tn-box .tn-progress {
animation: runProgress 4s linear forwards 0.5s
}
因为按钮的动作发生在消息提示框之前，所以可以使用一般通用选择器来完成按钮操作。
如果你想使用javascript来完成按钮动作，你可以像下面这样写样式：
.tn-box.tn-box-active {
display: block
animation: fadeOut 5s linear forwards
}
.tn-box.tn-box-active .tn-progress {
animation: runProgress 4s linear forwards 0.5s
}
tn-box-active是在按钮按下时被加到tn-box div中的class。
下面是消息框淡入淡出动画效果：
@keyframes fadeOut {
0% { opacity: 0}
10% { opacity: 1}
90% { opacity: 1transform: translateY(0px)}
99% { opacity: 0transform: translateY(-30px)}
100% { opacity: 0}
}
下面是进度条的动画效果：
@keyframes runProgress {
0% { width: 0%background: rgba(255,255,255,0.3)}
100% { width: 96%background: rgba(255,255,255,1)}
}
我们使它运动到进度条宽度的96%，颜色上使用RGBA。
技术文章 >web前端 >html教程求助：CSS超链接，选中中再点击其它地方，设置的选中样式就消失了。_html/css_WEB-ITnose
2016-06-24 12:16:52原创579
CSS设置：
#page a:hover {text-decoration:nonecolor:red}
#page a:active {text-decoration:underlinecolor:red}
选中后，再点击其它空白地方，设置的 a:active样式就消失了。 应该是该样式一直保留到点击同一级别的其它链接才对啊...
回复讨论(解决方案)
伪类，兼容性不是很好。你可以用 js 来做一个 点击后 增加一个 class 上去 。
a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF}/* 当有鼠标悬停在链接上 */a:active {color: #0000FF} /* 被选择的链接 */
这个只有被激活状态的时候，才算符合条件吧
CSS code?1234a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */a:active {color: #0000FF} /* 被选择的链接 */
这个只有被激……
这个在点击链接的时候不就算激活吗啊？
这个应该是点击的那一下，鼠标没有松开之前。。正在操作的过程中。。。。
这个应该是点击的那一下，鼠标没有松开之前。。正在操作的过程中。。。。
好吧，那请问下，怎么改呢？
改成a:visited不能达到你要的效果吗？
或者，如果你要的效果比较多的话，可以组合使用啊
比如a:visited:hover，这样表示已经访问过的链接，再有鼠标悬浮时的情况。
按照自己的情况自己组合试试。
不过，如果操作次数多了话，最好清一下缓存，因为浏览器会记住你之前访问的网站，刷新之后，还是会显示已经访问过的情况。
改成a:visited不能达到你要的效果吗？
或者，如果你要的效果比较多的话，可以组合使用啊
比如a:visited:hover，这样表示已经访问过的链接，再有鼠标悬浮时的情况。
按照自己的情况自己组合试试
系统故障。系统故障导致ios16css滚动背景颜色和边框颜色消失，是需要等待系统恢复的，CSS是CascadingStyleSheets的简称，中文称为层叠样式表。属性和属性值用冒号隔开，以分号结尾。
