css3 animation 动画从下往上显示，从上往下隐藏

说学逗唱攻城狮

已于 2022-05-16 15:01:47 修改

阅读量4.3k

点赞数

分类专栏： css 文章标签：动画 css3 前端

于 2022-05-16 15:00:41 首次发布

本文链接：https://blog.csdn.net/qq_34720531/article/details/124800008

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>

		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.gradient-wrapper {
				width: 100%;
				display: inline-block;
				background-color: red;
				height: 200px;
				position: absolute;
				bottom: 0;
			}

			.show-animate {
				animation: wrapper-gradient .25s linear;
			}
			@keyframes wrapper-gradient {
				0% {
					transform: translateY(100%);
				}
				100% {
					transform: translateY(0);
				}
			}
			.hide-animate {
				animation: hide-gradient .25s linear;
				animation-fill-mode : forwards; //  动画停留在最后一刻，也就是隐藏
			}
			@keyframes hide-gradient {
				0% {
					transform: translateY(0);
				}
				100% {
					transform: translateY(100%);
				}
			}

		</style>
	</head>
	<body>

		<div class="gradient-wrapper"></div>
		
		<div class="test">显示隐藏</div>
		
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function() {
				$('.test').on('click', function() {
					if ($('.gradient-wrapper').hasClass('show-animate')) {
						$('.gradient-wrapper').removeClass('show-animate').addClass('hide-animate');
					} else {
						$('.gradient-wrapper').removeClass('hide-animate').addClass('show-animate');
					}
				})
			});
		</script>
	</body>
</html>

说学逗唱攻城狮

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3 animation 动画从下往上显示，从上往下隐藏

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <title></title> <style> .
复制链接

扫一扫