• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 前端开发 > border-radius结合动画创建酷炫的效果

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

    作者: 分类:前端开发 点击: 64 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的头条号,我会每天更新免费视频课程。

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

      border-radius圆角

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

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

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

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

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

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

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

      border-radius结合动画应用

      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);
        }
      }
      

      参考链接



      欢迎“关注”我的头条号,我会每天更新免费视频课程。

      头条二维码
      关注我的头条号
      头条二维码
      加入我的QQ群

    文章作者:sunny
    本文地址:http://wanlimm.com/77202006208285.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    一条回应:“border-radius结合动画创建酷炫的效果”

    1. hcl1989说道:

      受教了,写的很实用。

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.