HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白

HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白

一、拉面版

css部分

*{/*      初始化页面元素内外边距*/margin:0;padding: 0;}body{/*      弹性布局元素垂直水平居中*/display:flex;justify-content: center;align-items: center;
/*      占浏览器窗口高度占比*/height: 100vh;background: #000;}ul{/*      相对位置*/position:relative;display: flex;height: 200px;}ul::after{content:'以我所长给予你最美丽温柔';wight:400px;position: absolute;top:0;left:50%;color: aqua;font-size: 30px;font-weight: 700;transform: translate(-50%,-400%);}li{/*      定义下无序表点的大小 这里配合动画可变换不同形状的心*/width:20px;height: 20px;border-radius: 10px;margin: 0 10px;}li:nth-child(1){animation:love1 5s 0s infinite;background: red;}li:nth-child(2){animation:love2 5s 0.2s infinite;background: aqua;}li:nth-child(3){animation:love3 5s 0.4s infinite;background:darksalmon;}li:nth-child(4){animation:love4 5s 0.6s infinite;background:pink;}li:nth-child(5){animation:love5 5s 0.8s infinite;background:yellow;}li:nth-child(6){animation:love4 5s 1s infinite;background:pink;}li:nth-child(7){animation:love3 5s 1.2s infinite;background:darksalmon;}li:nth-child(8){animation:love2 5s 1.4s infinite;background:aqua;}li:nth-child(9){animation:love1 5s 1.6s infinite;background:red;}
/*  定义动画*/@keyframes love1{30%,50%{height:60px;transform: translateY(-30px);}70%,100%{height:20px;transform: translateY(0);}}@keyframes love2{30%,50%{height:120px;transform: translateY(-60px);}70%,100%{height:20px;transform: translateY(0);}}@keyframes love3{30%,50%{height:160px;transform: translateY(-75px);}70%,100%{height:20px;transform: translateY(0);}}@keyframes love4{30%,50%{height:180px;transform: translateY(-60px);}70%,100%{height:20px;transform: translateY(0);}}@keyframes love5{30%,50%{height:200px;transform: translateY(-45px);}70%,100%{height:20px;transform: translateY(0);}}

HTML部分

<body><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</body>

二、跳动版

css部分

*{padding:0;margin: 0;}body{display:flex;justify-content: center;align-items: center;height: 100vh;}.love{position:relative;width: 200px;height: 200px;transform: rotate(45deg);background: crimson;animation: love 1s infinite;}.love::after,.love::before{content:'';position: absolute;width: 200px;height: 200px;border-radius: 50%;background: crimson;animation: love 1s infinite;}.love::after{top:0;left: -100px;}.love::before{top:-100px;left: 0;}
/*      定义心跳动画*/@keyframes love{0%{width:200px;height: 200px;}20%{width:230px;height: 230px;background: #ef3953;}100%{width:200px;height: 200px;}}

HTML部分

<body><div class="love"></div>
</body>

实际效果类似gif动态图

HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白相关推荐

html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
html css浪漫页面,程序员的浪漫表白代码（JS+CSS+HTML）附带源码
以下是html代码: 寒姨我爱你--帝王组仁希告白源码本页面采用HTML5编辑,目前您的浏览器无法显示,请换成谷歌(Chrome)或者火狐(Firefox)浏览器,或者其他游览器的最新版本. 亲爱的 ...
程序员的浪漫表白代码（JS+CSS+HTML）附带源码
以下是html代码: ------------------------------------------------------ 需要完整代码的加Q裙(备注CSDN): 前:745 中:357 后: ...
python画爱心原理_七夕倒计时，程序员式优雅表白，教你用python代码画爱心
还能用python代码画爱心?还有这种操作?这是什么原理? 不相信python代码可以画爱心?先来一张效果图来看看效果吧! 用python代码画爱心的思路是怎样的? 1.怎么画心形曲线 2.怎么填满心 ...
520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)
❉ 来自程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)可自定义编辑文字一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,是不是要给 ...
css纯加载动画,纯CSS实现loading动画加载效果
原标题:纯CSS实现loading动画加载效果 loading动画图标的做法有很多.一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制 ...
android 音符动画效果,纯css实现音符跳动效果
效果如图: image.png 代码: 纯css实现音符跳动效果 .voice { display: flex; align-items: flex-end; justify-content: cen ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...

HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白

一、拉面版

二、跳动版

HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白相关推荐

最新文章

热门文章