CSS样式旋转360度和 CSS边框四边设置

程序猿_“大神”

已于 2022-11-10 18:12:08 修改

阅读量379

点赞数 1

文章标签： css 前端 html

于 2022-11-10 17:26:45 首次发布

本文链接：https://blog.csdn.net/dyx001007/article/details/127792843

版权

html框架

<div class="home">
   <div class="background1"></div>
   <div class="background2"></div>
   <div class="background3"></div>
</div>

CSS样式

.home {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;/* 下面的图片太大,一直旋转带来了宽度撑高 */
}

  .background1 {
    width: 30rem;
    height: 30rem;
    background: url("../assets/lbx.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    animation: rotate1 15s linear infinite;
  }
  .background2 {
    width: 27rem;
    height: 27rem;
    background: url(../assets/jt.png) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    opacity: 0.8;
    animation: rotate2 15s linear infinite;
  }

  .background3 {
    width: 24.6rem;
    height: 24.6rem;
    background: url(../assets/map.png) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    opacity: 0.8;
  }

/* 围绕圆心旋转-从0-360度 */
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

效果

html代码

<div class="leftHeader">
     <div class="border1"></div>
     <div class="border2"></div>
     <div class="border3"></div>
     <div class="border4"></div>
</div>

css代码

  .leftHeader {
    width: 100%;
    height: 12.5rem;
    position: relative;
    .border1 {
      width: 0.625rem;
      height: 0.625rem;
      position: absolute;
      top: -0.0938rem;
      left: -0.0938rem;
      border-left: 0.125rem solid #3780a9;
      border-top: 0.125rem solid #3780a9;
    }
    .border2 {
      width: 0.625rem;
      height: 0.625rem;
      position: absolute;
      top: -0.0938rem;
      right: -0.0938rem;
      border-right: 0.125rem solid #3780a9;
      border-top: 0.125rem solid #3780a9;
    }
    .border3 {
      width: 0.625rem;
      height: 0.625rem;
      position: absolute;
      bottom: -0.0938rem;
      left: -0.0938rem;
      border-bottom: 0.125rem solid #3780a9;
      border-left: 0.125rem solid #3780a9;
    }
    .border4 {
      width: 0.625rem;
      height: 0.625rem;
      position: absolute;
      bottom: -0.0938rem;
      right: -0.0938rem;
      border-right: 0.125rem solid #3780a9;
      border-bottom: 0.125rem solid #3780a9;
    }