CSS怦然心动（伪类元素+动画+定位）

Krama.

已于 2023-07-04 23:51:38 修改

阅读量213

点赞数

文章标签：前端 css

于 2023-07-04 23:26:44 首次发布

本文链接：https://blog.csdn.net/qq_65879945/article/details/131544962

版权

1.创建div元素

<body>
    <div class="all">
        <div class="one"></div>
    </div>
    
</body>

2.创建一个正方形（相对定位）

relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局

 .one{
 			postion:relative;
 			margin:400px
            height: 100px;
            width: 100px;
            background-color: red;
          
        }

3.创建第一个圆（使用伪类元素+绝对定位）

:before伪元素：可以在元素的内容前面插入新内容。
:after 伪元素: 可以在元素的内容之后插入新内容。

示例如下：

h1:before
{
content:’ ';
}

代码如下

.one:before{
            position: absolute;
            left: -50px;
            height: 100px;
            width: 100px;
            content: '';
            background-color: red;
            border-radius: 100%;
        }

4.创建第二圆（使用伪类元素+绝对定位）

absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位

  .one::after{
            position: absolute;
            top: -50px;
            height: 100px;
            width: 100px;
            content: '';
            background-color: red;
            border-radius: 100%;
        }

截止目前的效果图
这里是截止目前的效果图

5.将图形摆正旋转

transform:rotate(45deg):将图形旋转45度
deg：rotate专属单位

.all
            transform: rotate(45deg);
        }

6.怦然心动（添加动画）

/* 调用 */
        .one{
            /* 使用简写属性把 animation 绑定到一个<div> 元素  0.5s为自定义动画时间*/
            animation: rolate 0.5s ;
            /*animation-iteration-count：循环次数   infinite为无限次  */
	        animation-iteration-count: infinite;
            
        }
        /* 动画方法的定义 rolate为它的自定义方法名 
            0％是开头动画，100％是当动画完成。
            */
       @keyframes rolate
       {
         /* 初始动画 */
        0% {
            transform:scale(1);
       
        }
        /* 放大1.5倍 */
        50%{
            transform: scale(1.5);
        }

        100% {
            transform:scale(1);
        }
        
       }