[100天挑战100个前端效果]第十三天---跳动的爱心(有详细的思路分析！)

最新推荐文章于 2022-11-23 20:07:03 发布

钧桐

最新推荐文章于 2022-11-23 20:07:03 发布

阅读量264

点赞数 1

分类专栏： 100天挑战100个前端效果文章标签： css3 html

本文链接：https://blog.csdn.net/qq_42136832/article/details/115366428

版权

100天挑战100个前端效果专栏收录该内容

25 篇文章 8 订阅

订阅专栏

跳动的爱心

先让我们来看看实现的效果
- html代码
- css代码
代码思路分析和知识总结

先让我们来看看实现的效果

在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第十三天</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box"></div>
    <p>Love is to waster time!</p>
</body>
</html>

css代码

:root {
    --background-color: #2c3e50;
    --border-color: #7591AD;
    --text-color: #34495e;
    --color1: #EC3E27;
    --color2: #fd79a8;
    --color3: #0984e3;
    --color4: #00b894;
    --color5: #fdcb6e;
    --color6: #e056fd;
    --color7: #F97F51;
    --color8: #BDC581;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.box{
    position: relative;
    width: 180px;
    height: 180px;
    background-color: var(--color1);
    
    animation: animate 0.7s ease-in-out infinite;
}
.box::before,
.box::after{
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 100%;
    background-color: var(--color1);
}
.box::before{
    transform: translate(-50%,0);
}
.box::after{
    transform: translate(0,-50%);    
}
p{
    margin-top: 100px;
    font-size: 40px;
    color: #fff;
}
@keyframes animate{
    0%{
        transform: scale(1) rotate(45deg);;
    }
    100%{
        transform: scale(0.8) rotate(45deg);;       
    }
}

代码思路分析和知识总结

今天主要就是用到了一个缩放的函数scale

标签	作用
scale()	来实现元素的缩放效果

下面让我们讲讲如何设计爱心的把！
1.设置一个box (画个正方形)
2.before after 两个内切圆
3.内切圆一个左移50%一个上移50%就出现了一个平躺的爱心
4.我们将整个box(before和after也会一起移动）向右旋转45度就得到了正的爱心，是的，爱心就支棱起来了！
5.下面，我们如何来设计动画呢？就是用到scale函数，创建keyframes，调用两个缩放就好了，不要太频繁，0，100调用就好，记得要旋转45度哦
6.在box里面animation指定keyframes即可！！！

钧桐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[100天挑战100个前端效果]第十三天---跳动的爱心(有详细的思路分析！)

跳动的爱心先让我们来看看实现的效果html代码css代码代码思路分析和知识总结先让我们来看看实现的效果html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
复制链接

扫一扫

专栏目录