欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

跳动的红心

程序员文章站 2022-03-10 23:14:44
出次学习尝试圆角属性: border-radius四个值 top-left top-right bottom-right bottom-left;(注:当四个值缺少某一个值的时候,由对立面的值进行补充)平移 transform:translate(x,y)x 表示水平方向移动y 表示垂直方向移动旋转 transform:rotate(角度)deg 角度单位 0-360deg缩放 transform:scale(x,y)x 表示的水平方向的缩放y...

初次学习尝试

圆角属性: border-radius

  • 四个值 top-left top-right bottom-right bottom-left;
    (注:当四个值缺少某一个值的时候,由对立面的值进行补充)

平移 transform:translate(x,y)

  • x 表示水平方向移动
  • y 表示垂直方向移动

旋转 transform:rotate(角度)

  • deg 角度单位 0-360deg

缩放 transform:scale(x,y)

  • x 表示的水平方向的缩放

  • y 表示的垂直方向的缩放

  • 1 表示原图形大小,不缩放

  • 比1小 缩小

  • 比1大 放大

关键帧动画

  • 创建动画

    • @keyframes
    @keyframes 动画名称{
    	0%{}      /*动画的起始状态*/
    	...
    	100%{}    /*动画的完成状态*/
    }
    
  • 调用动画 animation

    animation: 动画名称  完成动画的时间(s/ms) 曲线速度  延迟时间  动画播放的次数  是否反向;
    
    • 动画名称 自定义
    • 动画的时间 s/ms
    • 曲线速度 ease-in-out 慢入慢出 linear 匀速
    • 延迟时间 s/ms
    • 动画播放的次数 number/infinite无限次
    • 是否反向 alternate

思路

红心由两个圆一个正方形拼接而成,将红心整体放入一个大的div中,动画效果在大的div中实现

代码实现

css样式部分

<style>
    .wrap{
        
        width: 80px;
        height: 80px;
    /* 调用动画  动画名称  完成动画的时间 曲线速度 动画播放次数 是否反向*/
        animation: scale 0.5s linear infinite alternate;
    }
    .circle{
        background-color: red;
        width: 80px;
        height: 80px;
        border-radius: 50%;
   
    }
    .two{
        transform: translate(52px,-78px);
    }
    .square{
        background-color: red;
        width: 80px;
        height: 80px;
                  /*旋转              平移*/
        transform: rotate(49deg) translate(-85px,-105px);
    }
    @keyframes scale{   /*创建动画*/
        0%{
            transform: scale(1);  /*缩放transform:scale(x,y)   x 表示的水平方向的缩放,y 表示的垂直方向的缩放*/
        }                          /*1 表示原图形大小,不缩放*/
        100%{
            transform: scale(0.8);/*比1小  缩小, 比1大  放大 */
        }
    }
    
    </style>

body部分

<div class="wrap">
        <div class="circle one"></div>
        <div class="circle two"></div>
        <div class="square"></div>
    </div>


本文地址:https://blog.csdn.net/weixin_48291770/article/details/107490526