HTML+CSS制作七夕跳动的红心动画效果

简介: HTML+CSS制作七夕跳动的红心动画效果

HTML+CSS制作七夕跳动的红心动画效果

效果图如下:

HTML部分源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>帮我买张票!去哪里?去你心里。</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);
    transform: rotate(45deg);
    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);
    }
}


相关文章
|
4天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
44 34
|
1天前
html5+svg太空人404动画模板源码
html5+svg太空人404动画模板源码
27 17
|
3天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
16 2
|
3天前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
11 1
|
8月前
|
前端开发 内存技术
CSS动画示例(上一篇是CSS过渡…)
CSS动画示例(上一篇是CSS过渡…)
|
8月前
|
前端开发
CSS3中的动画示例
CSS3中的动画示例
|
前端开发
css扫描动画效果demo示例(整理)
css扫描动画效果demo示例(整理)
|
前端开发
6种css预载动画效果demo效果示例(整理)
6种css预载动画效果demo效果示例(整理)

热门文章

最新文章