如需修改在页面中的位置
将 .point 设为 position:absoulute ,修改其 left , top 位置即可
.point-flicker 是相对 .point 来定位的
修改大小时要将它的 margin-left: -40px margin-top: -40px改为对应大小的一半
用css做一个呼吸效果,然后让想闪烁的元素调用:
比如,我的div想呼吸
div.breatheDiv{height:500px
width:500px
background-color: #FF94A6
border-radius: 100%
webkit-animation: breathe 2000ms ease infinite
-moz-animation: breathe 2000ms ease infinite
-o-animation: breathe 2000ms ease infinite
animation: breathe 2000ms ease infinite
}
@-webkit-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@-moz-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@-o-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
创建动画序列,需要使用animation属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes规则实现,具体情况参见使用keyframes定义动画序列小节部分。transition也可实现动画。transition强调过渡,是元素的一个或多个属性发生变化时产生的过渡效果,同一个元素通过两个不同的途径获取样式,而第二个途径当某种改变发生(如hover)时才能获取样式,这样就会产生过渡动画。