整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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>效果圖
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
