html 代码
- <!--start romantic-->
- <div id="romantic">
- <div class="contant">
- <ul>
- <li><img src="images/1.png" width="96" height="120" alt="愛心"/></li>
- <li><img src="images/1.png" width="96" height="120" alt="愛心"/></li>
- <li><img src="images/1.png" width="96" height="120" alt="愛心"/></li>
- <li><img src="images/1.png" width="96" height="120" alt="愛心"/></li>
- <li><img src="images/1.png" width="96" height="120" alt="愛心"/></li>
- <li><img src="images/1.png" width="96" height="120" alt="愛心"/></li>
- </ul>
- </div>
- </div>
- <!--end romantic-->
- <!--start pic-->
- <div class="pic_1"><img src="images/2.png" width="150" height="150"/></div>
- <div class="pic_2"><img src="images/2.png" width="150" height="150"/></div>
- <!--end pic-->
- <!--start like-->
- <div class="like">
- <p id="love"></p>
- </div>
- <!--end like-->
CSS 代码
- body{width:100%;height:100%;background:url("images/1.jpg") top center no-repeat;background-size:cover;font-size:14px;color:#7b378c;font-family:"清茶楷体预览版";font-weight:bold;}
- /*start romantic*/
- #romantic{width:96px;height:120px;margin:200px 582px;perspective:800px;}
- #romantic .contant{width:96px;height:120px;position:relative;transform-style:preserve-3d;-webkit-animation:slide 12s linear infinite}
- #romantic .contant ul li{list-style:none;position:absolute;left:0px;top:0px;}
- #romantic .contant:hover{-webkit-animation-play-state:paused;}
- #romantic .contant ul li:hover img{transform:scale(1.2);transition:0.5s}
- /*end romantic*/
- /*start pic*/
- .pic_1{position:absolute;-webkit-animation:pic 12s linear infinite}
- .pic_2{position:absolute;-webkit-animation:photo 12s linear infinite}
- /*end pic*/
- /*start like*/
- .like{width:600px;height:200px;margin:-172px 334px;}
- .like #love{width:400px;height:200px;margin:0px auto;Word-wrap:break-Word;overflow:hidden;}
- /*end like*/
- @-webkit-keyframes slide{
- 0%{transform:rotateY(0deg);}
- 100%{transform:rotateY(360deg)}
- }
- @-webkit-keyframes pic{
- 0%{bottom:10%;right:22%;opacity:1}
- 20%{bottom:50%;right:32%;opacity:0}
- 40%{bottom:80%;right:42%;opacity:0.5}
- 60%{bottom:40%;right:62%;opacity:0}
- 80%{bottom:20%;right:82%;opacity:1}
- 100%{bottom:0%;right:42%;opacity:0}
- }
- @-webkit-keyframes photo{
- 0%{top:10%;left:22%;opacity:1}
- 20%{top:50%;left:32%;opacity:0}
- 40%{top:70%;left:42%;opacity:0.5}
- 60%{top:40%;left:62%;opacity:0}
- 80%{top:20%;left:82%;opacity:1}
- 100%{top:0%;left:42%;opacity:0}
- }
JavaScript 代码
- $("img").attr("ondragstart","return false");
- $(".contant ul li").each(function(i){
- var Deg = 360/$(".contant ul li").size();
- $(this).CSS({
- "transform":"rotateY("+ Deg*i +"deg) translateZ(120px)"
- });
- });
- Windows.onload = function(){
- var b = ['猪, 我喜欢你! 喜欢每天一睁开眼就能看见你, 看到你的笑脸, 对我而言, 你的笑容就是我最大的幸福! 不想看着你伤心难过, 不想你受到一丝的委屈, 在你伤心难过的时候, 我希望, 你想到的第一个人是我, 陪伴在你身边的是我, 也许以前你过的每一天都很美好, 但, 有我在你身边的以后每一天, 都会更加的美好, 因为, 有我在你的身边, 永远的守护在你的身边... 你是带给我幸福的天使, 那么, 我愿成为疼你, 爱你, 守护你的天使与恶魔共存的存在, 只为了更好的守护好你的笑容, 守护好傻傻的你...'];
- var loving = b.join("");i=0;arr = loving.split('');
- setInterval(function(){
- if(i>loving.length-1){
- i=0;
- document.getElementById("love").innerHTML='';
- }
- document.getElementById("love").innerHTML = document.getElementById("love").innerHTML + arr[i];
- i++;
- },150);
- };
来源: http://www.qdfuns.com/article/44017/8fda5daccd6a86466959e0fd3648d1ff.html