jQuery Star flashing effect, 글자에 별 효과
작성일 17-07-26 15:33
페이지 정보
작성자서방님 조회 104회 댓글 0건본문
https://codepen.io/mtedwards/pen/neiId
<div class="header">
<h1>STARS</h1>
<div class="star star-1"></div>
<div class="star star-2"></div>
<div class="star star-3"></div>
<div class="star star-4"></div>
</div>
<style type="text/css">
@import "compass/css3";
body {background:black;}
h1 {
color:white;
font-size:72px;
padding:25px 0 0 100px;
font-family:helvetica;
font-weight:100;
}
.star {
position: absolute;
background: url(https://dl.dropbox.com/u/1488103/julie-logo-sparkle.png) no-repeat;
background-size: contain;
overflow: hidden;
&.star-1 {
width: 50px;
height: 34px;
top:110px;
left:97px;
}
&.star-2 {
width: 83px;
height: 77px;
top:18px;
left:224px;
}
&.star-3 {
width: 74px;
height: 70px;
top:115px;
left:172px;
}
&.star-4 {
width: 68px;
height: 70px;
top:46px;
left:162px;
}
}
</style>
<script type="text/javascript">
<!--
$(function () {
setInterval(function () {
$('.star-1').fadeOut(150).delay(2000).fadeIn(300).fadeOut(150).delay(1254);
$('.star-2').fadeOut(300).fadeIn(120).fadeOut(120).delay(1920);
$('.star-3').fadeOut(150).delay(1200).fadeIn(300).fadeOut(150).delay(800);
$('.star-4').fadeOut(700).fadeIn(300).fadeOut(160).delay(1350);
}, 1);
});
//-->
</script>
댓글목록
등록된 댓글이 없습니다.