十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！（二）https://developer.aliyun.com/article/1385457
特效二
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>zhaoyeming</title> <link rel="stylesheet" href="css/hovertree.css" /> </head> <body> <div class="hovertreeinfo"> <h2></h2> </div> <!-- 仅自动播放音乐 --> <audio loop src="img/qianyuqianxun.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio> <script type="text/javascript"> //--创建页面监听，等待微信端页面加载完毕 触发音频播放 document.addEventListener('DOMContentLoaded', function () { function audioAutoPlay() { var audio = document.getElementById('audio'); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); } audioAutoPlay(); }); //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放 document.addEventListener('touchstart', function () { function audioAutoPlay() { var audio = document.getElementById('audio'); audio.play(); } audioAutoPlay(); }); </script> <!--/*外层最大容器*/--> <div class="wrap"> <!-- /*包裹所有元素的容器*/--> <div class="cube"> <!--前面图片 --> <div class="out_front"> <img src="img/img01.jpg " class="pic" /> </div> <!--后面图片 --> <div class="out_back"> <img src="img/img02.jpg" class="pic"/> </div> <!--左图片 --> <div class="out_left"> <img src="img/img03.jpg" class="pic" /> </div> <div class="out_right"> <img src="img/img04.jpg" class="pic" /> </div> <div class="out_top"> <img src="img/img05.jpg" class="pic" /> </div> <div class="out_bottom"> <img src="img/img06.jpg" class="pic" /> </div> <!--小正方体 --> <span class="in_front"> <img src="img/img07.jpg" class="in_pic" /> </span> <span class="in_back"> <img src="img/img08.jpg" class="in_pic" /> </span> <span class="in_left"> <img src="img/img09.jpg" class="in_pic" /> </span> <span class="in_right"> <img src="img/img10.jpg" class="in_pic" /> </span> <span class="in_top"> <img src="img/img11.jpg" class="in_pic" /> </span> <span class="in_bottom"> <img src="img/img12.jpg" class="in_pic" /> </span> </div> </div> </body> </html>
特效三
代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery爱心表白动画代码</title> <link href="css/default.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/garden.js"></script> <script type="text/javascript" src="js/functions.js"></script> </head> <body> <div id="mainDiv"> <div id="content"> <div id="code"> <h1><span class="comments">我这一辈子走过许多地方的路</span><br /></h1> <span class="comments"></span><br /> <h1><span class="comments">行过许多地方的桥</span><br /></h1> <span class="comments"></span><br /> <h1> <span class="comments">看过许多次数的云</span><br /></h1> <span class="comments"></span><br /> <h1> <span class="comments">喝过许多种类的酒</span><br /> <span class="comments"></span><br /> <h1> <span class="comments">却只爱过一个正当最好年龄的人</span><br /></h1> <span class="comments"></span><br /> </div> <div id="loveHeart"> <canvas id="garden"></canvas> <div id="words"> <div id="messages"> <h4><p class="text">I love you three thousand times </p></h4> <div id="elapseClock"> </div> </div> </div> </div> </div> <div id="copyright"> <a href="#">....</a><br /> <a href="#">....</a><br /> </div> </div> <script type="text/javascript"> var offsetX = $("#loveHeart").width() / 2; var offsetY = $("#loveHeart").height() / 2 - 55; var together = new Date(); together.setFullYear(2013, 2, 28); together.setHours(20); together.setMinutes(0); together.setSeconds(0); together.setMilliseconds(0); if (!document.createElement('canvas').getContext) { var msg = document.createElement("div"); msg.id = "errorMsg"; msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; document.body.appendChild(msg); $("#code").css("display", "none") $("#copyright").css("position", "absolute"); $("#copyright").css("bottom", "10px"); document.execCommand("stop"); } else { setTimeout(function () { startHeartAnimation(); }, 5000); timeElapse(together); setInterval(function () { timeElapse(together); }, 500); adjustCodePosition(); $("#code").typewriter(); } </script> </body> </html>
特效四
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！（四）https://developer.aliyun.com/article/1385459
