border-radius结合动画创建酷炫的效果

最新推荐文章于 2024-06-20 14:09:55 发布

转载最新推荐文章于 2024-06-20 14:09:55 发布 · 485 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bc4441fe51d4527ed007ab7

本文详述了如何利用CSS3的border-radius属性创建各种酷炫的视觉效果，包括圆形、椭圆以及动态变化的形状。通过实例代码，展示了border-radius属性的灵活运用，配合动画实现动态的形状变换。

如何使用border-radius创建酷炫的效果

border-radius圆角

CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。不允许负值。
椭圆的水平半径"（horizontal radius）和"垂直半径"（vertical radius）如border-radius: 15px;

border-radius: 30% 70% 20% 40%图解

border-radius: 4em 8em及border-radius: 4em / 8em 图解

border-radius 70% 30% 30% 70% / 60% 40% 60% 40%解释

border-radius结合动画应用


* {
  box-sizing: border-box;
}
body {
  background: #003;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.box {
  width: 60vmin;
  height: 60vmin;
  border: 1px dashed rgba(255,255,255,0.4);
  position: relative;
  
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.4);
    transform: scale(1.42);
  }
}

.spin-container {
  width: 100%;
  height: 100%;
  animation: spin 12s linear infinite;
  position: relative;
}

.shape {
  width: 100%;
  height: 100%;
  transition: border-radius 1s ease-out;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph 8s ease-in-out infinite both alternate;
  position: absolute;
  overflow: hidden;
  z-index: 5;
}

.bd {
  width: 142%;
  height: 142%;
  position: absolute;
  left: -21%;
  top: -21%;
  background: url(https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2868fd5c3f30697d38732224e0ef51ed);
  background-size: 100%;
  background-position: center center;
  display: flex;
  color: #003;
  font-size: 5vw;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  animation: spin 12s linear infinite reverse;
  opacity: 1;
  z-index: 2;
}

@keyframes morph {
  0% {border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;} 
  100% {border-radius: 40% 60%;} 
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
复制代码