第248练的最终效果如下：
HTML:
<!DOCTYPE html><html lang=”en”><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>第248练</title><link rel=”stylesheet” href=”index.css” /></head><body><div class=”container”><div class=”split left”><h1>Apple</h1><button class=”btn”>Buy Now</button></div><div class=”split right”><h1>Samsung</h1><button class=”btn”>Buy Now</button></div></div><script src=”index.js”></script></body></html>
CSS:
body {margin: 0;display: flex;justify-content: center;height: 100vh;align-items: center;text-align: center;font-family: Impact, Haettenschweiler, “Arial Narrow Bold”, sans-serif;}h1 {font-size: 100px;color: aliceblue;background-color: rgba(0, 0, 0, 0.3);letter-spacing: 4px;}.btn {background-color: black;color: white;padding: 20px 40px;font-size: 25px;border: 4px solid;cursor: pointer;transition: 1s background-color;white-space: nowrap;}.btn:hover {background-color: white;color: black;}.split {width: 50%;height: 100%;top: 0;overflow: hidden;}.split.left {position: absolute;left: 0;background-color: pink;background-image: url(“https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-13-pro-family-hero?wid=940&hei=1112&fmt=png-alpha&.v=1631220221000”);background-size: cover;}.split.right {position: absolute;right: 0;background-color: lightblue;background-image: url(“https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6465/6465022_sd.jpg;maxHeight=640;maxWidth=550”);background-size: cover;}.active-left .left {width: 75%;}.active-left .right {width: 25%;}.active-right .left {width: 25%;}.active-right .right {width: 75%;}.left,.right {transition: width 2s ease-in-out;}
JS:
const containerEl = document.querySelector(“.container”);const leftEl = document.querySelector(“.left”);const rightEl = document.querySelector(“.right”);leftEl.addEventListener(“mouseenter”, () => {containerEl.classList.add(“active-left”);});leftEl.addEventListener(“mouseleave”, () => {containerEl.classList.remove(“active-left”);});rightEl.addEventListener(“mouseenter”, () => {containerEl.classList.add(“active-right”);});rightEl.addEventListener(“mouseleave”, () => {containerEl.classList.remove(“active-right”);});
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
