[英]Animation block appearance bottom-top
我想要這樣的東西，但是從下到上 animation。 它必須位於圖像頂部並占據整頁。 我該怎么做？
function viewDiv() { document.getElementById("text").classList.add("my-class"); }
.content-blocker { visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 4444; transition: opacity 1s ease-in; }.my-class { visibility: visible; opacity: 1; }
<body> <input type="button" value="Click" onmousedown="viewDiv()"> тут контент страницы <img src = "https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png"> <div class="content-blocker" id = "text"></div> </body>
您可以使用width: 100%和height: 100vh對圖像進行全屏顯示，並使用transform: translateY(-value)從下到上獲取 animation。 這是Codepen 示例
以下是如何讓它從上到下制作動畫；
function viewDiv(){ document.getElementById("text").classList.add("my-class");; }
.content-blocker { visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 4444; }.my-class { visibility: visible; opacity: 1; animation-name: dth; animation-duration: 0.6s; } @keyframes dth { from {height: 0;} to {height: 100%;} }
<body> <input type="button" value="Click" onmousedown="viewDiv()"> тут контент страницы <img src = "https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png"> <div class="content-blocker" id = "text"></div> </body>
將 Apexcharts.js 啟動 Animation 從下到上更改為左右
[英]Changing Apexcharts.js Launch Animation from Bottom-Top to Left-Right
如何使jQuery在着陸頁菜單上從上到下和從下到上滾動慢動畫
[英]How to make jQuery Scrolling Top to bottom and Bottom to Top Slow Animation on Landing page menu
如何顯示通知彈出窗口，動畫從右上到下顯示，從右上到下顯示，從下到上關閉
[英]How to display notification popup with animation appearing and decreasing from right top to bottom and closing from bottom to top
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.