css美化checkbox实现帆船海上漂流切换开关效果代码-html代码-BFW代码库

css美化checkbox实现帆船海上漂流切换开关效果代码

代码语言：html

所属分类：其他

代码描述：css美化checkbox实现帆船海上漂流切换开关效果代码

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

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

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


  
<style>
body{
    zoom: 4.9;
    padding: 10px;
    
}
@keyframes wave {
  0%,100% { background-position: 0.1em 100%, 0.3em 100%; }
  50% { background-position: 0.6em 100%, -0.6em 100%; }
}

@keyframes float {
  0%, 100% { top: 45%; rotate: -2deg; }
  50% { top: 50%; rotate: 2deg }
}
.paper-ship {
  appearance: none;
  font-size: 1em;
  width: 2.5em;
  height: 1em;
  box-sizing: content-box;
  border: max(1px, 0.05em) solid;
  border-radius: 3em;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(100% 56% at 50% 0%, #0000 99%, #5ca8) 0 100% / 25% 60%,
    #cff;
  background-repeat: repeat-x;
  
 .........完整代码请登录后点击上方下载按钮下载查看