程序員8000行代碼畫出一個蒙娜麗莎，堪比達芬奇！

天小編逛論壇，看到了一位神級大佬的作品，竟然用了8000CSS代碼花了一幅蒙娜麗莎，簡直驚為天人！小編我不得不把這源碼COPY一份下來，分享給頭條上的小伙伴們看看，或許是用了什么工具吧，小編我也不是很懂，但是如果是用CSS寫的，那么這個人就真的是個大神了，好了話不多說，直接上效果圖和代碼！

這個蒙娜麗莎特效的源碼文末有領取地址

CSS全部源碼共享：

這個是照片版的蒙娜麗莎，大家能夠看出差別有多大嗎？

我的web前端技術學習交流群：733581373

我是一名前端開發程序員，自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小伙伴，這里是小白聚集地，歡迎初學和進階中的小伙伴。

【這個蒙娜麗莎特效的源碼也上傳qun文件了的】

最后再給初學前端的小伙伴說幾句：

HTML相當于告訴你網頁上的東西是什么，例如:這是一個鏈接、這是一個標題、這是一個段落。HTML是構成網頁的基礎。

CSS相當于告訴你網頁上的東西是什么樣的，例如:這個鏈接是紅色的、這個標題是藍色的、這個段落是黑色的。CSS是作用在HTML元素之上的，可以調整HTML元素的樣式，使網頁布局更漂亮、合理。

JS相當于告訴你網頁上的東西該怎么變化，例如:鼠標移動到鏈接上時鏈接變成藍色、鼠標移動到頭像上時顯示個人信息等等。JS是在HTML和CSS的基礎上的，作用是使網頁使用起來更容易、方便。

ajax是前端需要用到的一個重要的技術。

Jquery是一個前端框架，主要作用是使編寫JS代碼更方便。

些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 HTML 格式的高亮代碼塊。

花了一點時間研究了一下各家的編輯器，規則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關鍵詞，或者要求代碼塊里必須包含至少一個 <br> 。如果不符合這些要求，不是變成普通文本，就是丟失換行縮進，或者丟失顏色樣式。

所以，這就難了。先得找個支持代碼高亮的編輯器，仔細地選擇并復制代碼塊，復制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個轉換工具了。

因為瀏覽器操作系統剪貼板可能不太方便，下面用 aardio 寫一個工具軟件。

先看軟件成品演示：

軟件用法：

1、輸入編程語言名稱（支持自動完成）。
2、然后在輸入框中粘貼要轉換的編程代碼。
3、點擊「復制高亮代碼塊」按鈕。

然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。

下面是這個軟件的 aardio 源代碼：

import win.ui;
/*DSG{{*/
var winform = win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="復制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網頁編輯器直接粘貼";z=4};
cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
static={cls="static";text="請選擇語言：";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
webCtrl={cls="custom";text="自定義控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
)
/*}}*/

import web.view;
var wb = web.view(winform.webCtrl);

import win.clip.html;
wb.export({ 
    onHighlight = function(html,background,foreground){
        html = `<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
            + html + `</code></pre>`;

        html,count = string.replace(html,'\n',"<br>");
        if(!count){
            html = string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
        }
        var cb = win.clip.html();
        cb.write(html); 

        winform.setTimeout( 
            function(){
                winform.editCode.show(true);
                winform.webCtrl.show(false);
                winform.text = "HTML 代碼塊生成工具 - 已復制高亮代碼塊到剪貼板，可在網頁直接粘貼";
            },1000); 
    };
    setLanguages = function(langs){
        winform.languages = langs;
    }  
})


winform.cmbLangs.onEditChange = function(){ 

    var text = string.lower(winform.cmbLangs.text);
    var items = table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) ); 
    winform.cmbLangs.autoComplete(items);  
}
winform.cmbLangs.editBox.disableInputMethod();

import web.prism;
import wsock.tcp.asynHttpServer;
var httpServer = wsock.tcp.asynHttpServer(); 
httpServer.run(web.prism,{
    ["/index.html"] = /*****
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" /> 
    <link href="prism.css" rel="stylesheet" />
  </head>
  <body>
    <pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
    <script src="prism.js"></script>
    <script>
   function computedColorStyle(element, options = {}) {

        Array.prototype.forEach.call(element.children,child => {
            computedColorStyle(child, options);
        });

        const computedStyle = getComputedStyle(element);
        element.style["color"] = computedStyle.getPropertyValue("color");  
    }

    highlight = function(code,language){
        var html = Prism.highlight(code, Prism.languages[language], language);

        var codeEle = document.getElementById("code");
        codeEle.innerHTML = html;
        computedColorStyle(codeEle);

        const computedStyle = getComputedStyle(codeEle);  
        onHighlight(codeEle.innerHTML
            ,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
            ,computedStyle.getPropertyValue("color"));
    }

    setLanguages( Object.keys(Prism.languages) );
    </script>
  </body> 
</html> 
    *****/
});

wb.go( httpServer.getUrl("/index.html"));

winform.button.oncommand = function(id,event){
    winform.text = "HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫"
    winform.editCode.show(false);
    winform.webCtrl.show(true);

    wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
}


winform.show();
win.loopMessage();

打開 aardio 創建工程，然后復制粘貼上面的代碼到 main.aardio 里面就可以直接運行，或生成獨立 EXE 文件：

這個軟件的原理：

1、首先通過 WebView2 調用 Prism.js 高亮代碼。為了可以內存加載 Prism.js （支持生成獨立 EXE ），我寫了一個 aardio 擴展庫 web.prism 。關于 WebView2 請參考：放棄 Electron，擁抱 WebView2！JavaScript 快速開發獨立 EXE 程序

2、因為 Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式，所以我們需要調用 getComputedStyle 獲取最終渲染的字體顏色屬性。

3、最后在 JavaScript 里調用 aardio 函數處理生成的 HTML 代碼塊，aardio 的任務是將 HTML 修改為更合適直接粘貼的格式，并盡可能地處理各圖文編輯器的兼容問題。然后調用 win.clip.html 將處理好的 HTML 復制到系統剪貼板：

import win.clip.html;

var cb = win.clip.html();
cb.write(html);

然后只要愉快地粘貼代碼塊就可以。

如果是 aardio 代碼不需要用這個工具，在 aardio 編輯器里右鍵直接點『復制全部到 HTML 代碼塊』就可以了：

言

女生總是會在被求婚的時候感動的痛哭流涕，作為程序員的你如果提前給自己的女票一個求婚的動畫，想象一下她會不會很感動呢？

今天就教大家用CSS3來做一個求婚的動畫效果吧，源碼已經放在了Github上，感興趣的可以認真看下源碼，地址如下：

https://github.com/zhouxiongking/article-pages/tree/master/articles/wedding

CSS

實際效果

首先我們來看看實際運行出來的效果，如下圖所示。

效果圖

在整個效果中，其實是用到了一系列的圖片，然后控制圖片的出現順序以及出現和結束的位置。

在這個效果中，主要應用到的是animation屬性，如果對這個屬性還不是很了解的，可以先去學習一下。接下來我們具體分析整個動態是怎么實現的。

頁面構成

首先，我們看看頁面的構成，包括文字，其他的都是圖片，包括三個煙花效果，男孩，女孩，男孩手中的花，底部的花。頁面HTML代碼如下所示。

頁面HTML

文字效果

文字部分主要是有一個平移的效果，所以使用translate屬性即可。

文字部分動畫

煙花效果

在文字旁邊的煙花效果實際是一張圖片從中心點向外的擴張，因此可以使用scale屬性實現，然后通過時間的不同，來顯示出不同的煙花。

煙花效果

女孩效果

圖中的女孩實際是站著不動，只是通過改變透明度來顯示出動畫效果，因此可以使用opacity屬性來實現。

女孩效果

男孩效果

圖中的男孩實際有一個向女孩移動的效果，因此也是通過translate屬性來實現。

男孩效果

手中鮮花效果

男孩手中的鮮花實際上也是一個由中心點向外擴張的效果，并且改變透明度，通過scale和opacity屬性實現。

手中鮮花效果

底部鮮花效果

底部的鮮花實際是由兩張圖片重復顯示組成，然后給每張圖片增加一個動畫效果，從效果圖中可以看出是有一個從下到上的平移過程，因此也是使用translate屬性實現。

底部鮮花效果

至此所有的動畫效果都已經講解完畢了，雖然每個動畫只是用到一兩個屬性，但是組合之后就可以完成這樣一個小巧的求婚動畫，是不是很有趣呢?

結束語

當然文中的代碼并不是全部的實現，文中的代碼只包括使用CSS3的動畫效果的實現，全部的代碼可以去Github上去看。

今天的這篇文章學會了嗎？

在線咨詢

上一篇：為什么html5是移動學習的最佳課件形式？
下一篇：程序員浪漫起來沒文科生什么事：HTML制作表白愛心-無需編程基礎

您的項目需求

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

整合營銷服務商

程序員8000行代碼畫出一個蒙娜麗莎，堪比達芬奇！

言

實際效果

頁面構成

文字效果

煙花效果

女孩效果

男孩效果

手中鮮花效果

底部鮮花效果

結束語

您的項目需求