[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style>
@keyframes warn {
0% {
transform: scale(0)
opacity: 0.0
}
25% {
transform: scale(0)
opacity: 0.1
}
50% {
transform: scale(0.1)
opacity: 0.3
}
75% {
transform: scale(0.5)
opacity: 0.5
}
100% {
transform: scale(1)
opacity: 0.0
}
}
@-webkit-keyframes "warn" {
0% {
-webkit-transform: scale(0)
opacity: 0.0
}
25% {
-webkit-transform: scale(0)
opacity: 0.1
}
50% {
-webkit-transform: scale(0.1)
opacity: 0.3
}
75% {
-webkit-transform: scale(0.5)
opacity: 0.5
}
100% {
-webkit-transform: scale(1)
opacity: 0.0
}
}
.container {
position: relative
width: 40px
height: 40px
border: 1px solid #000
}
/* 保持大小不变的小圆圈 */
.dot {
position: absolute
width: 6px
height: 6px
left: 15px
top: 15px
-webkit-border-radius: 20px
-moz-border-radius: 20px
border: 2px solid red
border-radius: 20px
z-index: 2
}
/* 产生动画（向外扩散变大）的圆圈 */
.pulse {
position: absolute
width: 24px
height: 24px
left: 2px
top: 2px
border: 6px solid red
-webkit-border-radius: 30px
-moz-border-radius: 30px
border-radius: 30px
z-index: 1
opacity: 0
-webkit-animation: warn 3s ease-out
-moz-animation: warn 3s ease-out
animation: warn 3s ease-out
-webkit-animation-iteration-count: infinite
-moz-animation-iteration-count: infinite
animation-iteration-count: infinite
}
</style>
</head>
<body>
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
</div>
</body>
</html>
纯css么emmmm 那就如下：先画一个圆，用border-radius 画一个，
然后给这个属性加上opacity来先让这个圆完全透明，opacity = 1；
再利用transition加一个过渡效果， 像这样 ： transition： all 2s
最后加上hover， 这样就可以使这个圆逐渐出现了。hover里面要加上 opacity：0；
还有问题可以追问，纯手打。
<script type="text/javascript">$(document).ready(function() {
$("input").click(function() {
$(this).hide().fadeIn(700).addClass('b')//当前这个input先隐藏再渐显，你可以测试一下，如果不是你想要的效果，你可以查一下jq的渐隐效果函数或者animate（）函数，控制这个input的透明度就好了，例如 $(this).animate（‘opacity’，‘0’）；
//点击text增加b效果
$("body").one("click", function() {
$("input").removeClass("b")
//点击其他地方消除b效果
})
return false
})
})
