css文字定时消失

html-css0138

css文字定时消失,第1张

这是一款很酷的带定时消失功能的css3消息提示框插件。

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。

你是指出现这个问题还是想 实现这个效果?

移动端的触摸事件有:

touchstart:触摸开始的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

之类的 可以去w3c查一查

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>CSS3</title> 

<style>

*{ padding:0margin:0font-size:12px }

    .open{ width:100pxheight:100pxtext-align:centerline-height:100pxbackground-color:pinkcolor:#000border-radius:50%margin:50px autobox-shadow:0 0 10px,0 0 10px #ff0000 }

    .fade{ 

        animation:fade 2s infinite -webkit-animation:fade 2s infinite

        -moz-animation:fade 2s infinite-o-animation:fade 2s infinite-ms-animation:fade 2s infinite 

        animation-fill-mode:both

    }

    @keyframes fade{

        0%,100%{

            opacity:0transform:scale(0)

        }

        50%{

            opacity:1transform:scale(1)

        }

    }

</style>

</head>

<body>

<div class="open fade"> Test </div>

</body>

</html>