如何在网页端构建响应式动画代码示例

responsive animation in web example

css, gsap, animation

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 635
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
	--dark: #1d1d1d;
  --grey-dark: #414141;
	--light: #fff;
	--mid: #ededed;
  --grey: #989898;
  --gray: #989898;
	--green: #28a92b;
  --green-dark: #4e9815;
	--green-light: #6fb936;
	--blue: #2c7ad2;
	--purple: #8d3dae;
	--red: #c82736;
	--orange: #e77614;
  accent-color: var(--green);
}

/* lovely fluid fonts */

:root {
	--fluid-min-width: 320;
	--fluid-max-width: 1140;

--fluid-screen: 100vw;
	--fluid-bp: calc(
		(var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
			(var(--fluid-max-width) - var(--fluid-min-width))
	);
}

@media screen and (min-width: 1140px) {
	:root {
		--fluid-screen: calc(var(--fluid-max-width) * 1px);
	}
}

:root {
	--f-0-min: 14;
	--f-0-max: 16;
	--step-0: calc(
		((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
			var(--fluid-bp)
	);

--f-1-min: 16;
	--f-1-max: 22.5;
	--step-1: calc(
		((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) *
			var(--fluid-bp)
	);

--f-2-min: 23.04;
	--f-2-max: 28.13;
	--step-2: calc(
		((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) *
			var(--fluid-bp)
	);

--f-3-min: 27.65;
	--f-3-max: 35.16;
	--step-3: calc(
		((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) *
			var(--fluid-bp)
	);

--f-4-min: 33.18;
	--f-4-max: 46;
	--step-4: calc(
		((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) *
			var(--fluid-bp)
	);
}

/* fluid paddings */

:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;

--fluid-screen: 100vw;
  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
}

@media screen and (min-width: 1140px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}

:root {
  --fc-s-min: (var(--f-0-min, 21)); 
  --fc-s-max: (var(--f-0-max, 24));

--fc-m-min: (var(--fc-s-min) * 6); 
  --fc-m-max: (var(--fc-s-max) * 6);

--fc-l-min: (var(--fc-s-min) * 8); 
  --fc-l-max: (var(--fc-s-max) * 8);

--fc-xl-min: (var(--fc-s-min) * 10); 
  --fc-xl-max: (var(--fc-s-max) * 10);

/* T-shirt sizes */
  --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  
  /* One-up pairs */
  --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
}

/* commonly used utils */

.pad-s {
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
}

.pad-m {
  padding-top: var(--space-m);
  padding-bottom: var(--space-m);
}

.pad-l {
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}

.pad-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.flow > * + * {
  margin-top: 1em;
}

.text-center {
  text-align: center;
}

.box {
	width: 100px;
	height: 100px;
  border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--green);
	font-weight: 600;
	color: var(--light);
}

.circle {
	width: 100px;
	height: 100px;
  border-radius: 99px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--green);
	font-weight: 600;
	color: var(--light);
}

/* always doing this */
.flex-row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

/* and this */

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* colors */

.green {
	background-color: var(--green);
}
.blue {
	background-color: var(--blue);
}
.purple {
	background-color: var(--purple);
}
.red {
	background-color: var(--red);
}
.orange {
	background-color: var(--orange);
}

.dark {
	background-color: var(--dark);
	color: var(--light);
}

.light {
	background-color: var(--light);
	color: var(--dark);
}

.text-light {
  color: var(--light);
}

.text-dark {
  color: var(--dark);
}

.gray,
.grey {
	background-color: var(--grey);
}

/* Typography */

body {
	background-color: var(--dark);
	color: var(--light);
	font-family: "Signika Negative", sans-serif;
	margin: 0;
	font-size: var(--step-0);
  line-height: 1.45;
}

h1,
h2,
h3,
h4 {
	margin: 10px 0 10px 0;
	font-weight: 400;
  line-height: 1.2
}

h1, .h1 {
	font-size: var(--step-4)
}

h2, .h2 {
	font-size: var(--step-3)
}

h3, .h3 {
	font-size: var(--step-2)
}

h4, .h4, .lead {
  font-size: var(--step-1)
}

a {
	color: var(--green-light);
	font-weight: bold;
	font-family: "Signika Negative", sans-serif;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.light a {
  color: var(--green-dark);
}

/* button:not('.box') { breaking for some reason in codepen? */
button {
	display: inline-block;
	outline: none;
	border: none;
	padding: 8px 14px;
	background: var(--light);
  background-image: linear-gradient(to bottom, hsl(0deg 0% 100%), hsl(0deg 0% 94%));
	-webkit-box-shadow: 0px 1px 0px #414141;
	-moz-box-shadow: 0px 1px 0px #414141;
	box-shadow: 0px 1px 0px #414141;
	color: var(--dark);
	text-decoration: none;
	-webkit-border-radius: 4;
	-moz-border-radius: 4;
	border-radius: 4px;
	padding: 12px 25px;
	font-family: "Signika Negative", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	line-height: 18px;
}

.light button {
    color: var(--light);
  	background-image: linear-gradient(to bottom, #575757, #414141);
}

button:hover {
	background: var(--green-light);
	background-image: linear-gradient(to bottom, #57a818, #4d9916);
	-webkit-box-shadow: 0px 1px 0px fefefe;
	-moz-box-shadow: 0px 1px 0px fefefe;
	box-shadow: 0px 1px 0px fefefe;
	color: #ffffff;
	text-decoration: none;
}

.gsap-3-logo {
	width: 20vw;
	max-width: 150px;
	position: fixed;
	bottom: 15px;
	right: 15px;
}

/* panels  */

.panel {
	min-height: 100vh;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

.panel.gray.circles {
  background-color: #777;
  background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #777,#606060);
}
.panel.blue.circles{
  background-color: #2c7ad2;
  background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #2c7ad2,#1568c6);
}
.panel.orange.circles {
  background-color: #e77614;
  background-image: radial-gradient(circle at 46% 40%, rgba(228, 228, 228,0.06) 0%, rgba(228, 228, 228,0.06) 13%,transparent 13%, transparent 100%),radial-gradient(circle at 11% 41%, rgba(198, 198, 198,0.06) 0%, rgba(198, 198, 198,0.06) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 52% 23%, rgba(14, 14, 14,0.06) 0%, rgba(14, 14, 14,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 13% 85%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 57% 74%, rgba(232, 232, 232,0.06) 0%, rgba(232, 232, 232,0.06) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 59% 54%, rgba(39, 39, 39,0.06) 0%, rgba(39, 39, 39,0.06) 49%,transparent 49%, transparent 100%),radial-gradient(circle at 98% 38%, rgba(157, 157, 157,0.06) 0%, rgba(157, 157, 157,0.06) 24%,transparent 24%, transparent 100%),radial-gradient(circle at 8% 6%, rgba(60, 60, 60,0.06) 0%, rgba(60, 60, 60,0.06) 12%,transparent 12%, transparent 100%),linear-gradient(90deg, #ff7600, #ff7600);
}

.panel.red.circles {
  background-color: #c82736;
  background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, #e53949,#cc2232);
}

.panel.purple.circles {
  background-color: #8d3dae;
  background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #8d3dae,#8d3dae);
}
.panel.green.circles {
  background-color: #28a92b;
  background-image: radial-gradient(circle at 46% 40%, rgba(228, 228, 228,0.06) 0%, rgba(228, 228, 228,0.06) 13%,transparent 13%, transparent 100%),radial-gradient(circle at 11% 41%, rgba(198, 198, 198,0.06) 0%, rgba(198, 198, 198,0.06) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 52% 23%, rgba(14, 14, 14,0.06) 0%, rgba(14, 14, 14,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 13% 85%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 57% 74%, rgba(232, 232, 232,0.06) 0%, rgba(232, 232, 232,0.06) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 59% 54%, rgba(39, 39, 39,0.06) 0%, rgba(39, 39, 39,0.06) 49%,transparent 49%, transparent 100%),radial-gradient(circle at 98% 38%, rgba(157, 157, 157,0.06) 0%, rgba(157, 157, 157,0.06) 24%,transparent 24%, transparent 100%),radial-gradient(circle at 8% 6%, rgba(60, 60, 60,0.06) 0%, rgba(60, 60, 60,0.06) 12%,transparent 12%, transparent 100%),linear-gradient(90deg, #28a92b, #10a614);
}

/* SCROLL DOWN */ 
.scroll-down {
  position: absolute; 
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  color: black;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16px;
  overflow: visible;
}
.scroll-down .arrow {
  position: relative;
  top: -4px;
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);
  background-size: contain;
}

/* h1, h2, p, li {
  max-width: 800px;
breaking stuff
}
 */
.panel p strong, .panel li strong {
  color: white;
  font-weight: 400;
}
.panel p code, .panel li code {
  background-color: rgba(255,255,255,0.15);
  padding: 2px 4px;
  border-radius: 5px;
}
.panel li {
  margin: 0;
}

pre.prettyprint {
  max-width: 100%;
  overflow: auto;
}

ul pre.prettyprint {
  margin-left: -0.5rem;
}

/* prism */

/**
 * Dracula Theme originally by Zeno Rocha [@zenorocha]
 * https://draculatheme.com/
 *
 * Ported for PrismJS by Albert Vallverdu [@byverdu]
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1rem;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #262626;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: 1rem;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #6272a4;
}

.token.punctuation {
	color: #f8f8f2;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #fff;
}

.token.boolean,
.token.number {
	color: #FACD22;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #EC7600;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #fff;
}

.token.keyword {
	color: #8be9fd;
}

.token.regex,
.token.important {
	color: #ffb86c;
}

.token.important,
.token.bold {
	font-weight: bold;
}

.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

/* Hide elements visually, but not for screenreaders by clipping it */

.vh {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

/* checkboxes */

/*  Add a :before to each label and style this as the checkbox you want to have */
.checkbox label {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.checkbox label:before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: var(--light);
  display: inline-block;
  margin-right: 10px;
}

.checkbox input[type="checkbox"]:checked ~ label:before {
  background: var(--green-light) no-repeat center;
  background-size: 12px 12px;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ1LjcwMSA0NS43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NS43MDEgNDUuNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMC42ODcsMzguMzMyYy0yLjA3MiwyLjA3Mi01LjQzNCwyLjA3Mi03LjUwNSwwTDEuNTU0LDI2LjcwNGMtMi4wNzItMi4wNzEtMi4wNzItNS40MzMsMC03LjUwNCAgICBjMi4wNzEtMi4wNzIsNS40MzMtMi4wNzIsNy41MDUsMGw2LjkyOCw2LjkyN2MwLjUyMywwLjUyMiwxLjM3MiwwLjUyMiwxLjg5NiwwTDM2LjY0Miw3LjM2OGMyLjA3MS0yLjA3Miw1LjQzMy0yLjA3Miw3LjUwNSwwICAgIGMwLjk5NSwwLjk5NSwxLjU1NCwyLjM0NSwxLjU1NCwzLjc1MmMwLDEuNDA3LTAuNTU5LDIuNzU3LTEuNTU0LDMuNzUyTDIwLjY4NywzOC4zMzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

body {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    min-height: 100vh;
    flex-direction: column;
}
.container {
    position: relative;
    height: 100px;
}
.guide {
    background-color: transparent;
    border: dashed 1.5px white;
    padding: 1px;
    top: -1.5px;
    width: 300px;
}
h2 {
    width: 100%;
    text-align: center;
}
.desktop {
    display: none;
}
.mobile {
    display: block;
}
@media (min-width: 800px) {
    .purple {
        width: 250px;
    }
    .guide {
        width: 750px;
    }
    .desktop {
        display: block;
    }
    .mobile {
        display: none;
    }
}
.container .box {
    position: absolute;
}
.buttonCont {
    width: 100%;
    display: flex;
    justify-content: center;
}

HTML

responsive animation in web example

css, gsap, animation

编辑器支持Emmet

快捷键

responsive animation in web example

css, gsap, animation

Animate-css-grid在线实例：如何给网格布局添加动画

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：