亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

單擊按鈕時如何使圖像縮放

單擊按鈕時如何使圖像縮放

慕的地6264312 2023-01-06 10:49:03
所以我正在做一個學校項目，因此，我必須制作一個網站，只能使用 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>我在互聯網上嘗試了很多其他問題，有人可以幫助我嗎？
查看完整描述

5 回答

?
胡說叔叔

TA貢獻1804條經驗 獲得超8個贊

這是一個動畫背景縮放示例，平滑地失去了可見性。添加了動態類background_size。請注意 js 代碼中的行：您需要插入鏈接document.location.href = "your_link";而不是。your_link


let 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>


查看完整回答
反對 回復 2023-01-06
?
MMTTMM

TA貢獻1869條經驗 獲得超4個贊

您可以在幾秒鐘后簡單地分配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>


查看完整回答
反對 回復 2023-01-06
?
白板的微信

TA貢獻1883條經驗 獲得超3個贊

首先，我修復了你的動畫 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 里面你會發現...

  1. 事件.preventDefault(); // 停止錨點導航

  2. showcase.style.animation='wiggle 3s linear 0s infinite normal none'; // 將動畫 CSS 添加到圖像

  3. setTimeout(函數(){document.location=this.href;},2000); // 延遲 2 秒后將頁面更改為所需的 href。



查看完整回答
反對 回復 2023-01-06
?
Smart貓小萌

TA貢獻1911條經驗 獲得超7個贊

我也把我的小圖書館放在那里。看下// 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 loads

addEventListener('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 here

const 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>


查看完整回答
反對 回復 2023-01-06
?
米脂

TA貢獻1836條經驗 獲得超3個贊

您可以嘗試添加另一個子元素，并添加一個腳本以在轉到另一個頁面之前將其放大一點以產生縮放效果。


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 />。


查看完整回答
反對 回復 2023-01-06
  • 5 回答
  • 0 關注
  • 161 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號