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

本文详述了如何利用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);
  }
}
复制代码

参考链接

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值