网页动态爱心效果,表白小爱心


目录

html代码:
index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>05 520表白小爱心</title><link rel="stylesheet" type="text/css" href="index.css"/></head><body><div class="heart"></div></body>
</html>

css代码
index.css

*{margin: 0px;padding: 0px;
}
html{animation: html 4s ease infinite;
}.heart{width: 200px;height: 200px;background-color: #eb3f84;margin: 200px auto;position: relative;transform: rotate(45deg);animation: heart 4s ease infinite;
}
.heart::before{content: "";width: 200px;height: 200px;background-color: #eb3f84;border-radius: 50%;position: absolute;top: -100px;left: 0;animation: left 4s ease infinite;transform: all 1s ease;
}
.heart::after{content: "";width: 200px;height: 200px;background-color: #eb3f84;border-radius: 50%;position: absolute;top:0;left: 100px;animation: right 4s ease infinite;transform: all 1s ease;
}@keyframes  html{0%{background-color: #eb3f84;}50%{background-color: #fff;}100%{background-color: #eb3f84;}
}@keyframes heart{0%{transform: rotate(0deg);border-radius: 200px;background-color: #fff;}30%{transform: rotate(45deg);border-radius: 10px;}50%{background-color: #eb3f84;}70%{transform: rotate(45deg);border-radius: 10px;}100%{transform: rotate(90deg);border-radius: 200px;background-color: #fff;}
}@keyframes  left{0%{top:0px;background-color: #FFF;}30%{top:-100px;}50%{background-color: #eb3f84;}70%{top: -100px;}100%{top: 0;background-color: #ff;}}
@keyframes  right{0%{left:0px;background-color: #FFF;}30%{left:-100px;}50%{background-color: #eb3f84;}70%{left: -100px;}100%{left: 0;background-color: #ff;}}

网页动态爱心效果html和css动态效果相关推荐

  1. 用Python制作一个动态爱心效果!

    大家好,我是小F- 最近「点燃我,温暖你」这部剧非常火,讲述的是程序员的爱情故事. 其中陈飞宇饰演的男主李峋,在剧中用程序做出的爱心跳动效果,非常炫. 网上各个大佬也是纷纷给出看法,综合就是不太可能用 ...

  2. 「点燃我,温暖你」用Python制作一个动态爱心效果

    最近「点燃我,温暖你」这部剧非常火,讲述的是程序员的爱情故事. 其中陈飞宇饰演的男主李峋,在剧中用程序做出的爱心跳动效果,非常炫. 网上各个大佬也是纷纷给出看法,综合就是不太可能用C语言来实现的. 大 ...

  3. HTML+JS 动态爱心效果,表白神器,装逼特效

    先看效果图 代码部分: <!DOCTYPE html><html><head><title> New Document </title>&l ...

  4. c语言满屏爱心,微信聊天可以发满屏动态爱心了 个性又浪漫!

    前不久,分享过一个<微信深色模式隐藏表白技巧>,受到不少小伙伴欢迎.这种隐藏表白模式的神奇之处在于,只有在微信深色模式下,才能显示出隐藏字,浅色模式是隐藏的,另外支持双含义显示,个性又有创 ...

  5. 页面动态时间php,HTML制作网页动态时钟教程

    本文通过实例代码给大家介绍了HTML写一个网页动态时钟效果,需要的的朋友参考下吧 用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today= ...

  6. 页面动态时间php,HTML实现网页动态时钟

    本文通过实例代码给大家介绍了HTML写一个网页动态时钟效果,需要的的朋友参考下吧 用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today= ...

  7. html中的时钟如何自动,HTML实现网页动态时钟

    本文通过实例代码给大家介绍了HTML写一个网页动态时钟效果,需要的的朋友参考下吧 用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today= ...

  8. frontpage中没有动态HTML效果,FrontPage制作网页的动态效果(上)

    在网页的页面中添加一定的动态效果会给网页增加许多的色彩.现在网页的动态效果制作的方法很多,有些需要你学习一些相关的语言.FrontPage是网页制作工具中的一个多功能的工具,它为我们提供了全中文的界面 ...

  9. html+css+js表白代码,实现打字动画、动态爱心、图片旋转木马特效、下雪特效

    给男朋友准备的520礼物,他觉得太尴尬了,于是我特地把这个项目开源,让大家一起感受一下男票的尴尬,哈哈哈哈哈哈我好恶趣味. 话不多说上代码: 一.动态爱心+打字动画 html部分: <!doct ...

最新文章

  1. 最新手机号段归属地数据库(2017年4月16日版)免费下载
  2. Paper4:Voxel-Based Extraction and Classification of 3-D Pole-Like Object From Mobile LIDAR Point Clo
  3. Java 9因模块化进程缓慢而欲推迟发布
  4. 烂泥:nginx、php-fpm、mysql用户权限解析
  5. 基于Matlab的标记分水岭分割算法(imreconstruct)
  6. 小腿训练三部曲(一)
  7. php中带?错误,参考-此错误在PHP中意味着什么?
  8. 理解矩阵背后的现实意义
  9. c语言string函数的用法_同一个函数的五六个版本,C++string insert函数详解
  10. SQL.H 通过此文件寻找sqlAPI编程的一种捷径
  11. 怎样用ZBrush中的Curves和Insert笔刷创建四肢
  12. Atitit swt 4.3 4.4 4.5 新特性java attilax总结
  13. 用Linux开发嵌入式项目拢共分几步?
  14. 宅男福利——在控制台上跳极乐净土(音频版)
  15. 菊风2019年度报告已送达,请查收!
  16. 组合游戏 - SG函数和SG定理
  17. SQL注入学习详细过程
  18. Gateway自定义全局过滤器
  19. PS弧形边缘的去黑色背景色
  20. D3DCompiler_47.dll丢失怎么解决-D3DCompiler_47.dll丢失怎么办

热门文章

  1. 大学校园里的十种傻学生
  2. 绑定事件和取消绑定事件
  3. 第一个人10岁java递归_java经典算法_022你用递归算年龄 | 学步园
  4. 计算机不断自动重启,计算机不断自动重启[解决方案]
  5. 3.6 青年歌手参加歌曲大奖赛,有10个评委给选手打分,试编程求出该选手的平均得分并输出(去掉一个最高分和最低分)
  6. C语言结构体struct详解与实例
  7. 高数 | 傅里叶级数、狄利克雷收敛定理、正弦级数与余弦级数
  8. linux文件及目录管理常见练习
  9. 爬虫项目ubuntu18.04服务器下配置爬虚拟界面谷歌浏览器有头模式 xvfb+chromedriver+google-chrom
  10. pycharm如何对json文件格式化