单击按钮时如何使图像缩放
所以我正在做一个学校项目，因此，我必须制作一个网站，只能使用 html、css 和 javascript。我目前正在制作一个登陆页面，并有一个按钮可以将用户带到另一个页面。我想让它在单击按钮时放大背景图像，然后将用户带到另一个页面。到目前为止，这是我的代码：
CSS 然后是 HTML
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
font-family: Brush Script MT;
font-size: 17px;
color: #926239;
line-height: 1.6;
}
#showcase {
background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
}
#showcase h1 {
font-size: 10px;
line-height: 1.2;
}
#showcase p {
font-size: 20px;
}
#showcase .button {
font-size: 25px;
text-decoration: none;
color: #10B589;
border: #10B589 1px solid;
padding: 10px 20px;
border-radius: 10px;
margin-top: 20px;
}
#showcase .button:hover {
background: #10B589;
color: #fff;
animation: wiggle 1s;
box-sizing: border-box;
}
#section-a {
padding: 20px;
background: #10B589;
color: #fff;
text-align: center;
}
#section-b {
padding: 20px;
background: #10B589;
text-align: center;
}
#section-c {
display: flex;
}
#section-c div {
padding: 20px;
}
#section-c .box-1,
#section-c .box-3 {
background: #10B589;
color: #fff;
}
#section-c .box-2 {
background: #f9f9f9;
}
@keyframes wiggle {
12% { transform: scale(0.4, 0.65); }
13% { transform: scale(0.43, 0.67); }
14% { transform: scale(0.5, 0.76); }
25% { transform: scale(0.8, 1.3); }
37% { transform: scale(0.9, 0.95); }
50% { transform: scale(1.1, 0.8); }
62% { transform: scale(0.9, 1); }
75% { transform: scale(0.7, 1.2); }
87% { transform: scale(0.8, 1.1); }
}
<html>
<head>
<header id="showcase">
<a href="insertname.html" class="button">Enter The Cave</a>
</header>
<body>
</body>
</head>
<link href="ISTwebsite.css" rel="stylesheet" type="text/css">
</html>
我在互联网上尝试了很多其他问题，有人可以帮助我吗？
慕的地6264312浏览 91回答 5
5回答
-
胡说叔叔
这是一个动画背景缩放示例，平滑地失去了可见性。添加了动态类background_size。请注意 js 代码中的行：您需要插入链接document.location.href = "your_link";而不是。your_linklet button_a = document.querySelector('.button');let background_picture = document.querySelector('#showcase');button_a.onclick = function(){ background_picture.classList.add('background_size'); button_a.classList.add('smooth_button'); document.location.href = "your_link";};* { margin: 0; padding: 0;}body { margin: 0; font-family: Brush Script MT; font-size: 17px; color: #926239; line-height: 1.6;}#showcase { background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg'); background-size: cover; background-position: center; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; transition: 0.5s; opacity: 1;}.background_size { transform: scale(1.5); opacity: 0!important;}.smooth_button { opacity: 0!important;}#showcase h1 { font-size: 10px; line-height: 1.2;}#showcase p { font-size: 20px;}#showcase .button { font-size: 25px; text-decoration: none; color: #10B589; border: #10B589 1px solid; padding: 10px 20px; border-radius: 10px; margin-top: 20px; transition: 0.1s; opacity: 1;}#showcase .button:hover { background: #10B589; color: #fff; animation: wiggle 1s; box-sizing: border-box;}#section-a { padding: 20px; background: #10B589; color: #fff; text-align: center;}#section-b { padding: 20px; background: #10B589; text-align: center;}#section-c { display: flex;}#section-c div { padding: 20px;}#section-c .box-1,#section-c .box-3 { background: #10B589; color: #fff;}#section-c .box-2 { background: #f9f9f9;}@keyframes wiggle { 12% { transform: scale(0.4, 0.65); } 13% { transform: scale(0.43, 0.67); } 14% { transform: scale(0.5, 0.76); } 25% { transform: scale(0.8, 1.3); } 37% { transform: scale(0.9, 0.95); } 50% { transform: scale(1.1, 0.8); } 62% { transform: scale(0.9, 1); } 75% { transform: scale(0.7, 1.2); } 87% { transform: scale(0.8, 1.1); }}<html><head> <header id="showcase"> <a class="button">Enter The Cave</a> </header> <body> </body></head><link href="ISTwebsite.css" rel="stylesheet" type="text/css"></html> -
MMTTMM
您可以在几秒钟后简单地分配a's href，点击事件和背景缩放就像我的代码中的以下内容一样发生btn.onclick = () => { showcase.style.transition = "1.5s"; showcase.style.transform = "scale(1.3)"; setTimeout(() => { window.location.assign("insertname.html"); }, 1000);}* { margin: 0; padding: 0;}body { margin: 0; font-family: Brush Script MT; font-size: 17px; color: #926239; line-height: 1.6;}#showcase { background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg'); background-size: cover; background-position: center; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px;}#showcase h1 { font-size: 10px; line-height: 1.2;}#showcase p { font-size: 20px;}#showcase .button { font-size: 25px; text-decoration: none; color: #10B589; border: #10B589 1px solid; padding: 10px 20px; border-radius: 10px; margin-top: 20px;}#showcase .button:hover { background: #10B589; color: #fff; animation: wiggle 1s; box-sizing: border-box;}#section-a { padding: 20px; background: #10B589; color: #fff; text-align: center;}#section-b { padding: 20px; background: #10B589; text-align: center;}#section-c { display: flex;}#section-c div { padding: 20px;}#section-c .box-1,#section-c .box-3 { background: #10B589; color: #fff;}#section-c .box-2 { background: #f9f9f9;}@keyframes wiggle { 12% { transform: scale(0.4, 0.65); } 13% { transform: scale(0.43, 0.67); } 14% { transform: scale(0.5, 0.76); } 25% { transform: scale(0.8, 1.3); } 37% { transform: scale(0.9, 0.95); } 50% { transform: scale(1.1, 0.8); } 62% { transform: scale(0.9, 1); } 75% { transform: scale(0.7, 1.2); } 87% { transform: scale(0.8, 1.1); }}<header id="showcase"> <a class="button" id="btn">Enter The Cave</a></header> -
白板的微信
首先，我修复了你的动画 CSS ...@keyframes wiggle { 0% { transform: scale(1.2, 1.2); } 15% { transform: scale(1.3, 1.3); } 30% { transform: scale(1.4, 1.4); } 45% { transform: scale(1.5, 1.5); } 60% { transform: scale(1.6, 1.6); } 75% { transform: scale(1.7, 1.7); } 90% { transform: scale(1.8, 1.8); } 100% { transform: scale(1.9,1.9); }}其次，我将 JS 添加到您按钮的 onclick 中......<a href="insertname.html" class="button" onclick="event.preventDefault(); showcase.style.animation='wiggle 3s linear 0s infinite normal none'; setTimeout(function(){document.location=this.href;},2000);">Enter The Cave</a>在 onclick 里面你会发现...事件.preventDefault(); // 停止锚点导航showcase.style.animation='wiggle 3s linear 0s infinite normal none'; // 将动画 CSS 添加到图像setTimeout(函数(){document.location=this.href;},2000); // 延迟 2 秒后将页面更改为所需的 href。 -
Smart猫小萌
我也把我的小图书馆放在那里。看下// library above - magic under here：//<![CDATA[/* js/external.js */let get, post, doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, shuffle, rand; // for use on other loadsaddEventListener('load', ()=>{get = (url, success, responseType = 'json', context = null)=>{ const x = new XMLHttpRequest; const c = context || x; x.open('GET', url); x.responseType = responseType; x.onload = ()=>{ if(success)success.call(c, x.response); } x.send(); return x;}post = function(url, send, success, responseType ='json', context = null){ const x = new XMLHttpRequest; const c = context || x; x.open('POST', url); x.responseType = responseType; x.onload = ()=>{ if(success)success.call(c, x.response); } if(typeof send === 'object' && send && !(send instanceof Array)){ if(send instanceof FormData){ x.send(send); } else{ const fd = new FormData; let s; for(let k in send){ s = send[k]; if(typeof s === 'object' && s)s = JSON.stringify(s); fd.append(k, s); } x.send(fd); } } else{ throw new Error('send argument must be an Object'); } return x;}doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);mobile = nav.userAgent.match(/Mobi/i) ? true : false;S = (selector, within)=>{ let w = within || doc; return w.querySelector(selector);}Q = (selector, within)=>{ let w = within || doc; return w.querySelectorAll(selector);}hC = function(node, className){ return node.classList.contains(className);}aC = function(){ const a = [].slice.call(arguments), n = a.shift(); n.classList.add(...a); return aC;}rC = function(){ const a = [].slice.call(arguments), n = a.shift(); n.classList.remove(...a); return rC;}tC = function(){ const a = [].slice.call(arguments), n = a.shift(); n.classList.toggle(...a); return tC;}shuffle = array=>{ let a = array.slice(), i = a.length, n, h; while(i){ n = Math.floor(Math.random()*i--); h = a[i]; a[i] = a[n]; a[n] = h; } return a;}rand = (min, max)=>{ let mn = min, mx = max; if(mx === undefined){ mx = mn; mn = 0; } return mn+Math.floor(Math.random()*(mx-mn+1));}// library above - magic under hereconst stage = I('stage'), enter = I('enter');enter.onclick = function(){ aC(this, 'dis'); aC(stage, 'cave'); setTimeout(()=>{ location = 'insertname.html'; }, 520);}}); // end load//]]>/* css/external.css */*{ box-sizing:border-box; color:#000; padding:0; margin:0; overflow:hidden;}body,html,.main,#stage{ width:100vw; height:100vh;}.hid{ display:none;}.dis{ opacity:0; transition:opacity 0.1s;}#stage{ display:flex; background:center / cover url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg'); align-items:center; justify-content:center;}#stage.cave{ transform:scale(5); transition:transform 0.5s;}#enter{ background:transparent; color: #10B589; font:25px 'Brush Script MT', cursive; padding:15px 25px; border:#10B589 1px solid; border-radius:10px; margin-top:20px; cursor:pointer;}#enter:hover{ background:#10B589; color:#fff; animation:wiggle 1s;}@keyframes wiggle { 12% { transform: scale(0.4, 0.65); } 13% { transform: scale(0.43, 0.67); } 14% { transform: scale(0.5, 0.76); } 25% { transform: scale(0.8, 1.3); } 37% { transform: scale(0.9, 0.95); } 50% { transform: scale(1.1, 0.8); } 62% { transform: scale(0.9, 1); } 75% { transform: scale(0.7, 1.2); } 87% { transform: scale(0.8, 1.1); }}<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' /> <title>Title Here</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script src='js/external.js'></script> </head><body> <div class='main'> <div id='stage'> <input id='enter' type='button' value='Enter the Cave' /> </div> </div></body></html> -
米脂
您可以尝试添加另一个子元素，并添加一个脚本以在转到另一个页面之前将其放大一点以产生缩放效果。CSS（ISTwebsite.css）：* { margin: 0; padding: 0;}body { margin: 0; font-family: Brush Script MT; font-size: 17px; color: #926239; line-height: 1.6;}#showcase { height: 100vh; width: 100%;}.inner-showcase { background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg'); background-size: cover; background-position: center; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px;}.inner-showcase h1 { font-size: 10px; line-height: 1.2;}.inner-showcase p { font-size: 20px;}.inner-showcase .button { font-size: 25px; text-decoration: none; color: #10B589; border: #10B589 1px solid; padding: 10px 20px; border-radius: 10px; margin-top: 20px;}.inner-showcase .button:hover { background: #10B589; color: #fff; animation: wiggle 1s; box-sizing: border-box;}#section-a { padding: 20px; background: #10B589; color: #fff; text-align: center;}#section-b { padding: 20px; background: #10B589; text-align: center;}#section-c { display: flex;}#section-c div { padding: 20px;}#section-c .box-1,#section-c .box-3 { background: #10B589; color: #fff;}#section-c .box-2 { background: #f9f9f9;}@keyframes wiggle { 12% { transform: scale(0.4, 0.65); } 13% { transform: scale(0.43, 0.67); } 14% { transform: scale(0.5, 0.76); } 25% { transform: scale(0.8, 1.3); } 37% { transform: scale(0.9, 0.95); } 50% { transform: scale(1.1, 0.8); } 62% { transform: scale(0.9, 1); } 75% { transform: scale(0.7, 1.2); } 87% { transform: scale(0.8, 1.1); }}HTML:<html> <head> <link href="ISTwebsite.css" rel="stylesheet" type="text/css"> </head> <body> <header id="showcase"> <div class="inner-showcase"> <a href="insertname.html" class="button myLink">Enter The Cave</a> </div> </header> <script> document.querySelector('.myLink').addEventListener('click', function (e) { e.preventDefault(); document.querySelector('.inner-showcase').style = 'transform: scale(1.2)'; setTimeout(() => location.href = this.href, 1000); }); </script> </body></html>注意：您应该将元素移动到您的<header />内部<body />而不是元素内部<head />。
随时随地看视频慕课网APP
相关分类
JavaScript