h5c3等个人笔记

最新推荐文章于 2022-09-24 17:08:16 发布

tinfengyee

最新推荐文章于 2022-09-24 17:08:16 发布

阅读量107

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/tinfengyee/article/details/102564283

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

2倍图,3倍图使用
scss

@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
    background-image: url($url + "@3x.png")
  }
}

回顾css3渐变

.linearGradient{
    width: 400px;
    height: 100px;
    background-image: linear-gradient(to right,pink,blue);
}
background: radial-gradient(#f8f8f8 0%, #f8f8f8 65%, transparent 65%, transparent 100%);

transform-origin的理解
以自身的(x, y)轴为原点,

值可以是bottom, top, left, right | 0px 0px | center || 50%

时钟案例:

  <div class="clock">
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
  </div>

.hour {
  position: absolute;
  left: 105px;
  width: 6px;
  height: 50px;
  background-color: #000;
  border-radius:6px;
  -webkit-transform-origin:3px 105px; 
          transform-origin:3px 105px;
}
.hour:nth-child(2) {
  transform:rotate(45deg);
}
.hour:nth-child(3) {
  transform:rotate(90deg);
}
.hour:nth-child(4) {
  transform:rotate(-45deg);
}
.hour:nth-child(5) {
  transform:rotate(-90deg);
}