css+div实现简洁灵感表单卡片效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+div实现简洁灵感表单卡片效果代码，记录你的灵感，有svg动画效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat&amp;display=swap'>
  
<style>
* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 53;
  --bg: hsl(var(--hue),10%,90%);
  --fg: hsl(var(--hue),10%,10%);
  --primary: hsl(var(--hue),90%,50%);
  --trans-dur: 0.3s;
  --trans-timing1: cubic-bezier(0.65,0,0.35,1);
  --trans-timing2: cubic-bezier(0.65,0,0.35,1.35);
  font-size: calc(14px + (30 - 14) * (100vw - 280px) / (3840 - 280));
}

body,
button,
textarea {
  font: 1em/1.5 Montserrat, sans-serif;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  display: flex;
  height: 100vh;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

.idea-form {
  background-color: black;
  color: white;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 16.5em;
  height: 4.5em;
  transition: background-color var(--trans-dur), color var(--trans-dur), height var(--trans-dur) var(--trans-timing2);
}
.idea-form, .idea-form__btn, .idea-form__content {
  border-radius: 1.5em;
}
.idea-form, .idea-form__btn {
  position: relative;
}
.idea-form__btn, .idea-form__textarea {
  outline: transparent;
  transition: background-color var(--trans-dur), box-shadow var(--trans-dur), opacity var(--trans-dur) var(--trans-timing1);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.idea-form__btn:disabled, .idea-form__textarea:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.idea-form__btn {
  background-color: black;
  box-shadow: 0 0 0 0.25em hsla(var(--hue), 90%, 30%, 0);
  color: white;
  cursor: pointer;
  display: flex;
  margin-inline-start: auto;
  padding: 0.5em 1em;
  z-index: 2;
}
.idea-form__btn--start {
  background-color: transparent;
  box-shadow: none;
  color: currentColor;
  display: flex;
  align-items: center;
  letter-spacing: 0.0625em;
  padding-inline-start: 5.25em;
  width: 100%;
  height: 4.5em;
  text-transform: uppercase;
  transition: opacity var(--trans-dur) var(--trans-timing1), visibility var(--trans-dur) steps(1, start);
}
.idea-form__btn:focus-visible {
  box-shadow: 0 0 0 0.25em hsla(var(--hue), 90%, 30%, 1);
}
.idea-form__content {
  opacity: 0;
  padding: 1.5em 1em 0.75em;
  padding-inline-start: 5.25em;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: opacity var(--trans-dur) var(--trans-timing1), visibility var(--trans-dur) steps(1, end);
}
.idea-form__fill, .idea-form__icon, .idea-form__label {
  position: absolute;
}
.idea-form__fill {
  background-color: hsl(var(--hue), 90%, 50%);
  border-radius: 50%;
  top: 1.75em;
  left: 2em;
  width: 1em;
  height: 1em;
  transform: translateY(50%) scale(0);
  transition: transform var(--trans-dur) var(--trans-timing1);
}
[dir=rtl] .idea-form__fill {
  right: 2em;
  left: auto;
}
.idea-form__btn--start:focus-visible {
  box-shadow: none;
}
.idea-form__btn--start:focus-visible + .idea-form__fill, .idea-form__btn--start:hover + .idea-form__fill {
  transform: translateY(0) scale(1);
}
.idea-form__icon {
  color: currentColor;
  display: block;
  top: 0.75em;
  left: 1em;
  width: 3em;
  height: 3em;
  z-index: 1;
}
[dir=rtl] .idea-form__icon {
  right: 1em;
  left: auto;
}
.idea-form__label {
  overflow: hidden;
  width: 1px;
  height: 1px;
}
.idea-form__textarea {
  background-color: transparent;
  color: black;
  display: block;
  margin-bottom: 0.75em;
  resize: none;
  width: 100%;
  height: 3em;
}
.idea-form__textarea::placeholder {
  color: hsl(var(--hue), 10%, 50%);
}
.idea-form[data-expanded=true] {
  background-color: transparent;
  height: 8.5em;
  transition-timing-function: steps(1, end), ease, var(--trans-timing2);
}
.idea-form[data-expanded=true] .idea-form__btn--start {
  opacity: 0;
  pointer-events: none;
  transition-timing-function: var(--trans-timing1), steps(1, end);
  visibility: hidden;
}
.idea-form[data-expanded=true] .idea-form__content {
  opacity: 1;
  transition-timing-function: var(--trans-timing1), steps(1, start);
  visibility: visible;
}
.idea-form[data-expanded=true] .idea-form__fill {
  transform: translateY(0) scale(32);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),10%,10%);
    --fg: hsl(var(--hue),10%,90%);
  }

  .idea-form {
    background-color: white;
    color: black;
  }
}
</style>

  
</head>

<body translate="no">
  <form id="idea" class="idea-form" action="">
	<svg class="idea-form__icon" viewBox="0 0 32 32" width="32px" height="32px" aria-hidden="true">
		<g fill="currentcolor">
			<path d="M16,2A10,10,0,0,0,6,12a9.19,9.19,0,0,0,3.46,7.62c1,.93,1.54,1.46,1.54,2.38h2c0-1.84-1.11-2.87-2.19-3.86A7.2,7.2,0,0,1,8,12a8,8,0,0,1,16,0,7.2,7.2,0,0,1-2.82,6.14c-1.07,1-2.18,2-2.18,3.86h2c0-.92.53-1.45,1.54-2.39A9.18,9.18,0,0,0,26,12,10,10,0,0,0,16,2Z" />
			<rect x="11" y="24" width="10" height="2"/>
			<rect x="13" y="28" width="6" height="2"/>
		</g>
	</svg>
	<button class="idea-form__btn idea-form__btn--start" type="button" data-toggle>I have an idea</button>
	<div class="idea-form__fill"></div>
	<div class="idea-form__content">
		<label for="my-idea" class="idea-form__label">Idea</label>
		<textarea id="my-idea" class="idea-form__textarea" placeholder="My idea is…">&l.........完整代码请登录后点击上方下载按钮下载查看