jQuery和CSS3绘制动态笑脸
分类:实例代码
jQuery和CSS3绘制动态笑脸属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它利用jQuery和css3绘制了动态笑脸效果。
鼠标悬浮于眼睛和嘴巴之上会有动态效果。
代码实例如下
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { box-sizing: border-box; } .container { width: 400px; min-height: 400px; background-color: yellow; overflow: auto; display: block; margin: 0 auto; border-radius: 200px; } .eyebox { width: 400px; display: block; margin: 0 auto; text-align: center; margin-top: 100px; margin-bottom: 60px; } .eye { height: 100px; width: 100px; background-color: white; border: 4px solid white; border-radius: 100%; display: inline-block; margin: 0 20px; position: relative; padding: 20px; overflow: hidden; } .eye .pupil { height: 25px; width: 25px; border-radius: 100%; display: inline-block; background-color: black; position: absolute; margin-left: -10px; left: 50px; margin: 10px; } .smile { height: 100px; width: 200px; border-radius: 0 0 200px 200px; background: #ee3a4c; margin: 0 auto; overflow: hidden; transition: all .4s; transform-origin: center; } .smile:hover { transition: all .4s; height: 33.33333px; width: 33.33333px; border-radius: 100%; margin-top: 120px; } .smile:hover .teeth { margin-left: -25px; margin-top: -40px; transition: all .4s; } .smile:hover .tongue { transition: all .4s; margin-left: -50px; } .smile .teeth { background-color: #fff; transition: all .4s; height: 33.33333px; width: 33.33333px; margin-left: 56.66667px; position: relative; } .smile .teeth:after { content: ""; background-color: #fff; height: 33.33333px; width: 33.33333px; position: absolute; left: 50px; top: 0; z-index: 10000; } .smile .tongue { transition: all .4s; height: 100px; width: 100px; background-color: pink; border-radius: 100%; margin-top: 40px; margin-left: 15px; display: inline-block; position: relative; } .smile .tongue:after { content: ''; height: 100px; width: 100px; background-color: pink; border-radius: 100%; display: inline-block; position: absolute; left: 50px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function() { var limitX = 50, limitY = 50; var containerW = $('.container').width(); var containerH = $('.container').height(); $(".container").mousemove(function(e) { var mouseY = Math.min(e.clientY / (containerH * .01), limitY); var mouseX = Math.min(e.clientX / (containerW * .01), limitX); $('.pupil').css('top', mouseY); $('.pupil').css('left', mouseX); console.log(e.clientY + ' ' + e.clientX); }); }); </script> </head> <body> <div class="container"> <div class="eyebox"> <div class="eye EL"> <div class="pupil"></div> </div> <div class="eye ER"> <div class="pupil"></div> </div> </div> <div class="smile"> <div class="teeth"></div> <div class="tongue"></div> </div> </div> <div class="readout"></div> </body> </html>
jQuery和CSS3绘制动态笑脸,这样的场景在实际项目中还是用的比较多的,关于jQuery和CSS3绘制动态笑脸就介绍到这了。