不一样的纯H5C3动画爱心
最近抖音很火的让你会计算机的朋友给你做个爱心突然火了，我也不出意外的收到了朋友的邀请，自己做肯定太麻烦了于是乎百度第一步，惊呆了！网上全都是一个爱心，变着法的火焰爱心，换汤不换药，那我们肯定是要整点不一样的咯
首先要表达出我们的中心，是个爱心，其次是简单，再加点动画过渡大功告成！朋友后面跟我得瑟说别人的爱心都一样，还以为我们只能做一种爱心哈哈哈，虽然没有那个炫酷，但这是咱手工打造的“不撞衫”嘛
<html> <head>
<style>
* {
margin: 0;
padding: 0;
color: #FFF;
} html,
body {
width: 100%;
height: 100%;
} body {
background: linear-gradient(to top, #09203f 0%, #537895 100%);
} .box {
position: absolute;
top: 200px;
right: 0;
left: 0;
margin: auto;
width: 300px;
height: 300px;
} h1 {
text-align: center;
} .heart {
position: relative;
font-size: 0;
width: 138px;
margin: 50px auto;
} .heart>div {
position: absolute;
top: -5px;
width: 10px;
height: 10px;
border-radius: 5px;
} .h-line-4 {
animation: h-line-move-4 3.8s infinite;
} .h-line-3,
.h-line-5 {
animation: h-line-move-3 3.8s infinite;
} .h-line-2,
.h-line-6 {
animation: h-line-move-2 3.8s infinite;
} .h-line-1,
.h-line-7 {
animation: h-line-move-1 3.8s infinite;
} .h-line-0,
.h-line-8 {
animation: h-line-move-0 3.8s infinite;
} .h-line-0 {
left: 0px;
animation-delay: 0s;
background-color: #3cba92;
filter: hue-rotate(20deg);
} .h-line-1 {
left: 17px;
animation-delay: 0.15s;
background-color: #3cba92;
filter: hue-rotate(40deg);
} .h-line-2 {
left: 34px;
animation-delay: 0.3s;
background-color: #3cba92;
filter: hue-rotate(60deg);
} .h-line-3 {
left: 51px;
animation-delay: 0.45s;
background-color: #3cba92;
filter: hue-rotate(80deg);
} .h-line-4 {
left: 68px;
animation-delay: 0.6s;
background-color: #3cba92;
filter: hue-rotate(100deg);
} .h-line-5 {
left: 85px;
animation-delay: 0.75s;
background-color: #3cba92;
filter: hue-rotate(120deg);
} .h-line-6 {
left: 102px;
animation-delay: 0.9s;
background-color: #3cba92;
filter: hue-rotate(140deg);
} .h-line-7 {
left: 119px;
animation-delay: 1.05s;
background-color: #3cba92;
filter: hue-rotate(160deg);
} .h-line-8 {
left: 136px;
animation-delay: 1.2s;
background-color: #3cba92;
filter: hue-rotate(180deg);
} @keyframes h-line-move-4 { 0%,
10%,
90%,
100% {
height: 10px;
top: -5px;
} 45%,
55% {
height: 94px;
top: -23px;
}
} @keyframes h-line-move-3 { 0%,
10%,
90%,
100% {
height: 10px;
top: -5px;
} 45%,
55% {
height: 90px;
top: -31px;
}
} @keyframes h-line-move-2 { 0%,
10%,
90%,
100% {
height: 10px;
top: -5px;
} 45%,
55% {
height: 80px;
top: -37px;
}
} @keyframes h-line-move-1 { 0%,
10%,
90%,
100% {
height: 10px;
top: -5px;
} 45%,
55% {
height: 60px;
top: -31px;
}
} @keyframes h-line-move-0 { 0%,
10%,
90%,
100% {
height: 10px;
top: -5px;
} 45%,
55% {
height: 30px;
top: -15px;
}
}
</style>
</head> <body>
<div class="box">
<h1>为爱冲锋的勇士！<br />值得所有人尊重！</h1>
<div class="heart">
<div class="h-line-0"></div>
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="h-line-5"></div>
<div class="h-line-6"></div>
<div class="h-line-7"></div>
<div class="h-line-8"></div>
</div>
</div>
</body> </html>
看成品
不一样的纯H5C3动画爱心的更多相关文章
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- 纯CSS3动画：一棵跳舞的树
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...
- 8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
- 11个超震撼的HTML5和纯CSS3动画源码
1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...
- H5C3动画
1 渐变 /* 渐变:不同颜色之间的柔和过渡 线性渐变:沿着某条直线发生渐变效果 注意:渐变准备来说是一张背景图 语法:linear-gradient */ background-image: lin ...
- 【翻译】西川善司的「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，后篇
http://www.4gamer.net/games/216/G021678/20140714079/ 连载第2回的本回, Arc System Works开发的格斗游戏「GUILTY G ...
- 【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，前篇（2）
Lighting和Shading(2)镜面反射的控制和模拟次级表面散射技术 http://www.4gamer.net/games/216/G021678/20140703095/index_2.ht ...
- 36纯 CSS 动画原理，在页面上表现日蚀现象
原文地址:https://segmentfault.com/a/1190000015070543 感想: 动画,背景颜色 HTML code: <div class="sky" ...
- 5种漂亮的纯CSS3动画按钮特效
这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码 ...
随机推荐
- 【三维地图】开发攻略 —— 详解“GeoJSON”技术和应用场景
GeoJSON ,一个用于存储地理信息的数据格式.GoeJSON对象可以表示几何.特征或特征集合,支持:点.线.面.多点.多线.多面和几何集合.在基于平面地图,三维地图中都需要用到的一种数据类型. 由 ...
- 一 策略模式 来自CBF4LIFE 的设计模式
刘备要到江东娶老婆了,走之前诸葛亮给赵云(伴郎)三个锦囊妙计,说是按天机拆开解决棘手问题,嘿,还别说,真是解决了大问题,搞到后是周瑜陪了夫人又折兵呀,那咱们先看看这个场景是什么样子的. 先说这个场景中 ...
- 第七十八篇：写一个按需展示的文本框和按钮(使用ref)
好家伙, 我们又又又来了一个客户 用户说: 我想我的页面上有一个搜索框, 当我不需要他的时候,它就是一个按钮 当我想要搜索的时候,我就点一下它, 然后按钮消失,搜索框出现, 当我在浏览其他东西时,这个 ...
- Python 爬取网站数据
一.使用request库实现批量下载HTML 二.使用BeautifulSoup库实现html解析 官网:https://beautifulsoup.readthedocs.io/zh_CN/v4.4 ...
- ESX添加过时的硬件
昨天遇到了个ESX上有旧的qlogic的FC卡无法识别的问题.无法识别也就无法连接存储,整个ESX就基本无法使用了.所以,需要检查硬件.一开始,在查了很多资料各种命令检查,走了很多弯路.这里我总结一下 ...
- SNI 路由和多协议端口的 TCP
文章转载自:https://mp.weixin.qq.com/s/nMMN7hAJK6SFn1V1YyxvHA 下面是一个简单的示例配置 - 使用最新支持的 YAML 文件格式,将请求路由到一个数据库 ...
- 示例：Service连接应用程序
整体思路: 1.创建pod 2.创建关联上一步pod的service 3.使用不同的方式配置service从而能够在集群内部访问 4.使用ssl方式加密访问service 5.配置service为no ...
- struts2 标签总结
<s:if>判断字符串的问题: 1.判断单个字符:<s:if test="#session.user.username=='c'"> 这样是从session ...
- .NET平台下一个你不知道的框架，我只想说两个字：“牛逼”
框架内容 零度框架是一套基于微服务和领域模型驱动设计的企业级快速开发框架,基于微软 .NET 6 + React 最新技术栈构建,容器化微服务最佳实践,零度框架的搭建以开发简单,多屏体验,前后端分离, ...
- 基于雪花算法的增强版ID生成器
sequence 基于雪花算法的增强版ID生成器 解决了时间回拨的问题 无需手动指定workId, 微服务环境自适应 可配置化 快速开始 依赖引入 <dependency> <gro ...