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>
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>
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 里面你会发现...
事件.preventDefault(); // 停止锚点导航
showcase.style.animation='wiggle 3s linear 0s infinite normal none'; // 将动画 CSS 添加到图像
setTimeout(函数(){document.location=this.href;},2000); // 延迟 2 秒后将页面更改为所需的 href。
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>
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 />。
添加回答
举报