HTML+CSS+JS 表白代码
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS 表白代码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 案例一 愛你到天昏地暗
- 案例二 帶有音樂的表白代碼
- 案例三 帶有圖片旋轉(zhuǎn)的表白
- 案例源碼
案例一 愛你到天昏地暗
<html> <style type="text/css"> <!-- .STYLE1 {font-size: medium} --> </style> <center><br><br><br><br><HEAD> <title>戀愛表白神器</title> <h1 id="r1">在未來的日子里，也許什么都無法確定，但唯一可以確定的是，我愛的人是你</h1> <style type="text/css"> /* Circle Text Styles */ #outerCircleText { /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */ font-style: italic; font-weight: bold; font-family: 'comic sans ms', verdana, arial; color: #1400FF; </style> <script type="text/javascript"> ;(function(){ // Your message here (QUOTED STRING) var msg = "某某某 我愛你 "; // Set font's style size for calculating dimensions // Set to number of desired pixels font size (decimal and negative numbers not allowed) var size = 24; // Set both to 1 for plain circle, set one of them to 2 for oval // Other numbers & decimals can have interesting effects, keep these low (0 to 3) var circleY = 0.75; var circleX = 2; // The larger this divisor, the smaller the spaces between letters // (decimals allowed, not negative numbers) var letter_spacing = 5; // The larger this multiplier, the bigger the circle/oval // (decimals allowed, not negative numbers, some rounding is applied) var diameter = 10; // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed) var rotation = 0.4; // This is not the rotation speed, its the reaction speed, keep low! // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers) var speed = 0.3; if (!window.addEventListener && !window.attachEvent || !document.createElement) return; msg = msg.split(''); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body, mouse = function(e){e = e || window.event;ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position }, makecircle = function(){ // rotation/positioningif(init.nopy){o.style.top = (b || document.body).scrollTop + 'px';o.style.left = (b || document.body).scrollLeft + 'px';};currStep -= rotation;for (var d, i = n; i > -1; --i){ // makes the circled = document.getElementById('iemsg' + i).style;d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';}; }, drag = function(){ // makes the resistancey[0] = Y[0] += (ymouse - Y[0]) * speed;x[0] = X[0] += (xmouse - 20 - X[0]) * speed;for (var i = n; i > 0; --i){y[i] = Y[i] += (y[i-1] - Y[i]) * speed;x[i] = X[i] += (x[i-1] - X[i]) * speed;};makecircle(); }, init = function(){ // appends message divs, & sets initial values for positioning arraysif(!isNaN(window.pageYOffset)){ymouse += window.pageYOffset;xmouse += window.pageXOffset;} else init.nopy = true;for (var d, i = n; i > -1; --i){d = document.createElement('div'); d.id = 'iemsg' + i;d.style.height = d.style.width = a + 'px';d.appendChild(document.createTextNode(msg[i]));oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;};o.appendChild(oi); document.body.appendChild(o);setInterval(drag, 25); }, ascroll = function(){ymouse += window.pageYOffset;xmouse += window.pageXOffset;window.removeEventListener('scroll', ascroll, false); }; o.id = 'outerCircleText'; o.style.fontSize = size + 'px'; if (window.addEventListener){window.addEventListener('load', init, false);document.addEventListener('mouseover', mouse, false);document.addEventListener('mousemove', mouse, false);if (/Apple/.test(navigator.vendor))window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){window.attachEvent('onload', init);document.attachEvent('onmousemove', mouse); }; })(); </script> <script type="text/javascript"> <!-- Begin /** Notes on hue** This script uses hue rotation in the following manner:* hue=0 is red (#FF0000)* hue=60 is yellow (#FFFF00)* hue=120 is green (#00FF00)* hue=180 is cyan (#00FFFF)* hue=240 is blue (#0000FF)* hue=300 is magenta (#FF00FF)* hue=360 is hue=0 (#FF0000)** Notes on the script** This script should function in any browser that supports document.getElementById* It has been tested in Netscape7, Mozilla Firefox 1.0, and Internet Explorer 6** Accessibility** The script does not write the string out, but rather takes it from an existing* HTML element. Therefore, users with javascript disabled will not be adverely affected.* They just won't get the pretty colors.*//** splits par.firstChild.data into 1 span for each letter* ARGUMENTS* span - HTML element containing a text node as the only element*/ function toSpans(span) {var str=span.firstChild.data;var a=str.length;span.removeChild(span.firstChild);for(var i=0; i<a; i++) {var theSpan=document.createElement("SPAN");theSpan.appendChild(document.createTextNode(str.charAt(i)));span.appendChild(theSpan);} } function RainbowSpan(span, hue, deg, brt, spd, hspd) {this.deg=(deg==null?360:Math.abs(deg));this.hue=(hue==null?0:Math.abs(hue)%360);this.hspd=(hspd==null?3:Math.abs(hspd)%360);this.length=span.firstChild.data.length;this.span=span;this.speed=(spd==null?50:Math.abs(spd));this.hInc=this.deg/this.length;this.brt=(brt==null?255:Math.abs(brt)%256);this.timer=null;toSpans(span);this.moveRainbow(); } RainbowSpan.prototype.moveRainbow = function() {if(this.hue>359) this.hue-=360;var color;var b=this.brt;var a=this.length;var h=this.hue;for(var i=0; i<a; i++) {if(h>359) h-=360;if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }h+=this.hInc;this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")";}this.hue+=this.hspd; } // End --> </script> </HEAD> <BODY><style> body {padding:0;margin:0;background-image:url();background-repeat: no-repeat;background-position:bottom; background-color: black; color: #ffffff; font: normal 80% Verdana; margin-top: 0px; margin-left: 0px; padding: 0; margin-right: 0px; } </style> <div align="center"> <h1 id="r2">我會珍惜和你在一起的每一刻，每一分，每一秒。</h1> </div> <script type="text/javascript"> var r1=document.getElementById("r1"); //get span to apply rainbow var myRainbowSpan=new RainbowSpan(r1, 0, 360, 255, 50, 18); //apply static rainbow effect myRainbowSpan.timer=window.setInterval("myRainbowSpan.moveRainbow()", myRainbowSpan.speed); </script> <div align="center"> <p class="STYLE1" id="r2">我喜歡你，真的很喜歡，就像向日葵如此依賴太陽一般的喜歡。</p> </div> <script type="text/javascript"> var r2=document.getElementById("r2"); //get span to apply rainbow var myRainbowSpan2=new RainbowSpan(r2, 0, 360, 255, 50, 348); //apply static rainbow effect myRainbowSpan2.timer=window.setInterval("myRainbowSpan2.moveRainbow()", myRainbowSpan2.speed); </script> </html> <html> <body bgcolor="#000000"> <body onContextMenu="alert('某某某 我愛你'); return false" NOOP="if (window.event != null && window.event.button == 2) alert ('Thanks...');"> <style type="text/css"> /* Circle Text Styles */ #outerCircleText { /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */ font-style: italic; font-weight: bold; font-family: 'comic sans ms', verdana, arial; color: #ff0000;position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;} #outerCircleText div {position: relative;} #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;} /* End Required */ /* End Circle Text Styles */ </style> <script type="text/javascript"> ;(function(){ // Your message here (QUOTED STRING) var msg = ""; /* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */ // Set font's style size for calculating dimensions // Set to number of desired pixels font size (decimal and negative numbers not allowed) var size = 24; // Set both to 1 for plain circle, set one of them to 2 for oval // Other numbers & decimals can have interesting effects, keep these low (0 to 3) var circleY = 0.75; var circleX = 2; // The larger this divisor, the smaller the spaces between letters // (decimals allowed, not negative numbers) var letter_spacing = 5; // The larger this multiplier, the bigger the circle/oval // (decimals allowed, not negative numbers, some rounding is applied) var diameter = 10; // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed) var rotation = 0.4; // This is not the rotation speed, its the reaction speed, keep low! // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers) var speed = 0.3; if (!window.addEventListener && !window.attachEvent || !document.createElement) return; msg = msg.split('); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body, mouse = function(e){e = e || window.event;ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position }, makecircle = function(){ // rotation/positioningif(init.nopy){o.style.top = (b || document.body).scrollTop + 'px';o.style.left = (b || document.body).scrollLeft + 'px';};currStep -= rotation;for (var d, i = n; i > -1; --i){ // makes the circled = document.getElementById('iemsg' + i).style;d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';}; }, drag = function(){ // makes the resistancey[0] = Y[0] += (ymouse - Y[0]) * speed;x[0] = X[0] += (xmouse - 20 - X[0]) * speed;for (var i = n; i > 0; --i){y[i] = Y[i] += (y[i-1] - Y[i]) * speed;x[i] = X[i] += (x[i-1] - X[i]) * speed;};makecircle(); }, init = function(){ // appends message divs, & sets initial values for positioning arraysif(!isNaN(window.pageYOffset)){ymouse += window.pageYOffset;xmouse += window.pageXOffset;} else init.nopy = true;for (var d, i = n; i > -1; --i){d = document.createElement('div'); d.id = 'iemsg' + i;d.style.height = d.style.width = a + 'px';d.appendChild(document.createTextNode(msg[i]));oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;};o.appendChild(oi); document.body.appendChild(o);setInterval(drag, 25); }, ascroll = function(){ymouse += window.pageYOffset;xmouse += window.pageXOffset;window.removeEventListener('scroll', ascroll, false); }; o.id = 'outerCircleText'; o.style.fontSize = size + 'px'; if (window.addEventListener){window.addEventListener('load', init, false);document.addEventListener('mouseover', mouse, false);document.addEventListener('mousemove', mouse, false);if (/Apple/.test(navigator.vendor))window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){window.attachEvent('onload', init);document.attachEvent('onmousemove', mouse); }; })(); </script> <center><div style="border: 2px solid ; overflow: auto; color: black; background-color: black; width: 80%;"> <h2> <center> <script language="JavaScript1.2">var message="那么，你能答應(yīng)，和我永遠在一起嗎？" var neonbasecolor="white" var neontextcolor="red" var flashspeed=100 //in milliseconds var n=0 if (document.all||document.getElementById){ document.write('<font color="'+neonbasecolor+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>') } else document.write(message) function crossref(number){ var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj } function neon(){ //Change all letters to base color if (n==0){ for (m=0;m<message.length;m++) //eval("document.all.neonlight"+m).style.color=neonbasecolor crossref(m).style.color=neonbasecolor } //cycle through and change individual letters to neon color crossref(n).style.color=neontextcolor if (n<message.length-1) n++ else{ n=0 clearInterval(flashing) setTimeout("beginneon()",1500) return } } function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) } beginneon() </script></h2> <img src="love.jpg" align="middle" border="0"><br /> <td><center> <FONT face="Monotype Corsiva" size="3" color="#ffffff"> 我只想給你一顆真心,<br>我只想努力去疼愛你,<br>我只想一輩子陪伴你,<br>我想說 我愛你.表達出我自己的意思,不想憋在心里,<br>我想要和你一起慢慢變老<br>我不要短暫的溫存,只要你一世的陪伴 <center><tr> </tr> </table> <br /> </script> <script type='text/javascript'> /*Important Function to blend the tabs in and out*/ function blendoff(idname) {document.getElementById(idname).style.display = 'none';} function blendon(idname) {document.getElementById(idname).style.display = 'block';} </script> </FONT></P></FONT><BGSOUND balance=0 volume=0 loop=infinite> </body> </html>效果圖：
案例二 帶有音樂的表白代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Love</title><link type="text/css" rel="stylesheet" href="./js/default.css"><script type="text/javascript" src="./js/jquery.min.js"></script><script type="text/javascript" src="./js/jscex.min.js"></script><script type="text/javascript" src="./js/jscex-parser.js"></script><script type="text/javascript" src="./js/jscex-jit.js"></script><script type="text/javascript" src="./js/jscex-builderbase.min.js"></script><script type="text/javascript" src="./js/jscex-async.min.js"></script><script type="text/javascript" src="./js/jscex-async-powerpack.min.js"></script><script type="text/javascript" src="./js/functions.js" charset="utf-8"></script><script type="text/javascript" src="./js/love.js" charset="utf-8"></script> </head><body><audio autoplay id="playMusic"><source src="./music/love.mp3" type="audio/mp3"></audio><div id="main"><div id="error">本頁面采用HTML5編輯，目前您的瀏覽器無法顯示，請換成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)瀏覽器，或者其他游覽器的最新版本。</div><div id="wrap"><div id="text"><div id="code"><font color="#FF0000"><span class="say">親愛的寶貝：</span><br><span class="say">這是我們在一起的第一個情人節(jié)</span><br><span class="say"> </span><br><span class="say">也真希望和你在一起的每一天都是，記得</span><br><span class="say"> </span><br><span class="say">我們第一次聊天時候，我記得你說過 “一眼一生” 多么浪漫的事情</span><br><span class="say">我們相互對彼此說的一些情話，時常在我夢里出現(xiàn)的你</span><br><span class="say"> </span><br><span class="say">晚上依然掛不斷的電話，伴你入睡的歌謠，還有好多好多我們一起要去做的事情</span><br><span class="say"> </span><br><span class="say">晚一點遇到你，希望余生都是你</span><br><span class="say"><span class="space"></span> -- 你家先生--</span></font><p></p></div></div><div id="clock-box"><span class="STYLE1"></span><font color="#33CC00">親愛的電腦，我們在一起</font> <span class="STYLE1">已經(jīng)有……</span><div id="clock"></div></div><canvas id="canvas" width="1100" height="680"></canvas></div></div><script></script><script>(function(){var canvas = $('#canvas');if (!canvas[0].getContext) {$("#error").show();return false; }var width = canvas.width();var height = canvas.height();canvas.attr("width", width);canvas.attr("height", height);var opts = {seed: {x: width / 2 - 20,color: "rgb(190, 26, 37)",scale: 2},branch: [[535, 680, 570, 250, 500, 200, 30, 100, [[540, 500, 455, 417, 340, 400, 13, 100, [[450, 435, 434, 430, 394, 395, 2, 40]]],[550, 445, 600, 356, 680, 345, 12, 100, [[578, 400, 648, 409, 661, 426, 3, 80]]],[539, 281, 537, 248, 534, 217, 3, 40],[546, 397, 413, 247, 328, 244, 9, 80, [[427, 286, 383, 253, 371, 205, 2, 40],[498, 345, 435, 315, 395, 330, 4, 60]]],[546, 357, 608, 252, 678, 221, 6, 100, [[590, 293, 646, 277, 648, 271, 2, 80]]]]]],bloom: {num: 700,width: 1080,height: 650,},footer: {width: 1200,height: 5,speed: 10,}}var tree = new Tree(canvas[0], width, height, opts);var seed = tree.seed;var foot = tree.footer;var hold = 1;canvas.click(function(e) {//播放音樂$("#playMusic")[0].play();var offset = canvas.offset(), x, y;x = e.pageX - offset.left;y = e.pageY - offset.top;if (seed.hover(x, y)) {hold = 0;canvas.unbind("click");canvas.unbind("mousemove");canvas.removeClass('hand');}}).mousemove(function(e){var offset = canvas.offset(), x, y;x = e.pageX - offset.left;y = e.pageY - offset.top;canvas.toggleClass('hand', seed.hover(x, y));});var seedAnimate = eval(Jscex.compile("async", function () {seed.draw();while (hold) {$await(Jscex.Async.sleep(10));}while (seed.canScale()) {seed.scale(0.95);$await(Jscex.Async.sleep(10));}while (seed.canMove()) {seed.move(0, 2);foot.draw();$await(Jscex.Async.sleep(10));}}));var growAnimate = eval(Jscex.compile("async", function () {do {tree.grow();$await(Jscex.Async.sleep(10));} while (tree.canGrow());}));var flowAnimate = eval(Jscex.compile("async", function () {do {tree.flower(2);$await(Jscex.Async.sleep(10));} while (tree.canFlower());}));var moveAnimate = eval(Jscex.compile("async", function () {tree.snapshot("p1", 240, 0, 610, 680);while (tree.move("p1", 500, 0)) {foot.draw();$await(Jscex.Async.sleep(10));}foot.draw();tree.snapshot("p2", 500, 0, 610, 680);// 會有閃爍不得意這樣做, (＞﹏＜)canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");canvas.css("background", "#ffe");$await(Jscex.Async.sleep(300));canvas.css("background", "none");}));var jumpAnimate = eval(Jscex.compile("async", function () {var ctx = tree.ctx;while (true) {tree.ctx.clearRect(0, 0, width, height);tree.jump();foot.draw();$await(Jscex.Async.sleep(25));}}));var textAnimate = eval(Jscex.compile("async", function () {var together = new Date();together.setFullYear(2019,5,12); //時間年月日together.setHours(0); //小時together.setMinutes(0); //分鐘together.setSeconds(0); //秒前一位together.setMilliseconds(2); //秒第二位$("#code").show().typewriter();$("#clock-box").fadeIn(500);while (true) {timeElapse(together);$await(Jscex.Async.sleep(1000));}}));var runAsync = eval(Jscex.compile("async", function () {$await(seedAnimate());$await(growAnimate());$await(flowAnimate());$await(moveAnimate());textAnimate().start();$await(jumpAnimate());}));runAsync().start();})();</script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div></body></html>效果圖：
案例三 帶有圖片旋轉(zhuǎn)的表白
<!doctype html> <html><head><meta charset="utf-8"/><meta name="keywords" content=""/><meta name="description" content=""/><title>520表白</title><style style="text/css">*{margin:0;padding:0;}body{background:url("images/1.jpg");background-size:cover;}/*start top*/.top{width:400px;height:100px;margin:60px auto;font-size:30px;font-family:"華文行楷";color:#fff;<!--background:-webkit-linear-gradient(45deg,#ff0000,#ffcc00,#ffff99,#33ccff,#00ff33,#6600ff,#333399);-webkit-background-clip:text;-->}/*end top*//*start box*/.box{width:310px;height:310px;margin:auto;perspective:800px;/*景深*/}.box .pic{position:relative;transform-style:preserve-3d;/*3d環(huán)境*/ animation:play 10s linear infinite;/*動畫名稱 執(zhí)行時間 勻速 無限執(zhí)行*/}.box ul li{list-style:none;position:absolute;top:0;left:0;}/*start box*//*定義一個關(guān)鍵幀*/@keyframes play{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}}/*start text*/#text{width:500px;height:200px;color:#6fade1;margin:auto;font-size:24px;font-family:"方正喵嗚體";}/*end text*/</style></head><body><!--start top--><div class="top"><marquee behavior="alternate">時光不老，我們不散</marquee></div><!--end top--><!--start box--><div class="box"><div class="pic"><ul><li><img src="images/1.png" width="" height="" alt=""/></li><li><img src="images/2.png" width="" height="" alt=""/></li><li><img src="images/3.png" width="" height="" alt=""/></li><li><img src="images/4.png" width="" height="" alt=""/></li><li><img src="images/5.png" width="" height="" alt=""/></li><li><img src="images/6.png" width="" height="" alt=""/></li></ul></div></div><!--end box--><!--start text--><div id="text"></div><!--end text--><embed src="music.mp3" hidden="true"/><script src="js/jquery.min.js"></script><!--雪花--><script src="js/snow.js"></script><script>$(".pic ul li").each(function(i){//遍歷var deg=360/$(".pic ul li").size();//size個數(shù)//當前的li對象 添加css樣式$(this).css({"transform":"rotateY("+deg*i+"deg) translateZ(216px)"});$.fn.snow({minSize:10,maxSize:15,newOn:500,flakeColor:"#ffffff"});});var i=0;var str="我們早就表明態(tài)度:不愿過520，但也不怕過520，必要時不得不過520。面對情侶的軟硬兩手，大家也早已給出答案:談520，大門敞開;過520，奉陪到底。經(jīng)歷了五千多年風風雨雨的中華民族，什么樣的陣勢沒見過？~";window.onload=function typing(){//獲取divvar mydiv=document.getElementById("text");mydiv.innerHTML+=str.charAt(i);i++;var id=setTimeout(typing,100);if(i==str.length){clearTimeout(id);}}</script></body> </html>效果圖
案例源碼
點擊下載
總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JS 表白代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 鲜虾如何做成干虾？
- 下一篇： html文档基本结构由哪三对,第3章 网