我正在嘗試為網站創建一些介紹影片。我希望它在影片播放后平滑過渡到白色 BW 標志。
我正在努力的是，一旦洗掉了完整的單詞，我希望 B 和 W 字母在單詞的其余部分淡出后滑動在一起形成一個小的 BW。現在我似乎無法讓容器順利縮小并迫使 BW 緊挨著彼此。
我有一個代碼筆開始供參考。 https://codepen.io/patstantpen/pen/eYExopN
$(document).ready(function () {
$(".title").click(function () {
$(".letter").css("color", "white");
setTimeout(function () {
$(".reak, .orld").css("opacity", "0");
}, 1400);
});
});* {
font-family: "Montserrat";
font-weight: bold;
font-size: 35px;
height: 100%;
}
body {
text-align: Center;
height: 100%;
background-color: #f7a21b;
}
.wrapper {
display: flex;
justify-content: center;
height: 100%;
}
.title {
height: 100px;
align-self: center;
color: #a71e29;
height: 50px;
transition: width 1.4s ease;
}
.letter {
transition: color 1.4s ease;
}
.reak,
.orld {
transition: opacity 1.4s ease;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
<body>
<div class='wrapper'>
<div class='title'>
<span class='letter'>B</span><span class='reak'>REAKFAST</span> <span class='letter'>W</span><span class='orld'>ORLDWIDE</span>
</div>
</div>
</body>我想另一個更廣泛的問題是，將其制作為 mp4 或 gif 并播放而不是使用 js 會更好嗎？
uj5u.com熱心網友回復：
你實際上可以只用 CSS 做幾乎所有的事情：
$(document).ready(function () {
$('.title').click(function () {
$('.title').addClass('join');
});
});* {
font-family: "Montserrat";
font-weight: bold;
font-size: 35px;
height: 100%;
}
body {
text-align: center;
background-color: #f7a21b;
margin: 0;
}
.wrapper {
display: flex;
justify-content: center;
}
.title {
align-self: center;
color: #a71e29;
height: 50px;
cursor: pointer;
}
.letter,
.reak,
.orld {
white-space: pre;
display: inline-block;
max-width: 500px; /* needs to be set manually to a sensible value =( */
transition: color 1.4s ease,
opacity 1.4s ease 1.4s,
max-width 1.4s ease 2.8s;
}
.join .letter {
color: white;
}
.join .reak,
.join .orld {
opacity: 0;
max-width: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
<body>
<div class="wrapper">
<div class="title">
<span class="letter">B</span><span class="reak">REAKFAAAST </span><span class="letter">W</span><span class="orld">ORLDWIDE</span>
</div>
</div>
</body>我添加了更多的 As 以使兩個字母連接在一起的效果更加明顯。
uj5u.com熱心網友回復：
您需要使用 animate() 將寬度和不透明度都設定為 0。
https://api.jquery.com/animate/
并且您需要使用垂直對齊規則到頂部來將文本固定在頂部。
https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
$(document).ready(function () {
$(".title").click(function () {
$(".letter").css("color", "white");
setTimeout(function () {
$(".reak, .orld").animate({'width': 0, 'opacity': 0}, 1000, function () {
$(this).hide();
});
}, 1400);
});
});* {
font-family: "Montserrat";
font-weight: bold;
font-size: 35px;
height: 100%;
}
body {
text-align: Center;
height: 100%;
background-color: #f7a21b;
}
.wrapper {
display: flex;
justify-content: center;
height: 100%;
}
.title {
height: 50px;
align-self: center;
color: #a71e29;
transition: width 1.4s ease;
}
.letter {
transition: color 1.4s ease;
}
.reak,
.orld {
vertical-align: top;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
<body>
<div class='wrapper'>
<div class='title'>
<span class='letter'>B</span><span class='reak'>REAKFAST</span> <span class='letter'>W</span><span class='orld'>ORLDWIDE</span>
</div>
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360489.html
標籤：javascript 查询 css 动画片