程序員的10行笑臉代碼，能讓你在冰塊中超神！收獲就在后面

TMLl5加CSS3技術(shù)繪制的笑臉動畫，眼睛跟隨鼠標(biāo)轉(zhuǎn)動。

純CSS3實現(xiàn)的笑臉動畫，在面部滑動鼠標(biāo)，觸及笑臉的小眼睛嘴巴會動起來，看上去是一種幸災(zāi)樂禍的得意的微笑效果，還挺搞笑的。

動態(tài)效果圖如下：

這是笑臉動畫特效的部分javascript源碼，其布局css源碼我就沒上傳給大家看了，如果想要整個項目源碼的可以加HTMl5學(xué)習(xí)群：621071874，已經(jīng)上傳群文件，只要想學(xué)習(xí)前端的都?xì)g迎。

當(dāng)程序員在冰塊的周圍敲代碼，會是一種什么樣的感受呢？前端HTMl5學(xué)習(xí)裙621071874，里面有各種項目案例，想學(xué)習(xí)前端的都可以進(jìn)來。下圖就是文件里的部分項目，有需要的可以自動下載。

天氣炎熱，小編告訴大家注意防暑喲！冰塊的世界里，你不懂。冰火兩重天的地方在哪里？

咪容器

咱們每次畫一個圖片，肯定先要確定一個容器，幾確定一下圖形的位置和大小。
```
<div class="mao_box">
```

畫喵咪的頭部和頭部的花紋

按照繪畫習(xí)慣，我們肯定是先畫最大的頭部，頭部確定了，耳朵嘴巴的位置才能確定。
```

```

貓咪頭部.png

畫貓咪的耳朵部分

貓咪的耳朵分布在頭部的左右兩邊，所以肯定是由兩個div畫成，為了不顯得那么僵硬，我們可以把兩邊的耳朵稍微畫的不一樣大。
大家肯定會想：耳朵的形狀這么奇怪，到時是怎么畫的呢？其實很簡單，就是通過矩形然后設(shè)置各個角度的border-radius就會形成一種尖角的效果，再旋轉(zhuǎn)相應(yīng)的角度跟頭部貼合就可以了。
最后將耳朵隱藏在臉部的后面，露出一點點耳尖就可以了。
```

```

耳朵.jpg

畫貓咪的眼睛部分

眼睛部分有點復(fù)雜喲，不經(jīng)過仔細(xì)的一番研究和強大的想象力是很難畫出來的：解剖一下就是上下兩個橢圓重疊而成，多余的部分隱藏，中間的褐色眼珠是在上面圓形中的一個黑色矩形。
```
<div class="yanjing">
```

貓咪眼睛.jpg

畫貓咪的臉部花紋

喵咪的胡須可是很重要的喲，如果不小心把它剪了可是很嚴(yán)重的，貓咪就再也無法測量自己可以鉆進(jìn)多大的洞里了，哈哈。
仔細(xì)觀察花紋其實就是由左右各5條線條組成，畫出線條再做相應(yīng)的變換就可以了。
```
<div class="face_huawen">
```

貓咪臉部花紋.jpg

畫貓咪的鼻子

感覺這是整個貓咪最好畫的地方了，簡單的一個半圓就可以解決問題啦~啦啦啦啦~
```
<div class="bizi">
```

貓咪的鼻子.png

畫貓咪的嘴巴

咦？是不是感覺畫著畫著就到了最后一部分了，哈哈哈哈哈，好開心啊~又吃成長快樂了~
嘴巴就像兩撇小胡子，用兩個矩形邊框就可以實現(xiàn)了。
```
<div class="zuiba_box">
```

貓咪嘴巴.jpg

各個部位拼接成一個完整的小貓

各個部位都畫好之后，又到了像大白一樣的拼圖時間了，哈哈~大家一起拼出一個萌萌噠小貓吧~(主要是對transition屬性的運用，設(shè)置:hover之后的屬性，然后用transition設(shè)置屬性完成變化的過渡時間)

拼圖咯--哈哈.jpg

制作鼠標(biāo)移動上去的動態(tài)效果

我們家毛球可是個動如脫兔的家伙哦，所以我們來給貓咪加點特效吧~(^__^)
鼠標(biāo)移動上去之后兩耳耳朵左右擺動
眼睛瞇瞇呈現(xiàn)笑臉的形狀

PS：眼睛瞇起來之后下面出現(xiàn)了一部分紅暈，就是兩個背景顏色半透明的小橢圓組成的，只要在鼠標(biāo)移動上去只會把橢圓顯示出來就可以了。

眼睛下面的紅暈.png

嘴角上揚

/*鼠標(biāo)浮動耳朵樣式*/.mao:hover .erduo > div:first-child { left: -10px; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 4% 80% 0% 60%;

學(xué)習(xí)過程中遇到什么問題或者想獲取學(xué)習(xí)資源的話，歡迎加入學(xué)習(xí)交流群

343599877，我們一起學(xué)前端！

我們?yōu)g覽淘寶或者京東網(wǎng)站的時候，當(dāng)你用鼠標(biāo)移動到產(chǎn)品詳細(xì)頁上面的圖片時，圖片上會顯示小的方框，在圖片的右邊則顯示出更大的圖片方便瀏覽者可以看到更詳細(xì)的產(chǎn)品細(xì)節(jié)。本文章我們就模擬下淘寶、京東產(chǎn)品放大鏡效果。

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京東放大鏡</title>
    <style>
        .box {
            width: 450px;
            height: 450px;
            border: 1px solid #ccc;
            float: left; /*設(shè)置浮動使得兩個盒子在一排顯示*/
            position: relative;/*設(shè)置定位 根據(jù)自身情況可以改為絕對定位 */
            margin: 10px;
        }
        .big {
            width: 600px;
            height: 600px;
            overflow: hidden;/*超出部分隱藏*/
            border: 1px solid #ccc;
            position: relative; /*設(shè)置定位 根據(jù)自身情況可以改為絕對定位 */
            display: none;/*默認(rèn)不顯示 鼠標(biāo)經(jīng)過box時顯示*/
        }
        .mask {
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: absolute;/*在box類里面定位 層級高于展示圖*/
            top: 0px;
            left: 0px;
            opacity: .5;/*設(shè)置遮罩層的透明度*/
            cursor: move;/*鼠標(biāo)經(jīng)過的時候變成十字拖動樣式*/
            display: none;/*默認(rèn)不顯示 鼠標(biāo)經(jīng)過box時顯示*/
        }
        .img {
            position: absolute;/*在big盒子里面絕對定位*/
			
            /*JavaScript需要賦值需要設(shè)置top和left值*/
            top: 0px;
            left: 0px;          
        }
		#smallpic{
			width: 450px;
            height: 450px;
		}
    </style>
</head>
<body>
    <div class="box">
        <img id='smallpic' src="small.jpg" alt="">
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="big.jpeg" alt="" class="img">
    </div>
    <script>
        var mask = document.querySelector('.mask');
        var box = document.querySelector('.box');
        var big = document.querySelector('.big');
        var img = document.querySelector('.img');
        box.addEventListener('mouseover', function () {
            mask.style.display = 'block';
            big.style.display = 'block';
 
        });
        box.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            big.style.display = 'none';
        });
        box.addEventListener('mousemove', function (e) {
            //得到的x和y是鼠標(biāo)在盒子內(nèi)的坐標(biāo)  this指向box
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
 
          //將獲取到的鼠標(biāo)的值給遮罩層（減去一半是因為讓鼠標(biāo)在遮罩層中央） 讓它跟著鼠標(biāo)移動
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            //設(shè)置最大移動距離
            var maskWidth = box.offsetWidth - mask.offsetWidth;
            var maskHeight = box.offsetHeight - mask.offsetHeight;
            //控制mask移動的范圍
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskWidth) {
                maskX = maskWidth;
            }
 
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskHeight) {
                maskY = maskHeight;
            }
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';
             //大圖最大移動距離
            var imgWidth = img.offsetWidth - big.offsetWidth;
            var imgHeight = img.offsetHeight - big.offsetHeight;
            //大圖片的移動距離 = mask移動距離 * 大圖最大移動距離 /mask的最大移動距離  
            var bigX = maskX * imgWidth / maskWidth;
            var bigY = maskY * imgHeight / maskHeight;
            //賦值
            img.style.left = (-bigX) + 'px';
            img.style.top = (-bigY) + 'px';
        });
    </script>
</body>
</html>

效果圖

在線咨詢

上一篇：javascript 獲取網(wǎng)頁各種寬度
下一篇：如何使用Docsify和GitHub Pages創(chuàng)建文檔網(wǎng)站

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

程序員的10行笑臉代碼，能讓你在冰塊中超神！收獲就在后面

您的項目需求

程序員的10行笑臉代碼，能讓你在冰塊中超神！收獲就在后面