css布局实现十二钟文字效果-html代码-BFW代码库

css布局实现十二钟文字效果

代码语言：html

代码描述：css布局实现十二钟文字效果

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


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

<style>
body {
  background: yellow;
}
h1 {
  position: relative;
  text-align: center;
  color: #353535;
  font-family: 'Oswald', sans-serif;
  font-size: 45px;
  margin: 0;
}

h2 {
  position: relative;
  text-align: center;
  color: #353535;
  font-family: serif;
  font-size: 30px;
  margin: 0;
}

p {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-align: center;
  color: #676767;
}
.intro{
  margin-bottom: 0;
}

.frame {
  width: 90%;
  margin: auto 40px;
  text-align: center;
}

.custom-eft {
  padding: 0 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: inline-block;
  outline: none;
  font-size: 2em;
}

.eft1{
  color: transparent;
        -webkit-text-stroke: 0.03em rgba(0,0,0,1);
   text-shadow: -5px 0 rgba(0, 255, 255, 0.4), 5px 0 rgba(255, 0, 255, 0.4);
}

.eft2{
  font-family: 'Oswald';
  color: #fff;
        background: #ff1f8f;
  border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
}
span:nth-child(1) { color: blue; }
span:nth-child(2) { color: white; background-color: red; font-size: 120%; }
span:nth-child(3) { color: green; }
span:nth-child(4) { color: #fff; text-decoration: underline; }
span:nth-child(5) { color: pink; font-style: italic; }
span:nth-child(6) { color: skyblue; font-style: italic; }
span:nth-child(7) { color: yellowgreen; text-decoration: underline; }
span:nth-c.........完整代码请登录后点击上方下载按钮下载查看