为了账号安全,请及时绑定邮箱和手机立即绑定

单击按钮时如何使图像缩放

单击按钮时如何使图像缩放

慕的地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贡献1570条经验 获得超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贡献1615条经验 获得超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贡献1628条经验 获得超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贡献1638条经验 获得超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贡献1597条经验 获得超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 关注
  • 15 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信