html跳动爱心代码,html+css实现跳动爱心❥(^_-)-Go语言中文社区
跳动爱心主要用了些css3的动画效果@keyframe,实现后的效果如下图(截图效果比较差)。代码再往下滑。
1.html代码
跳动爱心
2.css代码
*{
margin:0;
padding:0;
}
#background{
position:relative;
width:520px;
height:500px;
background:pink;
margin:30px auto;
}
.love{
width:300px;
height:300px;
background:#d5083b;
box-shadow:0px 0px 40px -4px #d5083b;
}
.love-left{
position:absolute;
top:0px;
left:0px;
border-radius:150px;
/*渐变色 渐变开始位置、渐变开始颜色、渐变结束颜色*/
background:linear-gradient(to left right,#ee0a44 0%,#d5083b 40%);
/*box-shadow:-15px -13px 40px -4px #d5083b;*/
/*box-shadow:0px 0px 40px -4px #d5083b;*/
/*background:red;*/
transform:scale(1);
animation:heart-beat 0.6s ease infinite;
z-index:3;
}
.love-right{
position:absolute;
top:0px;
right:0px;
border-radius:150px;
background:linear-gradient(to right left,#ee0a44 0%,#d5083b 50%);
/*background:red;*/
transform:scale(1);
animation:heart-beat 0.6s ease infinite;
z-index:2;
}
.love-bottom{
position:absolute;
top:109px;
left:110px;
transform:rotate(45deg) scale(1);
background:linear-gradient(to left top,#ee0a44 0%,#d5083b 40%);
/*background:red;*/
animation:heart-beat 0.6s ease infinite;
z-index:1;
}
@keyframes heart-beat{
0%{
transform:rotate(45deg) scale(1);
box-shadow:0px 0px 40px -4px #d5083b;
}
50%{
transform:rotate(45deg) scale(1.1);
box-shadow:5px 5px 40px 10px #d5083b;
}
100%{
transform:rotate(45deg) scale(1);
box-shadow:0px 0px 40px -4px #d5083b;
}
}
跳动爱心主要用了些css3的动画效果@keyframe,实现后的效果如下图(截图效果比较差)。
html跳动爱心代码,html+css实现跳动爱心❥(^_-)-Go语言中文社区相关推荐
- linux wc read,Linux 下使用 wc 统计文件夹下所有文件的代码行数(包括子目录)-Go语言中文社区...
wc 命令用于统计文件内容的行数.单词数.字母数. 但是如果想统计一个目录下所有文件的行数,wc 并没有提供递归统计. 不过,可以结合 find 命令,例如: $ wc -l `find -name ...
- 跳动爱心代码-李峋同款爱心代码(升级版)
我挥舞着键盘和本子,发誓要把世界写个明明白白. 简介 代码实现电视剧 点燃我,温暖你 打火机与公主裙 李洵爱心跳动效果.跳动的爱心❤自发布以来,后台收到很多私信,问如何实现手机端浏览效果.如何加文字. ...
- 小白也能行--李洵同款--动态爱心代码《附可跳动版本代码》
代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <H ...
- php爱心代码,使用CSS画爱心代码实例
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: css画桃心 .heart-body { width: 500px; margin ...
- 爱心代码李峋同款爱心 python html
目录 前言 一.python 1.python 第一个 2.python第二个 二.HTML 1.第一个 2.第二个html 3.第三个html 3.第四个html 总结 前言 最近那个电视剧很火,就 ...
- 简笔彩色圣诞树的python代码_Python绘图,圣诞树,花,爱心 | Turtle篇-Go语言中文社区...
1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle() circle. ...
- 六行python代码的爱心曲线公式_六行python代码的爱心曲线-Go语言中文社区
前些日子在做绩效体系的时候,遇到了一件囧事,居然忘记怎样在Excel上拟合正态分布了,尽管在第二天重新拾起了Excel中那几个常见的函数和图像的做法,还是十分的惭愧.实际上,当时有效偏颇了,忽略了问题 ...
- 如何用python画爱心代码_用 python 画爱心代码讲解
学计算机的男生发这个给我看是什么意思?www.zhihu.com 原理其实挺简单的. 代码网上也有. 最难的部分前人都告诉我们了, 心形可画. 要自己推导通过泰勒各种扭也可以. 通过肉眼扭我感觉也不 ...
- 【全网热点】打造全网最全爱心代码仓库【火速领取爱心】
最新文章
- MyBatis-14MyBatis动态SQL之【foreach】
- java 写文件 0x0d_Java 读写文件 - My and My Princess…… - OSCHINA - 中文开源技术交流社区...
- cowboy源码分析
- Windows 系统下使用 MinGW + MSYS + GCC 编译 FFMPEG
- 解决pandas索引报错Unalignable boolean Series provided as indexer
- 组件服务-计算机-我的电脑出现红色向下箭头的解决办法
- log4j的详细介绍
- CGI与Servlet的介绍以及区别
- sysfader iexplore应用程序错误
- cython 安装升级_浅尝Kivy
- 秒建炫酷的开源项目文档,这款神器用起来够优雅
- linux卡住重启_linux df -h 命令卡住 解决方法
- 轻松学习CAN总线系列---2.了解CAN总线网络
- 第二阶段-面向对象(四)
- mysql 字符串截取
- React使用过程知识点随手记
- 移动应用进入碎片化时代
- win11 Azure DK环境
- excel模糊查找公式_Excel查找公式挑战20171026
- 对哈夫曼编码的输出 c语言,哈夫曼编码问题
热门文章
- 详解Python变量作用域
- ajax js引用,ajax 引用js文件内容
- 设置最小值_WELSIM中设置有限元计算结果的最大最小值
- 易语言word模板复制粘贴_请给你的Word“打底妆”(让Word跑快些系列)
- 剑指offer 答案 python_【剑指offer】【python】面试题2~5
- redis高级用法:geo位置相关信息
- kettle优化抽取数据速度_基于kettle工具提高表输出写入速度(每秒万条记录)
- map java 初始化赋值_Java 中 HashMap 初始化时赋值(示例代码)
- 2015计算机考研重点,2015考研计算机复习:数据结构重点归纳_跨考网
- java stream groupingBy(classifier, downstream, mapFactory)