七夕馬上到了，十款代碼表白小特效一個比一個浪漫趕緊收藏起來吧

款表白小特效用代碼表白一個比一個浪漫趕緊收藏起來吧！?。?/h1>

文章簡介

最近看了一街坊視頻，問路人“你眼中的程序員是怎樣的?”

然后一堆關鍵詞就出來了“直男、宅、不懂浪漫、禿頭、掉發、油頭、戴眼鏡、瘦、沒得休息、枯燥乏味、不修邊幅、做事有邏輯、學霸、認真、憨厚老實、可愛哈哈哈哈哈哈”。

說程序員是直男，不可否認，大多數程序員都挺直，因為我們沒有那么多彎彎繞繞。有心思兜圈子，不如回去寫幾行代碼。

早年雷軍說“我喜歡寫代碼，代碼的世界很簡單”

程序員，格子衫，不浪漫，直男，人傻錢多……一點都不懂得浪漫！誰說我們不懂浪漫的？不會制造驚喜的？真的是這樣么？不不不你錯了程序員一旦浪漫起來，真沒其他人啥事了?。?！

程序員的大多數時間都是面對電腦，沒有亂七八糟的應酬，缺乏交際的程序員對待一份感情也會非常的認真。程序員也許在生活中會比較宅，但是千萬不要說程序猿不懂浪漫。當你不開心了，他可以分分鐘做出一個玫瑰花、心形、煙花等告白小程序給你制造小驚喜。

特效一（動圖太大了上傳不了只錄了一部分）

部分代碼如下

<body><audio autoplay="autopaly">  <source src="renxi.mp3" type="audio/mp3" /></audio><div id="main">  <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><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>     </font>           </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>    (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) {            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(2010,1 , 15); //時間年月日    together.setHours(16);//小時    together.setMinutes(53);//分鐘    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>

特效二

<!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>

特效四

特效五

部分代碼如下

<!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><html lang="en"><head><meta charset="UTF-8"><title>愛心</title><style>*{margin:0; padding:0;}body{ background-color: #1E1E1E; }</style></head><body><canvas id="drawHeart"></canvas><script>var hearts = [];var canvas = document.getElementById('drawHeart');var wW = window.innerWidth;var wH = window.innerHeight;// 創建畫布var ctx = canvas.getContext('2d');// 創建圖片對象var heartImage = new Image();heartImage.src = 'img/heart.svg';var num = 100;init();window.addEventListener('resize', function(){ wW = window.innerWidth; wH = window.innerHeight;});// 初始化畫布大小function init(){canvas.width = wW;canvas.height = wH;for(var i = 0; i < num; i++){hearts.push(new Heart(i%5));}requestAnimationFrame(render);}function getColor(){var val = Math.random() * 10;if(val > 0 && val <= 1){return '#00f';} else if(val > 1 && val <= 2){return '#f00';} else if(val > 2 && val <= 3){return '#0f0';} else if(val > 3 && val <= 4){return '#368';} else if(val > 4 && val <= 5){return '#666';} else if(val > 5 && val <= 6){return '#333';} else if(val > 6 && val <= 7){return '#f50';} else if(val > 7 && val <= 8){return '#e96d5b';} else if(val > 8 && val <= 9){return '#5be9e9';} else {return '#d41d50';}}function getText(){var val = Math.random() * 10;if(val > 1 && val <= 3){return '愛你一輩子';} else if(val > 3 && val <= 5){return '感謝你';} else if(val > 5 && val <= 8){return '喜歡你';} else{return 'I Love You';}}function Heart(type){this.type = type;// 初始化生成范圍this.x = Math.random() * wW;this.y = Math.random() * wH;this.opacity = Math.random() * .5 + .5;// 偏移量this.vel = {x: (Math.random() - .5) * 5,y: (Math.random() - .5) * 5}this.initialW = wW * .5;this.initialH = wH * .5;// 縮放比例this.targetScale = Math.random() * .15 + .02; // 最小0.02this.scale = Math.random() * this.targetScale;// 文字位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;this.fs = Math.random() * 10;this.text = getText();this.fvel = {x: (Math.random() - .5) * 5,y: (Math.random() - .5) * 5,f: (Math.random() - .5) * 2}}Heart.prototype.draw = function(){ctx.save();ctx.globalAlpha = this.opacity;ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);ctx.scale(this.scale + 1, this.scale + 1);  if(!this.type){  // 設置文字屬性ctx.fillStyle = getColor();  ctx.font = 'italic ' + this.fs + 'px sans-serif';  // 填充字符串  ctx.fillText(this.text, this.fx, this.fy);  }ctx.restore();}Heart.prototype.update = function(){this.x += this.vel.x;this.y += this.vel.y;if(this.x - this.width > wW || this.x + this.width < 0){// 重新初始化位置this.scale = 0;this.x = Math.random() * wW;this.y = Math.random() * wH;}if(this.y - this.height > wH || this.y + this.height < 0){// 重新初始化位置this.scale = 0;this.x = Math.random() * wW;this.y = Math.random() * wH;}// 放大this.scale += (this.targetScale - this.scale) * .1;this.height = this.scale * this.initialH;this.width = this.height * 1.4;// -----文字-----this.fx += this.fvel.x;this.fy += this.fvel.y;this.fs += this.fvel.f;if(this.fs > 50){this.fs = 2;}if(this.fx - this.fs > wW || this.fx + this.fs < 0){// 重新初始化位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;}if(this.fy - this.fs > wH || this.fy + this.fs < 0){// 重新初始化位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;}}function render(){ctx.clearRect(0, 0, wW, wH);for(var i = 0; i < hearts.length; i++){hearts[i].draw();hearts[i].update();}requestAnimationFrame(render);}</script></body></html>

特效七

<!doctype html><html><head>    <meta charset="utf-8">    <title>canvas五彩斑斕的粒子動畫特效</title>    <style>        body {            overflow: hidden;            margin: 0;            padding: 0;            background: hsla(242, 30%, 5%, 1);        }        canvas {            width: 100%;        }    </style></head><body>    <canvas id='canv'></canvas>    <script>        /*        (Book REF) HTML5 Canvas Ch. 5:  Math, Physics, and Animation ::: Uniform Circular Motion        By Steve Fulton and Jeff Fulton        */        window.requestAnimFrame = (function () {            return window.requestAnimationFrame ||              window.webkitRequestAnimationFrame ||              window.mozRequestAnimationFrame ||              window.oRequestAnimationFrame ||              window.msRequestAnimationFrame ||              function (callback) {                  window.setTimeout(callback, 1000 / 60);              };        })();        window.addEventListener('load', start, false);        var c,          $,          w,          h,          msX,          msY,          midX,          midY,          num = 650,          parts = [],          begin = 50,          repeat = 20,          end = Math.PI * 2,          force = null,          msdn = false;        function start() {            c = document.getElementById('canv');            $ = c.getContext('2d');            w = c.width = window.innerWidth;            h = c.height = window.innerHeight;            midX = w / 2;            midY = h / 2;            force = Math.max(w, h) * 0.09;            flow = begin;            window.requestAnimFrame(create);            run();        }        function run() {            window.requestAnimFrame(run);            go();        }        function Part() {            this.deg = 0;            this.rad = 0;            this.x = 0;            this.y = 0;            this.distX = 0;            this.distY = 0;            this.color = 'rgb(' + Math.floor(Math.random() * 130) + ',' + Math.floor(Math.random() * 50) + ',' + Math.floor(Math.random() * 100) + ')';            this.size;        }        function create() {            var n = num;            while (n--) {                var p = new Part();                p.deg = Math.floor(Math.random() * 360);                p.rad = Math.floor(Math.random() * w * 0.5);                p.x = p.distX = Math.floor(Math.random() * w);                p.y = p.distY = Math.floor(Math.random() * h);                p.size = 1 + Math.floor(Math.random() * (p.rad * 0.055));                parts[n] = p;            }            c.onmousemove = msmv;            c.onmousedown = msdn;            c.onmouseup = msup;            var int = setInterval(function () {                flow--;                if (flow === repeat) clearInterval(int);            }, 20);        }        function go() {            $.globalCompositeOperation = 'source-over';            $.fillStyle = 'hsla(242, 30%, 5%, .55)';            $.fillRect(0, 0, w, h);            $.globalCompositeOperation = 'lighter';            var mx = msX;            var my = msY;            var bounds = force;            if (msdn) {                bounds = force * 2;            }            var n = num;            while (n--) {                var p = parts[n];                var radi = Math.PI / 180 * p.deg;                p.distX = midX + p.rad * Math.cos(radi);                p.distY = midY + p.rad * Math.sin(radi) * 0.4;                if (mx && my) {                    var react = Math.floor((bounds * 0.5) + Math.random() * (bounds * 0.9));                    if (p.distX - mx > 0 &&                      p.distX - mx < bounds &&                      p.distY - my > 0 &&                      p.distY - my < bounds) {                        p.distX += react;                        p.distY += react;                    } else if (p.distX - mx > 0 &&                      p.distX - mx < bounds &&                      p.distY - my < 0 &&                      p.distY - my > -bounds) {                        p.distX += react;                        p.distY -= react;                    } else if (p.distX - mx < 0 &&                      p.distX - mx > -bounds &&                      p.distY - my > 0 &&                      p.distY - my < bounds) {                        p.distX -= react;                        p.distY += react;                    } else if (p.distX - mx < 0 &&                      p.distX - mx > -bounds &&                      p.distY - my < 0 &&                      p.distY - my > -bounds) {                        p.distY -= react;                        p.distY -= react;                    }                }                p.x += ((p.distX - p.x) / flow);                p.y += ((p.distY - p.y) / flow);                var x = p.x;                var y = p.y;                var s = p.size * (p.y * 1.5 / h);                if (s < 0.1) {                    s = 0;                }                $.beginPath();                $.fillStyle = p.color;                $.arc(x, y, s, 0, end, true);                $.fill();                $.closePath();                var vary;                if (p.size < 2) {                    vary = 4;                } else if (p.size < 3) {                    vary = 3;                } else if (p.size < 4) {                    vary = 2;                } else {                    vary = 1;                }                vary *= (p.y / (h * 0.9));                p.deg += vary;                p.deg = p.deg % 360;            }        }        function msmv(e) {            var p = getPos(e.target);            var sX = window.pageXOffset;            var sY = window.pageYOffset;            msX = e.clientX - p.x + sX;            msY = e.clientY - p.y + sY;        }        function msdn(e) {            msdn = true;        }        function msup(e) {            msdn = false;        }        function getPos(el) {            var cosmo = {};            cosmo.x = el.offsetLeft;            cosmo.y = el.offsetTop;            while (el.offsetParent) {                el = el.offsetParent;                cosmo.x += el.offsetLeft;                cosmo.y += el.offsetTop;            }            return cosmo;        }    </script></body></html>

文案八

文案九

文案十

唉~只是我們平時不屑于表達，除非對自己喜歡的人。我們要浪漫，就沒其他人什么事兒！?。。『昧?，馬上就要到七夕了，快去試試吧，快去@你的男朋友們吧。

需要源碼的點贊評論666

、HTML5 部分

1、入手

2、html5 語法

3、結構

4、文本格式

5、圖像與畫布

6、列表

7、表格

8、鏈接

9、表單

10、音頻與視頻

11、HTML5其他功能

12、HTML5綜合

二、CSS 部分

1、初識 CSS

2、CSS 基礎語法

3、CSS 基礎選擇器

4、CSS 高級選擇

5、顏色

6、文本修飾

7、邊框效果

8、背景修飾

9、盒子模型

10、浮動和分欄

11、定位

12、過渡效果

13、響應式布局

14、動畫

15、前端程序與CSS

16、HTML5 和 CSS 綜合

三、需要精通HTML和CSS的崗位

需要精通 HTML

網站開發前端開發工程師

網站開發工程師

網頁設計師

需要精通 CSS

前端開發工程師

網頁設計師

四、網絡基礎知識

該知識點包含內容

1、互聯網

2、ISP與機房類型

3、萬維網

4、URL

5、Tim Berners Lee

6、W3C

URL

英文全稱：Uniform Resource Locator

統一資源定位符

包含了定位Webu資源的足夠信息

如 http:// www.baidu.com/index.html

萬維網是依靠互聯網而生的一種服務，它的典型特征是通過流利器打開網頁

HTML等標準是由W3C負責維護的

URL就是可以指向特定萬維網資源的網址

web 方式和 CS 方式

web 方式

world wide web ---網頁方式

B/S 方式

如mail.qq.com/baidu.com等

CS 方式

client software ---客戶端軟件方式

C/S方式

如電腦版qq，手機原生APP等

與原生程序相比，web方式的優勢

1、即點即用無需下載安裝與授權

2、通用、兼容、跨平臺

3、繞過應用市場，實時發布，快速迭代

4、易推廣傳播快

劣勢

HTML 標準仍待更新

瀏覽器性能待提升

網速問題

安全問題

按使用情境，網絡應用可分為web 方式與CS方式

從數據交互的角度，也可以稱作為B/S方式與C/S方式

WEB 方式有天生優勢，具備很大潛力，但是目前體驗還需提升

----------

瀏覽器 ---- 知識點包含內容

1、瀏覽器是什么

2、瀏覽器市場份額

3、瀏覽器兼容問題

web 瀏覽器 --- 是一個應用程序，作用是解釋和顯示在www 上找到的文檔。

網站開發需要考慮瀏覽器的市場份額

https://tongji.baidu.com/research/site?source=index#browser

兼容性問題

一個網頁"網頁學習班"在不同瀏覽器中打開

瀏覽器兼容性問題涉及到的知識點很多

屏幕分辨率與網頁布局方式

1、屏幕分辨率

2、固定版式

3、流式布局

4、響應式布局

五、HTML 入手

<strong> </strong> ---- <strong> 標簽是:需要強調內容的意思

emphasize

標簽 em

用法格式和 strong 完全一樣，在網頁里使用 em 標簽。

<em>需要強調的內容</em>

break

<br/>或<br> ---- 是能換行

<a href = "URL">這里是超鏈接</a> --- URL改成網址如http://www.baidu.com

一個標簽可以有多個屬性

marquee 標簽

strong 和 em 的使用方法是相同的，

我們可以把格式用在 marquee 上，

請在合適的地方使用 marquee 標簽

<marquee>這是飛的感覺</marquee>

1、<strong>需要被重點突出的內容</strong>

2、<em>需要被強調的內容</em>

3、<a href = "#">鏈接文字</a>

4、<marquee>跑馬燈文字</marquee>

html 的基本語法公式

<標簽屬性="屬性值" 屬性="屬性值">內容</標簽>

如：<div id="news" class="en">內容</div>

對 marquee 標簽進行改造

就像a擁有href等屬性一樣，marquee也擁有自己的眾多屬性，direction （方向）就是其中一個，其屬性值可以指定為以下四種之一：

up --- 向上

right --- 向右

down --- 向下

left --- 向左

如：

<marquee direction="left">這是浮動效果</marquee>

繼續對 marquee 進行改造

使用以下屬性與屬性值對 marquee 進行改造

屬性屬性值

direction up | right | down | left

onmouseover stop(); --- js 語句

onmouseout start(); --- js 語句

<marquee direction="right" onmouseover="stop();" onmouseout="start();">繼續對 marquee 進行改造效果</marquee>

果圖

各位觀眾大家好，今天給大家帶來的是

HTML5焦點圖片波浪過渡效果切換動畫特效

是不是很炫酷！

代碼過長需要文檔版源碼來我的前端群581549454，已上傳到群文件

廢話不多說上源碼

網站樣式源碼：

<!doctype html>

<html>

<head>

<title>HTML5焦點圖片波浪過渡效果切換動畫特效</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.parent {

width: 681px;

height: 384px;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto auto;

overflow: hidden;

position: absolute;

-webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

-moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

}

svg {

position: absolute;

z-index: 1;

width: 681px;

height: 384px;

}

button {

position: absolute;

z-index: 50;

width: 40px;

overflow: hidden;

height: 40px;

border: none;

border-radius: 50%;

background: #fff;

cursor: pointer;

-webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

-moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

}

button:focus {

outline-width: 0;

}

circle {

stroke: #fff;

fill: none;

transition: 0.3s;

}

#svg1 circle {

transition-timing-function: linear;

}

#svg2 circle {

transition-timing-function: linear;

}

#Capa_1 {

position: absolute;

width: 16px;

height: 16px;

transform: translate(-7px, -8px);

}

#Capa_2 {

position: absolute;

width: 16px;

height: 16px;

transform: translate(-9px, -8px);

}

.right {

margin-left: 628px;

margin-top: 168px;

border: 1px solid #849494;

background-color: transparent;

transition: .5s;

}

.right:hover {

background-color: #fff;

}

.left {

margin-left: 0.5%;

margin-top: 6.17%;

border: 1px solid #849494;

background-color: transparent;

transition: .5s;

}

.left:hover {

background-color: #fff;

}

.circle1 {

transition-delay: 0.05s;

}

.circle2 {

transition-delay: 0.1s;

}

.circle3 {

transition-delay: 0.15s;

}

.circle4 {

transition-delay: 0.2s;

}

.circle5 {

transition-delay: 0.25s;

}

.circle6 {

transition-delay: 0.3s;

}

.circle7 {

transition-delay: 0.35s;

}

.circle8 {

transition-delay: 0.4s;

}

.circle9 {

transition-delay: 0.45s;

}

.circle10 {

transition-delay: 0.05s;

}

.circle11 {

transition-delay: 0.1s;

}

.circle12 {

transition-delay: 0.15s;

}

.circle13 {

transition-delay: 0.2s;

}

.circle14 {

transition-delay: 0.25s;

}

.circle15 {

transition-delay: 0.3s;

}

.circle16 {

transition-delay: 0.35s;

}

.circle17 {

transition-delay: 0.4s;

}

.circle18 {

transition-delay: 0.45s;

}

.slide1 {

}

.slide2 {

}

.slide3 {

}

.slide4 {

}

.slider {

position: absolute;

width: 400%;

height: 100%;

background: #000;

display: inline-flex;

overflow: hidden;

}

.slide1,

.slide2,

.slide3,

.slide4 {

position: absolute;

background-position: center;

background-size: cover;

color: #fff;

font-size: 62px;

padding-top: 138px;

font-weight: 800;

font-family: 'Heebo', sans-serif;

text-align: center;

width: 25%;

height: 100%;

z-index: 10;

transition: 1.4s;

}

.tran {

transform: scale(1.3);

}

.up1 {

z-index: 20;

}

.up2 {

z-index: 40;

}

.steap {

stroke-width: 0;

}

.streak {

stroke-width: 82px;

}

@media (max-width: 700px) {

.parent {

margin-left: 1%;

}

</style>

</head>

viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">

<g>

<path style='fill: #9d9d9d;' d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5

c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z

</g>

</svg>

</button>

viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">

<g>

<path style='fill: #9d9d9d;' d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225

c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z">

</g>

</svg>

</button>

</svg>

</svg>

<div id='slide1' class='slide1 up1'>MOUNTAIN</div>

<div id='slide2' class='slide2'>BEACH</div>

<div id='slide3' class='slide3'>FOREST</div>

<div id='slide4' class='slide4'>DESERT</div>

</div>

</div><script>

var curpage = 1;

var sliding = false;

var click = true;

var left = document.getElementById('left');

var right = document.getElementById('right');

var pagePrefix = 'slide';

var pageShift = 500;

var transitionPrefix = 'circle';

var svg = true;

function leftSlide() {

if (click) {

if (curpage == 1) curpage = 5;

console.log('woek');

sliding = true;

curpage--;

svg = true;

click = false;

for(k=1;k<=4;k++){

var a1 = document.getElementById(pagePrefix + k);

a1.className += ' tran';

}

setTimeout(()=>{

move();

},200);

setTimeout(()=>{

for(k=1;k<=4;k++){

var a1 = document.getElementById(pagePrefix + k);

a1.classList.remove('tran');

};

},1400);

}

function rightSlide() {

if (click) {

if (curpage == 4) curpage = 0;

console.log('woek');

sliding = true;

curpage++;

svg = false;

click = false;

for(k=1;k<=4;k++){

var a1 = document.getElementById(pagePrefix + k);

a1.className += ' tran';

}

setTimeout(()=>{

move();

},200);

setTimeout(()=>{

for(k=1;k<=4;k++){

var a1 = document.getElementById(pagePrefix + k);

a1.classList.remove('tran');

};

},1400);

}

function move() {

if (sliding) {

sliding = false;

if (svg) {

for (j = 1; j <= 9; j++) {

var c = document.getElementById(transitionPrefix + j);

c.classList.remove("steap");

c.setAttribute("class", (transitionPrefix + j) + " streak")

console.log('streak');

}

} else {

for (j = 10; j <= 18; j++) {

var c = document.getElementById(transitionPrefix + j);

c.classList.remove("steap");

c.setAttribute("class", (transitionPrefix + j) + " streak")

console.log('streak');

}

// for(k=1;k<=4;k++){

// var a1 = document.getElementById(pagePrefix + k);

// a1.className += ' tran';

// }

setTimeout(() => {

for (i = 1; i <= 4; i++) {

if (i == curpage) {

var a = document.getElementById(pagePrefix + i);

a.className += ' up1';

} else {

var b = document.getElementById(pagePrefix + i);

b.classList.remove("up1");

}

};

sliding = true;

}, 600);

setTimeout(() => {

click = true;

}, 1700);

setTimeout(() => {

if (svg) {

for (j = 1; j <= 9; j++) {

var c = document.getElementById(transitionPrefix + j);

c.classList.remove("streak");

c.setAttribute("class", (transitionPrefix + j) + " steap");

}

} else {

for (j = 10; j <= 18; j++) {

var c = document.getElementById(transitionPrefix + j);

c.classList.remove("streak");

c.setAttribute("class", (transitionPrefix + j) + " steap");

}

sliding = true;

}

}, 850);

setTimeout(() => {

click = true;

}, 1700);

}

left.onmousedown=()=>{

leftSlide();

}

right.onmousedown=()=>{

rightSlide();

}

document.onkeydown=(e)=>{

if(e.keyCode==37){

leftSlide();

}

else if (e.keyCode==39) {

rightSlide();

}

//for codepen header

setTimeout(()=>{

rightSlide();

},500)

</script>

</div>

</body>

</html>

在線咨詢

上一篇：前端開發，CSS實現一個粒子動效的按鈕
下一篇：DW靜態網頁制作：練習1-1制作音樂下載網頁

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

七夕馬上到了，十款代碼表白小特效 一個比一個浪漫 趕緊收藏起來吧

款表白小特效 用代碼表白 一個比一個浪漫 趕緊收藏起來吧！?。?/h1>

文章簡介

特效一（動圖太大了 上傳不了 只錄了一部分）

部分代碼如下

特效二

特效三

代碼如下

特效四

特效五

部分代碼如下

特效六

特效七

文案八

文案九

文案十

唉~只是我們平時不屑于表達，除非對自己喜歡的人。 我們要浪漫，就沒其他人什么事兒！?。。『昧?，馬上就要到七夕了，快去試試吧，快去@你的男朋友們吧。

代碼過長需要文檔版源碼來我的前端群581549454，已上傳到群文件

網站樣式源碼：

您的項目需求

七夕馬上到了，十款代碼表白小特效一個比一個浪漫趕緊收藏起來吧

款表白小特效用代碼表白一個比一個浪漫趕緊收藏起來吧！?。?/h1>

特效一（動圖太大了上傳不了只錄了一部分）

唉~只是我們平時不屑于表達，除非對自己喜歡的人。我們要浪漫，就沒其他人什么事兒！?。。『昧?，馬上就要到七夕了，快去試試吧，快去@你的男朋友們吧。

代碼過長需要文檔版源碼來我的前端群581549454，已上傳到群文件