程序员的10行笑脸代码，能让你在冰块中超神！收获就在后面

TMLl5加CSS3技术绘制的笑脸动画，眼睛跟随鼠标转动。

纯CSS3实现的笑脸动画，在面部滑动鼠标，触及笑脸的小眼睛嘴巴会动起来，看上去是一种幸灾乐祸的得意的微笑效果，还挺搞笑的。

动态效果图如下：

这是笑脸动画特效的部分javascript源码，其布局css源码我就没上传给大家看了，如果想要整个项目源码的可以加HTMl5学习群：621071874，已经上传群文件，只要想学习前端的都欢迎。

当程序员在冰块的周围敲代码，会是一种什么样的感受呢？前端HTMl5学习裙621071874，里面有各种项目案例，想学习前端的都可以进来。下图就是文件里的部分项目，有需要的可以自动下载。

天气炎热，小编告诉大家注意防暑哟！冰块的世界里，你不懂。冰火两重天的地方在哪里？

咪容器

咱们每次画一个图片，肯定先要确定一个容器，几确定一下图形的位置和大小。
```
<div class="mao_box">
```

画喵咪的头部和头部的花纹

按照绘画习惯，我们肯定是先画最大的头部，头部确定了，耳朵嘴巴的位置才能确定。
```

```

猫咪头部.png

画猫咪的耳朵部分

猫咪的耳朵分布在头部的左右两边，所以肯定是由两个div画成，为了不显得那么僵硬，我们可以把两边的耳朵稍微画的不一样大。
大家肯定会想：耳朵的形状这么奇怪，到时是怎么画的呢？其实很简单，就是通过矩形然后设置各个角度的border-radius就会形成一种尖角的效果，再旋转相应的角度跟头部贴合就可以了。
最后将耳朵隐藏在脸部的后面，露出一点点耳尖就可以了。
```

```

耳朵.jpg

画猫咪的眼睛部分

眼睛部分有点复杂哟，不经过仔细的一番研究和强大的想象力是很难画出来的：解剖一下就是上下两个椭圆重叠而成，多余的部分隐藏，中间的褐色眼珠是在上面圆形中的一个黑色矩形。
```
<div class="yanjing">
```

猫咪眼睛.jpg

画猫咪的脸部花纹

喵咪的胡须可是很重要的哟，如果不小心把它剪了可是很严重的，猫咪就再也无法测量自己可以钻进多大的洞里了，哈哈。
仔细观察花纹其实就是由左右各5条线条组成，画出线条再做相应的变换就可以了。
```
<div class="face_huawen">
```

猫咪脸部花纹.jpg

画猫咪的鼻子

感觉这是整个猫咪最好画的地方了，简单的一个半圆就可以解决问题啦~啦啦啦啦~
```
<div class="bizi">
```

猫咪的鼻子.png

画猫咪的嘴巴

咦？是不是感觉画着画着就到了最后一部分了，哈哈哈哈哈，好开心啊~又吃成长快乐了~
嘴巴就像两撇小胡子，用两个矩形边框就可以实现了。
```
<div class="zuiba_box">
```

猫咪嘴巴.jpg

各个部位拼接成一个完整的小猫

各个部位都画好之后，又到了像大白一样的拼图时间了，哈哈~大家一起拼出一个萌萌哒小猫吧~(主要是对transition属性的运用，设置:hover之后的属性，然后用transition设置属性完成变化的过渡时间)

拼图咯--哈哈.jpg

制作鼠标移动上去的动态效果

我们家毛球可是个动如脱兔的家伙哦，所以我们来给猫咪加点特效吧~(^__^)
鼠标移动上去之后两耳耳朵左右摆动
眼睛眯眯呈现笑脸的形状

PS：眼睛眯起来之后下面出现了一部分红晕，就是两个背景颜色半透明的小椭圆组成的，只要在鼠标移动上去只会把椭圆显示出来就可以了。

眼睛下面的红晕.png

嘴角上扬

/*鼠标浮动耳朵样式*/.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%;

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群

343599877，我们一起学前端！

我们浏览淘宝或者京东网站的时候，当你用鼠标移动到产品详细页上面的图片时，图片上会显示小的方框，在图片的右边则显示出更大的图片方便浏览者可以看到更详细的产品细节。本文章我们就模拟下淘宝、京东产品放大镜效果。

<!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; /*设置浮动使得两个盒子在一排显示*/
            position: relative;/*设置定位 根据自身情况可以改为绝对定位 */
            margin: 10px;
        }
        .big {
            width: 600px;
            height: 600px;
            overflow: hidden;/*超出部分隐藏*/
            border: 1px solid #ccc;
            position: relative; /*设置定位 根据自身情况可以改为绝对定位 */
            display: none;/*默认不显示 鼠标经过box时显示*/
        }
        .mask {
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: absolute;/*在box类里面定位 层级高于展示图*/
            top: 0px;
            left: 0px;
            opacity: .5;/*设置遮罩层的透明度*/
            cursor: move;/*鼠标经过的时候变成十字拖动样式*/
            display: none;/*默认不显示 鼠标经过box时显示*/
        }
        .img {
            position: absolute;/*在big盒子里面绝对定位*/
			
            /*JavaScript需要赋值需要设置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是鼠标在盒子内的坐标  this指向box
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
 
          //将获取到的鼠标的值给遮罩层（减去一半是因为让鼠标在遮罩层中央） 让它跟着鼠标移动
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            //设置最大移动距离
            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 获取网页各种宽度
下一篇：如何使用Docsify和GitHub Pages创建文档网站

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

程序员的10行笑脸代码，能让你在冰块中超神！收获就在后面

您的项目需求