vue世界时区选择显示时间和昼夜动画效果-html代码-BFW代码库

代码语言：html
所属分类：选择器
代码描述：vue世界时区选择显示时间和昼夜动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<style>
body {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  background: #f3f8fc;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#f3f8fc), to(#efe6f9));
  background: linear-gradient(to bottom, #f3f8fc 0%, #efe6f9 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f8fc', endColorstr='#efe6f9',GradientType=0 );
  /* IE6-9 */
  width: 100vw;
  height: 100vh;
  min-height: 700px;
}

#app {
  color: white;
  max-width: 300px;
  padding: 60px;
  background: #2b323a;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #2b323a 0%, #1d0c1f 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b323a', endColorstr='#1d0c1f',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  margin: 30px auto;
  display: table;
  box-shadow: 16px 16px 32px rgba(30, 15, 33, 0.5);
}

select, option {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

select {
  background: transparent;
  color: #b1afb8;
  font-size: 18px;
  margin: -23px auto;
  border: 1px solid #4f4d53;
  display: table;
  line-height: 20px;
  text-align: center;
  position: relative;
  z-index: 3000;
}

.dial {
  width: 100%;
  opacity: 0.85;
}

.tree-front-group {
  opacity: 0.5;
  -webkit-transform: translateX(-5px);
          transform: translateX(-5px);
}

#moonstars {
  opacity: 0;
}

svg text {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

@media (max-width: 600px) {
  #app {
    max-width: 200px;
    margin: 10px auto;
  }

  body {
    min-height: 500px;
  }
}
#app:not(:root:root) {
  padding: 30px;
}
</style>

</head>
<body translate="no">
<div id="app">
<svg class="dial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="150 0 350 600">
<defs>
<clipPath id="clip-path">
<path fill="none" d="M27.7.3h331.7v332.32H27.7z" />
</clipPath>
<clipPath id="clip-path-2">
<path fill="none" clip-path="url(#clip-path)" d="M28.4.9h.6l-.6.7V.9z" />
</clipPath>
<clipPath id="clip-path-3">
<path fill="none" d="M27.7.3h331.7v332.32H27.7z" />
</clipPath>
<clipPath id="clip-path-19" transform="translate(131.5 -.3)">
<path fill="none" d="M-3.7 567.7l194-123.4 211.4 120-15.4-308.6-386-1.4-4 313.4z" />
</clipPath>
<linearGradient id="linear-gradient" x1="324.49" y1="624" x2="324.49" y2="277.41" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#d774e8" />
<stop offset="0.44" stop-color="#c87ee7" />
<stop offset="0.61" stop-color="#9f98e5" />
<stop offset="0.83" stop-color="#5fc1e1" />
<stop offset="1" stop-color="#2be2de" />
</linearGradient>
<linearGradient id="linear-gradient-2" x1="325.83" y1="554.88" x2="325.83" y2="349.19" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#686571" />
<stop offset="0.62" stop-color="#696370" />
<stop offset="0.85" stop-color="#6c5c6b" />
<stop offset="0.91" stop-color="#6d5969" />
<stop offset="0.93" stop-color="#725568" />
<stop offset="0.95" stop-color="#7f4b65" />
<stop offset="0.98" stop-color="#953a60" />
<stop offset="1" stop-color="#ab295b" />
</linearGradient>
<clipPath id="clip-path-21" transform="translate(131.5 -.3)">
<path d="M437-51H-42v479H4.7c12.5-94.3 93.1-167 190.8-167s178.3 72.7 190.8 167H437z" fill="none" />
</clipPath>
<clipPath id="clip-path-22" transform="translate(131.5 -.3)">
<path fill="none" clip-path="url(#clip-path-2)" d="M27.1-.4h-.7l.7-.6v.6z" />
</clipPath>
<clipPath id="clip-path-23" transform="translate(131.5 -.3)">
<path fill="none" d="M27.7.3h331.7v332.32H27.7z" />
</clipPath>
<linearGradient id="linear-gradient-3" x1="489.5" y1="1131.7" x2="489.5" y2="935.21" gradientTransform="matrix(1 0 0 -1 -164.51 1139.7)" gradientUnits="userSpaceOnUse">
<stop id="stopcolor" offset="0" stop-color="#76b4e8" />
<stop offset="1" stop-color="#c4f7fb" />
</linearGradient>
<linearGradient id="linear-gradient-4" x1="488.88" y1="885.92" x2="488.88" y2="1051.6" gradientTransform="matrix(1 0 0 -1 -164.51 1139.7)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" />
<stop offset="1" />
</linearGradient>
<linearGradient id="linear-gradient-5" x1="488.88" y1="885.92" x2="488.88" y2="1051.6" gradientTransform="matrix(1 0 0 -1 -164.51 1139.7)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffff4f" />
<stop offset="1" stop-color="#aabb74" />
</linearGradient>
<linearGradient id="linear-gradient-6" x1="489.17" y1="842.38" x2="489.17" y2="1037.32" gradientTransform="matrix(1 0 0 -1 -164.51 1139.7)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#b3b3b3" />
<stop offset="1" />
</linearGradient>
<linearGradient id="linear-gradient-7" x1="489.17" y1="842.38" x2="489.17" y2="1037.32" gradientTransform="matrix(1 0 0 -1 -164.51 1139.7)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#e30057" />
<stop offset="1" stop-color="#aabb74" />
</linearGradient>
<radialGradient id="radial-gradient" cx="604.71" cy="1087.78" r="39.85" gradientTransform="matrix(1 0 0 -1 -164.51 1139.7)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" />
<stop offset="0.89" stop-color="#fff" stop-opacity="0" />
</radialGradient>
<radialGradient id="radial-gradient-2" cx="473.92" cy="879.62" r="56.53" gradientTransform="matrix(1 0 0 -1 -164.51 1139.7)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f4f4f4" />
<stop offset="1" />
</radialGradient>
<radialGradient id="radial-gradient-3" cx="473.92" cy="879.62" r="56.53" gradientTransform="matrix(1 0 0 -1 -164.51 1139.7)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#8454a8" />
<stop offset="1" stop-color="#9d93c8" />
</radialGradient>
<linearGradient id="linear-gradient-8" x1="-369.49" y1="873.88" x2="-361.62" y2="873.88" gradientTransform="rotate(180 -105.55 570)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#696969" />
<stop offset="0.45" stop-color="#fff" />
<stop offset="0.8" stop-color="#fff" />
</linearGradient>
<linearGradient id="linear-gradient-9" x1="-369.49" y1="873.88" x2="-361.62" y2="873.88" gradientTransform="rotate(180 -105.55 570)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#3c2c43" />
<stop offset="0.45" stop-color="#96443d" />
<stop offset="0.8" stop-color="#77415b" />
</linearGradient>
<linearGradient id="linear-gradient-10" x1="-355.98" y1="890.59" x2="-349.62" y2="890.59" xlink:href="#linear-gradient-8" />
<linearGradient id="linear-gradient-11" x1="-355.98" y1="890.59" x2="-349.62" y2="890.59" xlink:href="#linear-gradient-9" />
<linearGradient id="linear-gradient-12" x1="-414.12" y1="863.62" x2="-400.26" y2="863.62" xlink:href="#linear-gradient-8" />
<linearGradient id="linear-gradient-13" x1="-414.12" y1="863.62" x2="-400.26" y2="863.62" xlink:href="#linear-gradient-9" />
<radialGradient id="radial-gradient-4" cx="618.47" cy="846.26" r="36.8" xlink:href="#radial-gradient-2" />
<radialGradient id="radial-gradient-5" cx="618.47" cy="846.26" r="36.8" xlink:href="#radial-gradient-3" />
<linearGradient id="linear-gradient-14" x1="-516.57" y1="842.52" x2="-511" y2="842.52" xlink:href="#linear-gradient-8" />
<linearGradient id="linear-gradient-15" x1="-516.57" y1="842.52" x2="-511" y2="842.52" xlink:href="#linear-gradient-9" />
<linearGradient id="linear-gradient-16" x1="-507.01" y1="860.05" x2="-502.51" y2="860.05" xlink:href="#linear-gradient-8" />
<linearGradient id="linear-gradient-17" x1="-507.01" y1="860.05" x2="-502.51" y2="860.05" xlink:href="#linear-gradient-9" />
<linearGradient id="linear-gradient-18" x1="-548.15" y1="831.8" x2="-538.35" y2="831.8" xlink:href="#linear-gradient-8" />
<linearGradient id="linear-gradient-19" x1="-548.15" y1="831.8" x2="-538.35" y2="831.8" xlink:href="#linear-gradient-9" />
<radialGradient id="radial-gradient-6" cx="359.75" cy="889.81" r="45.37" xlink:href="#radial-gradient-2" />
<radialGradient id="radial-gradient-7" cx="359.75" cy="889.81" r="45.37" xlink:href="#radial-gradient-3" />
<linearGradient id="linear-gradient-20" x1="-260.64" y1="883.27" x2="-255.07" y2="883.27" xlink:href="#linear-gradient-8" />
<linearGradient id="linear-gradient-21" x1="-260.64" y1="883.27" x2="-255.07" y2="883.27" xlink:href="#linear-gradient-9" />
<linearGradient id="linear-gradient-22" x1="-251.08" y1="900.8" x2="-246.58" y2="900.8" xlink:href="#linear-gradient-8" />
<linearGradient id="linear-gradient-23" x1="-251.08" y1="900.8" x2="-246.58" y2="900.8" xlink:href="#linear-gradient-9" />
<linearGradient id="linear-gradient-24" x1="-292.22" y1="872.54" x2="-282.42" y2="872.54" xlink:href="#linear-gradient-8" />
<linearGradient id="linear-gradient-25" x1="-292.22" y1="872.54" x2="-282.42" y2="872.54" xlink:href="#linear-gradient-9" />
</defs>
<title>
    time6-export
  </title>
<g id="Layer_1" data-name="Layer 1">
<text id="currentlocation" transform="translate(272.4 555.8)" font-size="12" fill="#686571" font-family="MyriadPro-Semibold, Myriad Pro" font-weight="700">
CURRENT LOCATION
</text>
<g opacity="0.33">
<g clip-path="url(#clip-path-19)">
<circle cx="324.5" cy="450.7" r="167.3" fill="none" stroke-miterlimit="10" stroke-width="12" stroke-dasharray="2 5.01" stroke="url(#linear-gradient)" />
</g>
</g>
<text transform="translate(325 465.2)" font-size="36" fill="#fff" font-family="MyriadPro-Semibold, Myriad Pro" font-weight="700" text-anchor="middle">
{{ timeVal }}
</text>
<text transform="translate(281.8 423.9)" font-size="17.23" fill="#686571" font-family="MyriadPro-Semibold, Myriad Pro" font-weight="700">
<tspan letter-spacing="-0.04em">L</tspan><tspan x="7.8" y="0" letter-spacing="0em">O</tspan><tspan x="19.9" y="0" letter-spacing="0.01em">C</tspan><tspan x="30.2" y="0">AL</tspan><tspan x="49.6" y="0" letter-spacing="-0.04em"> </tspan><tspan x="52.5" y="0">TIME</tspan>
</text>
<g id="changecolor">
<g clip-path="url(#clip-path-19)">
<g id="dialspin">
<circle cx="325.8" cy="452" r="102.3" fill="none" stroke-miterlimit="10" stroke="url(#linear-gradient-2)" />
<circle cx="327.2" cy="350" r="2.2" fill="#ab295b" />
</g>
</g>
</g>
<text transform="translate(310.5 306.8)" font-size="12" fill="#686571" font-family="MyriadPro-Semibold, Myriad Pro" font-weight="700">
12<tspan x="12.9" y="0" letter-spacing="-0.01em">P</tspan><tspan x="19.4" y="0">M</tspan>
</text>
<text transform="translate(179.1 400.9)" font-size="12" fill="#686571" font-family="MyriadPro-Semibold, Myriad Pro" font-weight="700">
6<tspan x="6.4" y="0" letter-spacing="0em">A</tspan><tspan x="14" y="0">M</tspan>
</text>
<text transform="translate(444.1 400.9)" font-size="12" fill="#686571" font-family="MyriadPro-Semibold, Myriad Pro" font-weight="700">
6<tspan x="6.4" y="0" letter-spacing="-0.01em">P</tspan><tspan x="13" y="0">M</tspan>
</text>
<text transform="translate(173.1 470)" font-size="12" fill="#686571" font-family="MyriadPro-Semibold, Myriad Pro" font-weight="700">
3<tspan x="6.4" y="0" letter-spacing="0em">A</tspan><tspan x="14" y="0">M</tspan>
</text>
<text transform="translate(449.1 470)" font-size="12" fill="#686571" font-family="MyriadPro-Semibold, Myriad Pro" font-weight="700">
9<tspan x="6.4" y="0" letter-spacing="-0.01em">P</tspan><tspan x="13" y="0">M</tspan>
</text>
<text transform="translate(227.4 339.4)" font-size="12" fill="#686571" font-family="MyriadPro-Semibold, Myriad Pro" font-weight="700">
9<tspan x="6.4" y="0" letter-spacing="0em">A</tspan><tspan x="14" y="0">M</tspan>
</text>
<text transform="translate(399.1 339.4)" font-size="12" fill="#686571" font-family="MyriadPro-Semibold, Myriad Pro" font-weight="700">
3<tspan x="6.4" y="0" letter-spacing="-0.01em">P</tspan><tspan x="13" y="0">M</tspan>
</text>
<g id="rad.........完整代码请登录后点击上方下载按钮下载查看