JavaScript小练习(3)

2018-10-13

JavaScript、html、css 小练习与知识点

利用html + css 相关知识，绘制Opera的Logo图标

Opera-logo

<div class="opera">
  <div class="opera-top">
<!-- 两层图层，圆角设置成椭圆，再绝对位置覆盖 -->
  </div>
</div>

<style media="screen">
  .opera{
    width: 258px;
    height: 275px;
    background: #F22629;
    border-radius: 258px 258px 258px 258px/275px 275px 275px 275px;
    position:relative;
  }
  .opera-top{
    width: 112px;
    height: 231px;
    background: #fff;
    border-radius: 112px 112px 112px 112px/231px 231px 231px 231px;
    /* border-radius的含义是：圆角。border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。
    本来只弄前面的话会变成圆；所以当同时设置时就变成椭圆了 */
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: 50%;
    margin-left: -56px;
    margin-top: -115px;
  }
</style>

利用css绘制圆弧、圆饼图

<div class="round">
  <div class="radius"></div>
  <p class="radius-text">如果想添加文字也行</p>
  <!-- 绝对定位添加文字解析 -->
</div>

<style media="screen">
  .round{
    width: 300px;
    height: 300px;
    background: #fff;
    border-radius: 300px 300px 300px 300px;
    position:relative;
  }
  .radius{
    width: 0px;
    height: 0px;
    background: rgb(84, 77, 75);
    border-radius: 300px 300px 300px 300px;
    border: 150px solid;
    /* 三角形的绘制原理+圆角切割 */
    border-color: red transparent transparent transparent ;
    /* 透明化其它不需要的三角区域 */
    position:absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin-left: -150px;
    margin-top: -150px;
  }
  .radius-text{
    font-size: 12px;
    position: absolute;
    left: 32%;
    top:60%;
    z-index: 2;
  }
</style>

利用css话简单饼图：

<div class="pie"></div>

.pie{
  width: 140px;
  height: 140px;
  background: #8BC34A;
  border-radius: 50%;
  background-image: linear-gradient(to right,transparent 50%, #655 0);
  /* CSS3中Gradient中的两个属性一个，
  这两个属性分别为linear-gradient（线性渐变）和radial-gradient（径性渐变）;
  background: linear-gradient(#fb3 20%, #58a 80%);
  将会出现过渡的效果，#fb3开始渐变的位置是20%，在20%之前就只有#fb3，到80%就是#58a */
}
.pie::before{
  /* 思路：基于 transform 的解决方案，通过一个rotate()变形属性来使这个伪元素转起来 */
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  transform: rotate(.1turn);/*10%*/
  transform: rotate(.2turn);/*20%*/
  transform: rotate(.3turn);/*30%*/
}

用css动画来实现一个饼图从0变化到100%的动画，从而得到一个酷炫的进度指示器。

<div class="pie"></div>

.pie{
  width: 140px;
  height: 140px;
  background: yellowgreen;
  border-radius: 50%;
  background-image: linear-gradient(to right,transparent 50%, currentColor 0);
  color: #655;
}
.pie::before{
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  -webkit-animation: spin 3s linear infinite, bg 6s step-end infinite;
}
@@keyframes spin {
  to{-webkit-transform: rotate(.5turn);}
}
@@keyframes bg {
  50%{background: currentColor;}
}
// 代码好像有点问题 OVO

css做一个漂亮的立体按钮

<div class="box">
  <div class="form-actions">
    <button type="button" class="btn">Click Me</button>
  </div>
</div>

.box{
width: 550px;
text-align: center;
line-height: 46px;
margin:40px auto;
}
.btn{
position: relative;
font-weight:bold;
width: 124px;
height: 44px;
border-radius: 3px;
border: 1px solid #c0c0c0;
margin:0 50px 40px 0;
}
.btn:nth-child(1){
color: #848484;
border-color: #cecece;
box-shadow:inset 0 1px 0 #ececec,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#e5e5e5,#d5d5d5);
background:-moz-linear-gradient(top,#e5e5e5,#d5d5d5);
background:-o-linear-gradient(top,#e5e5e5,#d5d5d5);
background:-ms-linear-gradient(top,#e5e5e5,#d5d5d5);
background:linear-gradient(top,#e5e5e5,#d5d5d5);
}
/* 兼容各种浏览器 */
.btn:nth-child(1):hover{
background:-webkit-linear-gradient(top,#f0f0f0,#dedddd);
background:-moz-linear-gradient(top,#f0f0f0,#dedddd);
background:-o-linear-gradient(top,#f0f0f0,#dedddd);
background:-ms-linear-gradient(top,#f0f0f0,#dedddd);
background:linear-gradient(top,#f0f0f0,#dedddd);
}
.btn:nth-child(1):active{
top:4px;
box-shadow:inset 0 1px 3px #acacac;
background:-webkit-linear-gradient(top,#c6c6c6,#c6c6c6);
background:-moz-linear-gradient(top,#c6c6c6,#c6c6c6);
background:-o-linear-gradient(top,#c6c6c6,#c6c6c6);
background:-ms-linear-gradient(top,#c6c6c6,#c6c6c6);
background:linear-gradient(top,#c6c6c6,#c6c6c6);
}
.btn:before,
.btn:after{
position: absolute;
content: "";
height: 50%;
border-radius: 50%;
z-index: -1;
}
.btn:before {
/* 上阴影 */
width: 90%;
left: 5%;
top:12%;
box-shadow: 0 -7px 4px rgba(0,0,0,0.3);
}
.btn:after {
/* 下阴影 */
width: 80%;
left: 10%;
bottom: 9%;
box-shadow: 0 7px 4px rgba(0,0,0,0.4);
}

。。。