使用 CSS 制作 Record Animation

2025年3月17日 | 阅读11分钟

在本文中，我们将了解如何使用 CSS 为录音按钮创建动画。在此，我们将为录音按钮创建动画，例如语音录制开关、声音按钮开关等。

以下是示例

示例 1

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of  record animation using CSS </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<style>
#record-spin {
          -webkit-animation: spin 8s ease-in infinite alternate;
          -moz-animation: spin 8s ease-in infinite alternate;
          animation: spin 8s ease-in infinite alternate;
      }
body {
  margin: 0;
  padding: 00;
  width: 100%;
  height: 100%;
  display: table;
  background-color: #180d80;
}
h1 {
   font-family:  arial;
   font-weight: 50;
   font-size: 4em;
   text-align: center;
   background: repeating-linear-gradient(45deg, black, lime 5px);
   position: relative;
   -webkit-background-clip: text;
   -webkit-text-stroke: 2px black;
   color: transparent;
   bottom: 60px;
   animation: float 2s ease-in-out infinite;
}
h1::before {  
   z-index: 2;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 10;
   left: 0;
    background: repeating-linear-gradient(-45deg, black, transparent 5px);
   -webkit-background-clip: text;
   -webkit-text-stroke: 12px lightgreen;
}
h2 {
   font-family: arial;
   font-weight: 20;
   font-size: 2em;
   text-align: center;
   background: repeating-linear-gradient(40deg, white, red 5px);
   position: relative;
   -webkit-background-clip: text;
   -webkit-text-stroke: 2px white;
   color: transparent;
   bottom: 10px;
  color: white;
   animation: float 2s ease-in-out infinite; }
h2::before {   
   z-index: 2;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
    background: repeating-linear-gradient(-45deg, black, transparent 5px);
   -webkit-background-clip: text;
   -webkit-text-stroke: 12px lightgreen;
}
      @-moz-keyframes spin { 100% { -moz-transform: rotate(720deg); } }
      @-webkit-keyframes spin { 100% { -webkit-transform: rotate(720deg); } }
      @keyframes spin { 100% { -webkit-transform: rotate(720deg); transform: rotate(720deg); } }
      #record-spin2 {
          -webkit-animation: spin2 8s ease-in infinite alternate;
          -moz-animation: spin2 8s ease-in infinite alternate;
          animation: spin2 8s ease-in infinite alternate;
      }
          @-moz-keyframes spin2 { 
            0% { -moz-transform: rotate(-10deg); }
            10% { -moz-transform: rotate(2deg); }
            20% { -moz-transform: rotate(-3deg); }
            100% { -moz-transform: rotate(20deg); }
          }
          @-webkit-keyframes spin2 { 
            0% { -webkit-transform: rotate(-10deg); } 
            10% { -webkit-transform: rotate(2deg); } 
            20% { -webkit-transform: rotate(-3deg); } 
            100% { -webkit-transform: rotate(20deg); }
          }
          @keyframes spin2 {  
            0% { -moz-transform: rotate(-10deg); transform: rotate(-10deg);} 
            10% { -moz-transform: rotate(2deg); transform: rotate(2deg);} 
            20% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 
            100% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } 
          }
      #record-spin1{
          -webkit-animation:spin1 8s ease-in infinite alternate;
          -moz-animation:spin1 8s ease-in infinite alternate;
          animation:spin1 8s ease-in infinite alternate;
      }
          @-moz-keyframes spin1 { 
            0% { -moz-transform: rotate(-10deg); }
            50% { -moz-transform: rotate(10deg); } 
            100% { -moz-transform: rotate(-10deg); }
          }
          @-webkit-keyframes spin1 { 
            0% { -moz-transform: rotate(-10deg); } 
            50% { -webkit-transform: rotate(10deg); } 
            100% { -webkit-transform: rotate(-10deg); }
          }
          @keyframes spin1 {  
            0% { -moz-transform: rotate(-10deg); transform: rotate(-10deg);} 
            50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 
            100% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 
          }
#mainpage-image {
  display: table;
  text-align: center;
}
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
  align-self: center;
}
.row > [class*='col-'] img {
  align-self: center;
}
.bot {
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 1;
}
.top {
  position: absolute;
  left: 0px;
  z-index: 2;
}
.img-fluid. {
	max-width: 100%;
	height: auto;
} 
html, body {
  height: 130%;
}
.container-fluid { 
height: 100%;
overflow-y: hidden; 
background: -moz-linear-gradient(45deg, #fa6b46 0%, #eda36f 100%); 
background: -webkit-linear-gradient(45deg, #fa6b46 0%,#eda36f 100%); 
background: linear-gradient(45deg, #fa6b46 0%,#eda36f 100%); 
}
@media only screen and (min-width : 768px) {
    .is-table-row {
        display: table;
    }
    .is-table-row [class*="col-"] {
        float: none;
        display: table-cell;
        vertical-align: top;
    }
}
</style>
<body>
<h1> Example </h1>
<h2> Record Animation Using CSS </h2>
<div class = "container-fluid">
<div class = "row" style = "margin-bottom: -100px;">
<div class = "bot" style = "max-width:40%; text-align: center; margin: 0 auto">
<div class = "col-xs-12">
<img src = "https://image.ibb.co/euhuxH/1a1.png" class = "img-responsive" id = "record-spin" alt = "Responsive image" style = "z-index:1">
</div>
</div>
          <div class = "layout">
            <div class = "top" style="max-width:40%;text-align:center;margin-left:30%">
              <div class = "col-xs-12">
                <img src = "https://image.ibb.co/hDYdPx/a1b.png" class = "img-responsive" id = "record-spin1" alt = "Responsive image" style = "z-index:2;opacity:.88;">
              </div>
            </div>
          </div>
          <div class = "layout">
            <div class = "top" style="max-width:40%;text-align:center;margin-left:44%;margin-top:-7%">
              <div class = "col-xs-12">
                <img src = "https://image.ibb.co/hVW9Wc/a1c.png" class = "img-responsive" id = "record-spin2" alt = "Responsive image" style = "z-index:3;">
              </div>
            </div>
         </div>
</div>
</div> 
</body>
</html>

说明

在上面的示例中，我们使用 CSS 在录制的 CD 上创建了动画。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of  record animation using CSS </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<style>
html {
  margin: 0;
  padding: 00;
  width: 100%;
  height: 100%;
  display: table;
  background-color: #180d80;
}
body {
  margin: 0;
  padding: 00;
  width: 100%;
  height: 100%;
  display: table;
  background-color: #180d80;
}
h1 {
   font-family:  arial;
   font-weight: 50;
   font-size: 4em;
   text-align: center;
   background: repeating-linear-gradient(45deg, black, lime 5px);
   position: relative;
   -webkit-background-clip: text;
   -webkit-text-stroke: 2px black;
   color: transparent;
   bottom: 60px;
   animation: float 2s ease-in-out infinite;
}
h1::before {  
   z-index: 2;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 10;
   left: 0;
    background: repeating-linear-gradient(-45deg, black, transparent 5px);
   -webkit-background-clip: text;
   -webkit-text-stroke: 12px lightgreen;
}
h2 {
   font-family: arial;
   font-weight: 20;
   font-size: 2em;
   text-align: center;
   background: repeating-linear-gradient(40deg, white, red 5px);
   position: relative;
   -webkit-background-clip: text;
   -webkit-text-stroke: 2px white;
   color: transparent;
   bottom: 10px;
  color: white;
   animation: float 2s ease-in-out infinite; }
h2::before {   
   z-index: 2;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
    background: repeating-linear-gradient(-45deg, black, transparent 5px);
   -webkit-background-clip: text;
   -webkit-text-stroke: 12px lightgreen;
}
#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  vertical-align: middle;
  margin:10px
}
.record-svg {
  width: 600px;
  height: 600px;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  border-radius: 3px;
  margin-bottom: 0px;  
}
#record_1_{
    animation-name: rotate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transform-origin: center center;
  transform-box: fill-box;
    animation-timing-function: linear;
    display: relative;
}
@keyframes rotate {
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
  }
</style>
</head>
<body>
<h1> Example </h1>
<h2> Record Animation Using CSS </h2>
<div id = "container">
<svg version = "1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="150 -150 1300 1300" style="enable-background:new 150 -150 1300 1300;" xml:space="preserve" class="record-svg">
<g id="BG">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="458.1608" y1="-615.0078" x2="1839.7026" y2="-2176.7507" gradientTransform="matrix(-1 0 0 1 1901.3 1841.3)">
		<stop  offset="8.107462e-02" style="stop-color:#F74AC0"/>
		<stop  offset="0.4338" style="stop-color:#F7879F"/>
		<stop  offset="0.7464" style="stop-color:#F7B786"/>
		<stop  offset="0.9012" style="stop-color:#F7CA7C"/>
	</linearGradient>
	<rect x="150" y="-150" style="fill:url(#SVGID_1_);" width="1300" height="1300"/>
</g>
<g id="base_1_">
	<path style="fill:#F97DCA;" d="M1209.4,897.7H393.2c-50.8,0-91.9-41.2-91.9-91.9V189.6c0-50.8,41.2-91.9,91.9-91.9h816.1
		c50.8,0,91.9,41.2,91.9,91.9v616.1C1301.3,856.5,1260.1,897.7,1209.4,897.7z"/>
	<g>	
			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="918.1329" y1="664.15" x2="1238.3" y2="664.15" gradientTransform="matrix(1 0 0 -1 0 1000)">
			<stop  offset="0" style="stop-color:#F97DCA"/>
			<stop  offset="1" style="stop-color:#F7CA7C"/>
		</linearGradient>	
			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="917.6329" y1="664.15" x2="1238.8" y2="664.15" gradientTransform="matrix(1 0 0 -1 0 1000)">
			<stop  offset="0" style="stop-color:#F97DCA"/>
			<stop  offset="1" style="stop-color:#F7CA7C"/>
		</linearGradient>
		<path style="fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;" d="M1238.3,505.1V205c0-24.9-20.1-45-45-45H921.7
			c-3.6,0-4.9,4.7-1.9,6.5c103.6,63.8,173.3,177.4,175.8,307.5c0,1.7,0.1,20.7,0.1,31.1c0,3.6,3,6.6,6.6,6.6h129.5
			C1235.3,511.7,1238.3,508.7,1238.3,505.1z"/> <g>	
				<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1088.9" y1="446" x2="1240.8" y2="446" gradientTransform="matrix(1 0 0 -1 0 1000)">
				<stop  offset="0" style="stop-color:#F97DCA"/>
				<stop  offset="1" style="stop-color:#F7CA7C"/>
			</linearGradient>	
				<line style="fill:none;stroke:url(#SVGID_4_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="1091.4" y1="554" x2="1238.3" y2="554"/>		
				<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="1080.6" y1="403.7" x2="1240.8" y2="403.7" gradientTransform="matrix(1 0 0 -1 0 1000)">
				<stop  offset="0" style="stop-color:#F97DCA"/>
				<stop  offset="1" style="stop-color:#F7CA7C"/>
			</linearGradient>
				<line style="fill:none;stroke:url(#SVGID_5_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="1083.1" y1="596.3" x2="1238.3" y2="596.3"/>	
				<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="1067.1" y1="361.4" x2="1240.8" y2="361.4" gradientTransform="matrix(1 0 0 -1 0 1000)">
				<stop  offset="0" style="stop-color:#F97DCA"/>
				<stop  offset="1" style="stop-color:#F7CA7C"/>
			</linearGradient>	
				<line style="fill:none;stroke:url(#SVGID_6_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="1069.6" y1="638.6" x2="1238.3" y2="638.6"/>	
				<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1047.9" y1="319.1" x2="1240.8" y2="319.1" gradientTransform="matrix(1 0 0 -1 0 1000)">
				<stop  offset="0" style="stop-color:#F97DCA"/>
				<stop  offset="1" style="stop-color:#F7CA7C"/>
</linearGradient> <line style="fill:none;stroke:url(#SVGID_7_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="1050.4" y1="680.9" x2="1238.3" y2="680.9"/>
				<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="1022" y1="276.8" x2="1240.8" y2="276.8" gradientTransform="matrix(1 0 0 -1 0 1000)">
				<stop  offset="0" style="stop-color:#F97DCA"/>
				<stop  offset="1" style="stop-color:#F7CA7C"/>
			</linearGradient>
				<line style="fill:none;stroke:url(#SVGID_8_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="1024.5" y1="723.2" x2="1238.3" y2="723.2"/>
				<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="987.5" y1="234.5" x2="1240.8" y2="234.5" gradientTransform="matrix(1 0 0 -1 0 1000)">
				<stop  offset="0" style="stop-color:#F97DCA"/>
				<stop  offset="1" style="stop-color:#F7CA7C"/>
			</linearGradient>
				<line style="fill:none;stroke:url(#SVGID_9_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="990" y1="765.5" x2="1238.3" y2="765.5"/>
				<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="871.6" y1="150" x2="1240.8" y2="150" gradientTransform="matrix(1 0 0 -1 0 1000)">
				<stop  offset="0" style="stop-color:#F97DCA"/>
				<stop  offset="1" style="stop-color:#F7CA7C"/>
			</linearGradient>
				<line style="fill:none;stroke:url(#SVGID_10_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="874.1" y1="850" x2="1238.3" y2="850"/>
				<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="940.7" y1="192.3" x2="1240.8" y2="192.3" gradientTransform="matrix(1 0 0 -1 0 1000)">
				<stop  offset="0" style="stop-color:#F97DCA"/>
				<stop  offset="1" style="stop-color:#F7CA7C"/>
			</linearGradient>
				<line style="fill:none;stroke:url(#SVGID_11_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="943.2" y1="807.7" x2="1238.3" y2="807.7"/>
		</g> <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="1099.4" y1="741.7" x2="1178.4" y2="741.7" gradientTransform="matrix(1 0 0 -1 0 1000)">
			<stop  offset="0" style="stop-color:#F97DCA"/>
			<stop  offset="1" style="stop-color:#F7CA7C"/>
		</linearGradient>
		<circle style="fill:none;stroke:url(#SVGID_12_);stroke-width:5;stroke-miterlimit:10;" cx="1138.9" cy="258.3" r="37"/>		
			<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="1061.4" y1="741.7" x2="1216.4" y2="741.7" gradientTransform="matrix(1 0 0 -1 0 1000)">
			<stop  offset="0" style="stop-color:#F97DCA"/>
			<stop  offset="1" style="stop-color:#F7CA7C"/>
		</linearGradient>
		<circle style="fill:none;stroke:url(#SVGID_13_);stroke-width:5;stroke-miterlimit:10;" cx="1138.9" cy="258.3" r="75"/>
	</g>
</g>
<g id="record_1_">
	<g> <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="357.6" y1="500" x2="1057.6" y2="500" gradientTransform="matrix(1 0 0 -1 0 1000)">
			<stop  offset="0" style="stop-color:#F7CA7C"/>
			<stop  offset="1" style="stop-color:#F97DCA"/>
		</linearGradient>
		<circle style="fill:url(#SVGID_14_);" cx="707.6" cy="500" r="350"/>	
			<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="380.9" y1="500" x2="1034.3" y2="500" gradientTransform="matrix(1 0 0 -1 0 1000)">
			<stop  offset="0.2146" style="stop-color:#032161"/>
			<stop  offset="0.8168" style="stop-color:#04318F"/>
		</linearGradient>
		<circle style="fill:url(#SVGID_15_);" cx="707.6" cy="500" r="326.7"/>	
			<circle style="opacity:0.1;fill:none;stroke:#FEEEF7;stroke-miterlimit:10;enable-background:new    ;" cx="707.6" cy="500" r="186.7"/>		
			<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="567.6" y1="500" x2="847.6" y2="500" gradientTransform="matrix(1 0 0 -1 0 1000)">
			<stop  offset="0" style="stop-color:#F97DCA"/>
			<stop  offset="1" style="stop-color:#F7CA7C"/>
		</linearGradient>
			<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="567.1" y1="500" x2="848.1" y2="500" gradientTransform="matrix(1 0 0 -1 0 1000)">
			<stop  offset="0" style="stop-color:#F97DCA"/>
			<stop  offset="1" style="stop-color:#F7CA7C"/>
		</linearGradient>
		<circle style="fill:url(#SVGID_16_);stroke:url(#SVGID_17_);stroke-miterlimit:10;" cx="707.6" cy="500" r="140"/>
		<circle style="fill:#FFFFFF;" cx="707.6" cy="500" r="112.5"/>
			<circle style="opacity:0.1;fill:none;stroke:#FEEEF7;stroke-miterlimit:10;enable-background:new    ;" cx="707.6" cy="500" r="233.3"/>
			<circle style="opacity:0.1;fill:none;stroke:#FEEEF7;stroke-miterlimit:10;enable-background:new    ;" cx="707.6" cy="500" r="280"/>
		<g style="opacity:0.25;enable-background:new    ;">
						<defs> <polygon id="SVGID_18_" points="1060.9,509 707.6,500 1031.6,358.8 "/>
						</defs>
	           <clipPath id="SVGID_19_">
				<use xlink:href="#SVGID_18_"  style="overflow:visible;"/>
			</clipPath>
			<g style="clip-path:url(#SVGID_19_);">
			<circle style="fill:#FEEEF7;" cx="707.6" cy="500" r="326.7"/>
		</g>
</body>
</html>

说明

在上面的示例中，我们使用 CSS 在录制的 CD 上创建了动画。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of  record animation using CSS </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<style>
@keyframes ripple {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.02);
  }
}
body {
  margin: 0;
  padding: 00;
  width: 100%;
  height: 100%;
  display: table;
  background-color: #180d80;
}
h1 {
   font-family:  arial;
   font-weight: 50;
   font-size: 4em;
   text-align: center;
   background: repeating-linear-gradient(45deg, black, lime 5px);
   position: relative;
   -webkit-background-clip: text;
   -webkit-text-stroke: 2px black;
   color: transparent;
   bottom: 60px;
   animation: float 2s ease-in-out infinite;
}
h1::before {  
   z-index: 2;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 10;
   left: 0;
    background: repeating-linear-gradient(-45deg, black, transparent 5px);
   -webkit-background-clip: text;
   -webkit-text-stroke: 12px lightgreen;
}
h2 {
   font-family: arial;
   font-weight: 20;
   font-size: 2em;
   text-align: center;
   background: repeating-linear-gradient(40deg, white, red 5px);
   position: relative;
   -webkit-background-clip: text;
   -webkit-text-stroke: 2px white;
   color: transparent;
   bottom: 10px;
  color: white;
   animation: float 2s ease-in-out infinite; }
h2::before {   
   z-index: 2;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
    background: repeating-linear-gradient(-45deg, black, transparent 5px);
   -webkit-background-clip: text;
   -webkit-text-stroke: 12px lightgreen;
}
body {
  background-color: #333;
  display: grid;
  height: 100vh;
  place-items: center;
}
.checkbox {
  display: none;
}
.checkbox + label {
  --size: 90%;
  --radius: 50%;
  border: 6px solid white;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-block;
  height: 200px;
  width: 200px;
  position: relative;
}
.checkbox + label:before {
  background-color: red;
  border-radius: var(--radius);
  bottom: 0;
  content: ' ';
  height: var(--size);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  transition: all .25s cubic-bezier(1, 0, 0, 0.2);
  width: var(--size);
}
.checkbox:checked + label {
  animation: .15s ripple .25s;
}
.checkbox:checked + label:before {
  --size: 50%;
  --radius: 10%;
  transform: rotateZ(180deg);
}
</style>
<body>
<h1> Example </h1>
<h2> CSS Record Animation </h2>
<input type = "checkbox" name = "checkbox" class = "checkbox" id = "checkbox">
<label for = "checkbox"> </label> 
    </body>
</html>

说明

在上面的示例中，我们使用 CSS 在按钮上创建了动画。

输出

以下是这个例子的输出。

示例 4

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of  record animation using CSS </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<style>
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: table;
  background-color: #180d80;
}
h1 {
  font-family: arial;
  font-weight: 50;
  font-size: 4em;
  text-align: center;
  background: repeating-linear-gradient(45deg, #000, #0f0 5px);
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-stroke: 2px #000;
  color: transparent;
  bottom: 60px;
  animation: float 2s ease-in-out infinite;
}
h1::before {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 10;
  left: 0;
  background: repeating-linear-gradient(-45deg, #000, transparent 5px);
  -webkit-background-clip: text;
  -webkit-text-stroke: 12px #90ee90;
}
h2 {
  font-family: arial;
  font-weight: 20;
  font-size: 2em;
  text-align: center;
  background: repeating-linear-gradient(40deg, #fff, #f00 5px);
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-stroke: 2px #fff;
  color: transparent;
  bottom: 10px;
  color: #fff;
  animation: float 2s ease-in-out infinite;
}
h2::before {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: repeating-linear-gradient(-45deg, #000, transparent 5px);
  -webkit-background-clip: text;
  -webkit-text-stroke: 12px #90ee90;
}
body {
  background-color: #ededed;
}
.record-player {
  height: 200px;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.base {
  background-color: #89c0d2;
  border: 5px solid #000;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  position: absolute;
}
.screw__container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.base__screw {
  position: absolute;
  display: inline-block;
  height: 10px;
  width: 10px;
  background-color: #fff;
  border: 5px solid #000;
  border-radius: 100%;
}
.base__screw:nth-child(1) {
  top: 5%;
  left: 5%;
}
.base__screw:nth-child(2) {
  top: 85%;
  left: 5%;
}
.base__screw:nth-child(3) {
  left: 90%;
  top: 5%;
}
.base__screw:nth-child(4) {
  left: 90%;
  top: 85%;
}
.console {
  width: 22%;
  height: 30%;
  position: relative;
  top: 40%;
  left: 74%;
}
.buttons {
  float: left;
  width: 25%;
  height: 60%;
}
.button {
  width: 100%;
  height: 20%;
  margin: 15%;
  border: 5px solid #000;
  background-color: #fff;
  border-radius: 4px;
}
.volume {
  float: right;
  border-left: 5px solid #000;
  height: 100%;
  width: 20%;
}
.volume:before {
  content: '';
  position: absolute;
  top: 20%;
  right: 5%;
  width: 12px;
  border: 5px solid #000;
  border-radius: 5px;
}
.record {
  position: relative;
  top: 18%;
  left: 14%;
  background-color: #333;
  border: 5px solid #000;
  height: 140px;
  width: 140px;
  border-radius: 100%;
  animation: rotate 18s linear infinite;
}
.record__line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-left: #808080 5px solid;
  border-right: #808080 5px solid;
  border-top: transparent 5px solid;
  border-bottom: transparent 5px solid;
  border-radius: 100%;
}
.record__line-1 {
  height: 110px;
  width: 110px;
}
.record__line-2 {
  height: 80px;
  width: 80px;
}
.record__hole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #808080;
  height: 10px;
  width: 10px;
  border-radius: 100%;
}
.arm {
  position: relative;
  top: -100%;
  left: 22%;
  animation: tilt 18s linear infinite;
  height: 100%;
  width: 100%;
  transform: rotate(20deg);
}
.arm__top {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 8%;
  width: 6%;
  border-radius: 10px;
  background-color: #000;
  transform: translate(-50%, -50%);
  border: 5px solid #000;
}
.arm__middle {
  position: absolute;
  top: 50%;
  left: -51%;
  width: 100%;
  margin: 0 auto;
  height: 60%;
  border-right: 5px solid #000;
}
.arm__bottom {
  position: absolute;
  top: 98%;
  left: 46%;
  height: 6%;
  width: 4%;
  border-radius: 6px;
  border: 5px solid #000;
  background-color: #ccc;
  animation: bump 1s linear infinite;
}
.credit {
  position: fixed;
  bottom: 2%;
  right: 2%;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  font-size: 0.7em;
  color: #282a37;
}
.credit__link {
  text-decoration: none;
  color: #89c0d2;
}
.fa-heart {
  color: #f57256;
}
@-moz-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@-moz-keyframes tilt {
  90% {
    transform: rotate(45deg);
  }
}
@-webkit-keyframes tilt {
  90% {
    transform: rotate(45deg);
  }
}
@-o-keyframes tilt {
  90% {
    transform: rotate(45deg);
  }
}
@keyframes tilt {
  90% {
    transform: rotate(45deg);
  }
}
@-moz-keyframes bump {
  50% {
    transform: translate(-1px, 1px);
  }
}
@-webkit-keyframes bump {
  50% {
    transform: translate(-1px, 1px);
  }
}
@-o-keyframes bump {
  50% {
    transform: translate(-1px, 1px);
  }
}
@keyframes bump {
  50% {
    transform: translate(-1px, 1px);
  }
}
</style>
<body>
<h1> Example Record Animation Using CSS </h1>
<div class="record-player">
  <div class="base">
    <div class="base__screw"></div>
    <div class="base__screw"></div>
    <div class="base__screw"></div>
    <div class="base__screw"></div>
    <div class="console">
      <div class="buttons">
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
      </div>
      <div class="volume"></div>
    </div>
  </div>
  <div class="record">
    <div class="record__line record__line-1"></div>
    <div class="record__line record__line-2"></div>
    <div class="record__hole"></div>
  </div>
  <div class="arm">
    <div class="arm__top"></div>
    <div class="arm__middle"></div>
    <div class="arm__bottom"></div>
  </div>
</div>
</body>
</html>

说明

在上面的示例中，我们使用 CSS 在录制的 CD 上创建了动画。

输出

以下是这个例子的输出。

下一主题CSS 手表动画

使用 CSS 制作 Record Animation

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

使用 CSS 制作 Record Animation

示例 1

示例 2

相关帖子

Foundation CSS

CSS 中如何更改链接颜色

CSS 中如何将文本设为斜体

CSS 中如何更改字体

CSS 中如何对齐文本

如何在表单的 input 元素内使用 CSS 添加图标

Zig zag 下拉菜单的 CSS 概念

CSS 中如何更改图片大小

Responsive CSS

CSS Display Flex

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器