其他
【每日一练】32—一款实用动画效果的实现
写在前面
在前面我们也练习过很多鼠标悬停的动画效果，今天我们继续练习，这个效果非常实用，也是我们在很多网站上经常看到的效果，如果你也想知道怎么实现的话，那今天的练习项目，你一定不要错过了。
以下是今天小练习的最终效果：
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【每日一练】32—一款实用动画效果的实现</title> <link rel="stylesheet" href="style.css"></head><body> <div class="container"> <div class="card"> <span></span> <div class="imgBx"><img src="img1.jpg"></div> <div class="content"> <div> <h2>生如夏花</h2> <p>我听见回声，来自山谷和心间；以寂寞的镰刀收割空旷的灵魂；不断地重复决绝，又重复幸福； 终有绿洲摇曳在沙漠；我相信自己，生来如同璀璨的夏日之花，不凋不败，妖冶如火，承受心跳的负荷和呼吸的累赘，乐此不疲！ 我听见音乐，来自月光和胴体；辅极端的诱饵捕获飘渺的唯美；一生充盈着激烈，又充盈着纯然；总有回忆贯穿于世间； 我相信自己，死时如同静美的秋日落叶，不盛不乱，姿态如烟，即便枯萎也保留丰肌清骨的傲然，玄之又玄！ </p> </div> </div> </div> <div class="card"> <span></span> <div class="imgBx"><img src="img2.jpg"></div> <div class="content"> <div> <h2>飞鸟集</h2> <p>你微微地笑着，不同我说什么话。而我觉得，为了这个，我已等待得很久了。 人是一个初生的孩子，他的力量，就是生长的力量。 只有经历过地狱般的磨砺，才能练就创造天堂的力量；只有流过血的手指，才能弹出世间的绝响。 纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。 寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。 世界以痛吻我，要我回报以歌。 </p> </div> </div> </div> <div class="card"> <span></span> <div class="imgBx"><img src="img3.jpg"></div> <div class="content"> <div> <h2>流萤集</h2> <p>让我的爱，像阳光一样，包围着你，而又给你光辉灿烂的自由。 他们自己把墨水泼翻了，为了百般辩护，竟把白天说成黑夜。 我最后的敬礼，献给那些知道我不完美却依然爱我的人。 人生的意义不在于留下什么，只要你经历过，就是最大的美好，这不是无能，而是一种超然。 眼睛为她下着雨，心却为她打着伞，这就是爱情。 </p> </div> </div> </div> </div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> $(document).ready(function() { $('.card').on('mouseenter', function(e) { x = e.pageX - $(this).offset().left, y = e.pageY - $(this).offset().top; $(this).find('span').css({top:y, left:x}) }) $('.card').on('mouseout', function(e) { x = e.pageX - $(this).offset().left, y = e.pageY - $(this).offset().top; $(this).find('span').css({top:y, left:x}) }); });</script></body></html>*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #28102d;}.container{ width: 1050px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}.card{ position: relative; display: inline-block; width: 320px; height: 420px; margin: 15px; overflow: hidden;}.card span{ position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background: #9C27B0; opacity: 0.95; transition: width 0.5s, height 0.5s; transform: translate(-50%, -50%); pointer-events: none; z-index: 10;}.card:hover span{ width: 1000px; height: 1000px;}.card .imgBx{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}.card .imgBx img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}.card .content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; display: flex; justify-content: center; align-items: center;}.card .content div{ padding: 40px; opacity: 0; visibility: hidden; transition: 0.2s; color: #fff; transform: translateY(50px);}.card:hover .content div{ opacity: 1; visibility: visible; transition-delay: 0.5s; transform: translateY(0px);}写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号