老式经典电视机模拟雪花开机效果-html代码-BFW代码库

老式经典电视机模拟雪花开机效果

代码语言：html

所属分类：动画

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  background: hsl(0, 0%, 5%);
  color: hsl(0, 0%, 100%);
}
/* canvas and section side by side */
div {
  padding: 0.75rem;
  display: flex;
  background: hsl(0, 0%, 10%);
  box-shadow: 0 0 5px -2px #000000;
}
/* on smaller screen, reposition the canvas atop the section */
@media screen and (max-width: 500px) {
  div {
    flex-direction: column;
  }
}

canvas,
form {
  background: hsl(0, 0%, 15%);
  margin: 0.5rem;
}
/* for the form, push the content at the bottom of the column */
form {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

form label {
  width: 2rem;
  height: 2rem;
  position: relative;
}
form label input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* when the input is checked modify the color of the SVG */
form label input + svg {
  color: hsl(9, 100%, 64%);
  width: 100%;
  height: auto;
  display: block;
}
form label input:checked + svg {
  color: hsl(80, 61%, 50%);
}

/* when the input is being focused, highlight the SVG */
form label input:focus + svg,
form label input:active + svg {
  filter: drop-shadow(0 0 2px hsl(0, 0%, 100%));
}
form label input:focus + svg .outline,
form label input:active + svg .outline {
  opacity: 1;
}

form output {
  text-transform: capitalize;
  margin-top: 0.5rem;
}
</style>

</head>
<body translate="no">

<div>
<canvas width="280" height="200"></canvas>
<form>

<label>
<input type="checkbox" id="onOff" name="onOff" />
<svg viewBox="-50 -50 100 100" width="25" height="25">
<defs>
<pattern id="dots" viewBox="-10 -10 20 20" width="0.1" height="0.1">
<circle r="3" id="circle" />
<use href="#circle" x="10".........完整代码请登录后点击上方下载按钮下载查看