网页动态爱心效果html和css动态效果
网页动态爱心效果,表白小爱心
目录
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动态效果相关推荐
- 用Python制作一个动态爱心效果!
大家好,我是小F- 最近「点燃我,温暖你」这部剧非常火,讲述的是程序员的爱情故事. 其中陈飞宇饰演的男主李峋,在剧中用程序做出的爱心跳动效果,非常炫. 网上各个大佬也是纷纷给出看法,综合就是不太可能用 ...
- 「点燃我,温暖你」用Python制作一个动态爱心效果
最近「点燃我,温暖你」这部剧非常火,讲述的是程序员的爱情故事. 其中陈飞宇饰演的男主李峋,在剧中用程序做出的爱心跳动效果,非常炫. 网上各个大佬也是纷纷给出看法,综合就是不太可能用C语言来实现的. 大 ...
- HTML+JS 动态爱心效果,表白神器,装逼特效
先看效果图 代码部分: <!DOCTYPE html><html><head><title> New Document </title>&l ...
- c语言满屏爱心,微信聊天可以发满屏动态爱心了 个性又浪漫!
前不久,分享过一个<微信深色模式隐藏表白技巧>,受到不少小伙伴欢迎.这种隐藏表白模式的神奇之处在于,只有在微信深色模式下,才能显示出隐藏字,浅色模式是隐藏的,另外支持双含义显示,个性又有创 ...
- 页面动态时间php,HTML制作网页动态时钟教程
本文通过实例代码给大家介绍了HTML写一个网页动态时钟效果,需要的的朋友参考下吧 用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today= ...
- 页面动态时间php,HTML实现网页动态时钟
本文通过实例代码给大家介绍了HTML写一个网页动态时钟效果,需要的的朋友参考下吧 用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today= ...
- html中的时钟如何自动,HTML实现网页动态时钟
本文通过实例代码给大家介绍了HTML写一个网页动态时钟效果,需要的的朋友参考下吧 用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today= ...
- frontpage中没有动态HTML效果,FrontPage制作网页的动态效果(上)
在网页的页面中添加一定的动态效果会给网页增加许多的色彩.现在网页的动态效果制作的方法很多,有些需要你学习一些相关的语言.FrontPage是网页制作工具中的一个多功能的工具,它为我们提供了全中文的界面 ...
- html+css+js表白代码,实现打字动画、动态爱心、图片旋转木马特效、下雪特效
给男朋友准备的520礼物,他觉得太尴尬了,于是我特地把这个项目开源,让大家一起感受一下男票的尴尬,哈哈哈哈哈哈我好恶趣味. 话不多说上代码: 一.动态爱心+打字动画 html部分: <!doct ...
最新文章
- 最新手机号段归属地数据库(2017年4月16日版)免费下载
- Paper4:Voxel-Based Extraction and Classification of 3-D Pole-Like Object From Mobile LIDAR Point Clo
- Java 9因模块化进程缓慢而欲推迟发布
- 烂泥:nginx、php-fpm、mysql用户权限解析
- 基于Matlab的标记分水岭分割算法(imreconstruct)
- 小腿训练三部曲(一)
- php中带?错误,参考-此错误在PHP中意味着什么?
- 理解矩阵背后的现实意义
- c语言string函数的用法_同一个函数的五六个版本,C++string insert函数详解
- SQL.H 通过此文件寻找sqlAPI编程的一种捷径
- 怎样用ZBrush中的Curves和Insert笔刷创建四肢
- Atitit swt 4.3 4.4 4.5 新特性java attilax总结
- 用Linux开发嵌入式项目拢共分几步?
- 宅男福利——在控制台上跳极乐净土(音频版)
- 菊风2019年度报告已送达,请查收!
- 组合游戏 - SG函数和SG定理
- SQL注入学习详细过程
- Gateway自定义全局过滤器
- PS弧形边缘的去黑色背景色
- D3DCompiler_47.dll丢失怎么解决-D3DCompiler_47.dll丢失怎么办
热门文章
- 大学校园里的十种傻学生
- 绑定事件和取消绑定事件
- 第一个人10岁java递归_java经典算法_022你用递归算年龄 | 学步园
- 计算机不断自动重启,计算机不断自动重启[解决方案]
- 3.6 青年歌手参加歌曲大奖赛,有10个评委给选手打分,试编程求出该选手的平均得分并输出(去掉一个最高分和最低分)
- C语言结构体struct详解与实例
- 高数 | 傅里叶级数、狄利克雷收敛定理、正弦级数与余弦级数
- linux文件及目录管理常见练习
- 爬虫项目ubuntu18.04服务器下配置爬虚拟界面谷歌浏览器有头模式 xvfb+chromedriver+google-chrom
- pycharm如何对json文件格式化