【每日一練】32—一款實用動畫效果的實現(xiàn)
寫在前面
在前面我們也練習(xí)過很多鼠標(biāo)懸停的動畫效果，今天我們繼續(xù)練習(xí)，這個效果非常實用，也是我們在很多網(wǎng)站上經(jīng)?？吹降男Ч绻阋蚕胫涝趺磳崿F(xiàn)的話，那今天的練習(xí)項目，你一定不要錯過了。
以下是今天小練習(xí)的最終效果：
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【每日一練】32—一款實用動畫效果的實現(xiàn)</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>我聽見回聲，來自山谷和心間；以寂寞的鐮刀收割空曠的靈魂；不斷地重復(fù)決絕，又重復(fù)幸福；終有綠洲搖曳在沙漠；我相信自己，生來如同璀璨的夏日之花，不凋不敗，妖冶如火，承受心跳的負(fù)荷和呼吸的累贅，樂此不疲！我聽見音樂，來自月光和胴體；輔極端的誘餌捕獲飄渺的唯美；一生充盈著激烈，又充盈著純?nèi)?；總有回憶貫穿于世間；我相信自己，死時如同靜美的秋日落葉，不盛不亂，姿態(tài)如煙，即便枯萎也保留豐肌清骨的傲然，玄之又玄！</p></div></div></div><div class="card"><span></span><div class="imgBx"><img src="img2.jpg"></div><div class="content"><div><h2>飛鳥集</h2><p>你微微地笑著，不同我說什么話。而我覺得，為了這個，我已等待得很久了。人是一個初生的孩子，他的力量，就是生長的力量。只有經(jīng)歷過地獄般的磨礪，才能練就創(chuàng)造天堂的力量；只有流過血的手指，才能彈出世間的絕響。縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。寂靜在喧囂里低頭不語，沉默在黑夜里與目光結(jié)交，于是，我們看錯了世界，卻說世界欺騙了我們。世界以痛吻我，要我回報以歌。</p></div></div></div><div class="card"><span></span><div class="imgBx"><img src="img3.jpg"></div><div class="content"><div><h2>流螢集</h2><p>讓我的愛，像陽光一樣，包圍著你，而又給你光輝燦爛的自由。他們自己把墨水潑翻了，為了百般辯護，竟把白天說成黑夜。我最后的敬禮，獻(xiàn)給那些知道我不完美卻依然愛我的人。人生的意義不在于留下什么，只要你經(jīng)歷過，就是最大的美好，這不是無能，而是一種超然。眼睛為她下著雨，心卻為她打著傘，這就是愛情。</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);}
寫在最后
以上就是每日一練的全部內(nèi)容，希望今天的小練習(xí)對你有用，如果你覺得有幫助的話，請點贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學(xué)習(xí)更多技能
請點擊下方公眾號
評論
圖片
表情