HTML+CSS+JS 表白代码
2024-05-12 07:21:48
文章目录
- 案例一 爱你到天昏地暗
- 案例二 带有音乐的表白代码
- 案例三 带有图片旋转的表白
- 案例源码
案例一 爱你到天昏地暗
<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><divstyle="border: 2px solid ; overflow: auto; color: black; background-color: black; width: 80%;">
<h2>
<center>
<script language="JavaScript1.2">var message="那么，你能答应，和我永远在一起吗？"
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">这是我们在一起的第一个情人节</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><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">已经有……</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>
<divstyle="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div></body></html>
效果图：
案例三 带有图片旋转的表白
<!doctype html>
<html><head><meta charset="utf-8"/><meta name="keywords" content=""/><meta name="description" content=""/><title>520表白</title><stylestyle="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环境*/ animation:play 10s linear infinite;/*动画名称 执行时间 匀速 无限执行*/}.box ul li{list-style:none;position:absolute;top:0;left:0;}/*start box*//*定义一个关键帧*/@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个数//当前的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="我们早就表明态度:不愿过520，但也不怕过520，必要时不得不过520。面对情侣的软硬两手，大家也早已给出答案:谈520，大门敞开;过520，奉陪到底。经历了五千多年风风雨雨的中华民族，什么样的阵势没见过？~";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>
效果图
案例源码
点击下载
HTML+CSS+JS 表白代码相关推荐
- html+css+js表白代码，实现打字动画、动态爱心、图片旋转木马特效、下雪特效
给男朋友准备的520礼物,他觉得太尴尬了,于是我特地把这个项目开源,让大家一起感受一下男票的尴尬,哈哈哈哈哈哈我好恶趣味. 话不多说上代码: 一.动态爱心+打字动画 html部分: <!doct ...
- 【Html+CSS+JS 表白树-----大胆向女神告白吧！即时一次不行，那就继续写代码，再来！】
目录 效果展示 源代码 效果展示 均为网页端的动态效果,具体还可以根据需求来添加 ~ ~ 源代码 index.html <!DOCTYPE html PUBLIC "-//W3C//D ...
- Eclipse.自动提示--编写HTML/CSS/JS/JSP代码时自动提示的解决办法
最近在做一个javaweb的项目,在eclipse中编写jsp代码时没有代码提示这个梗让人很头疼,之前一直写Java代码或者在Dreamweaver中写HTML代码时自动提示代码用起来特别爽,这突然间 ...
- Yii --EClientScript 扩展，css,js文件代码压缩合并加载
扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,c ...
- js获得相同css的第几个,vue,css,js用户代码片段（vs code）
前言:并不是什么高深算法逻辑之类的,只是一些普通常用的代码片段,设置到vs code里面,减少工作时间成本,还有其他常用的代码块,欢迎评论给我建议. 设置用户代码片段方法 点这里 1.单行文字超出隐藏 ...
- 轮播图制作，详细步骤及 HTML+CSS+JS 完整代码
1.轮播图的结构 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- HTML+css+js相关代码（记事本）
注释: css /**/ html <!--> ctrl+f :查找 html meta: 空标签,表示网页的关键词,跳转网页 style:添加自定义风格,css样式表 link : ...
- html+css+js爱心代码
是李峋那个爱心代码的伊拉克战损版本(废 直接拿去粘贴到记事本里面把后缀改成html就好了 <!DOCTYPE html> <html><head><title ...
- 最近很火的爱心网页(html+css+js),表白必备
一.效果图 二.整体代码 <!DOCTYPE html> <html> <head><title>LOVE</title> </hea ...
最新文章
- nginx强制使用https访问（多站点多域名配置）
- Ueditor/自定义配置
- java基础教程哪个好，吐血整理
- linux-shell面试题 之二
- MySQL:错误代码1215 无法添加外键约束的解决思路
- 安卓手机管理_安卓手机：管理工具
- 《jQuery Cookbook中文版》——1.9 根据当前上下文遍历DOM获得新的DOM元素集
- 黑马程序员视频加源码
- 维智WSD-A2系列伺服驱动器用户手册（MECHATROLINK-Ⅱ总线通信型）
- PKU ACM 1008 玛雅历
- 百度seo指南_白杨SEO：如何让网页被百度收录以及提高它的排序？
- React H5 使用div自定义简单富文本编辑器
- RT throttling分析
- IRPT_TAS用户协议
- python 7-33 修理牧场 (25 分) PTA
- 苹果xr如何关机_iPhone如何进入DFU模式
- Word为什么会报告磁盘空间已满
- 面试怎么调整心态克服紧张情绪呢
- 怎么让自己的网站在百度搜索中带图片显示
- Unity Shader 之 简单实现物体被黑洞吸收吞噬（或者从黑洞中出来）的效果
热门文章
- IntelliJ IDEA 2020修改菜单显示大小
- ftp 553 Could not create file
- Apache JMeter 启动
- MyBatis-Plus_通用service
- powerdesigner-建立数据库模型及全局脚本
- JavaScript 中，break , continue , return 的区别
- JavaScript-初识jQuery及公式
- joi模块验证日期格式_python datetime模块详解
- Python 进程 Process 与线程 threading 区别 - Python零基础入门教程
- linux路由信息预览为空,route - 显示并设置Linux中静态路由表