78-(CSS3)心跳图

已于 2023-04-07 16:15:34 修改
阅读量169 收藏
点赞数
分类专栏： 03_CSS 文章标签： css3 css html
于 2023-04-07 16:12:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q506174602/article/details/130014573
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>心跳动</title>
	<style>
		div {
			width: 800px;
			margin: 100px auto;
		}
		p {
			width: 100px;
			height: 150px;
			background-color: red;
			float: left;
			border-radius: 50% 50% 0 0;
		}

		p:nth-child(1) {
			transform: rotate(46deg);
			transform-origin: right bottom;
			/* transform-origin: 100% 100%; 等同于 transform-origin: right bottom;*/
			animation: ergou 1s infinite;
		}
		p:nth-child(2) {
			transform: rotate(-46deg);
			transform-origin: left bottom;
			animation: sangou 1s infinite;
		}
		@keyframes ergou {
			0% {
				transform: rotate(46deg) scale(1);
			}
			50% {
				transform: rotate(46deg) scale(1.2);
			}
		}
		@keyframes sangou {
			0% {
				transform: rotate(-46deg) scale(1);
			}
			50% {
				transform: rotate(-46deg) scale(1.2);
			}
		}	
	</style>
</head>
<body>
	<div>
		<p></p>
		<p></p>
	</div>
</body>
</html>

上述运行结果： 

七色的天空
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css3心跳动画、流行划过效果、跳动的球css3.zip
01-22
C005-绘制任意角度扇形、C006-css实现三角形、C007-css3心跳动画、标签中字母太长不换行、流行划过效果、跳动的球
CSS3绘制心跳爱心动画特效.zip
07-11
CSS3绘制心跳爱心动画特效是一款带心跳声的爱心动画和我爱你love you表白文字特效。
[css]利用css动画制作心跳
weixin_42582523的博客
12-06 269
html: <main> <div class="heart"></div> </main> css: *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100vw; height: 50vh; ...
css心跳动画
weixin_42581036的博客
04-03 1880
css心跳动画
css 实现心跳
测试0901-1
08-13 172
源代码 效果预览 先实现一个正方形，然后旋转实现，实现心的下半部分 ``` //预设一个div ``` .heart { //这里模拟心跳的动画，后面会写 animation: beat 1s infinite; -webkit-animation: beat 1s infinite; //宽为200px width...
CSS动画实现心跳效果
qq_38648558的博客
07-12 991
CSS动画实现心跳效果简介新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 简介 使用CSS动画，animation，和tranform（缩放、旋转）， 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除
CSS3实现心跳动画
a_strong_pig的博客
12-05 291
CSS3 实现心跳动画
利用css动画制作一个心跳的效果
cccccl的博客
08-25 813
<style> .back { position: fixed; padding: 0; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: white; animation-name: backdiv; animation-duration: 1s; animation-iteration-count: infinite;
css实现心跳.html
05-18
CSS如何做到心跳的动画,如何做到心跳动画? 用纯css写了一个心跳小demo,主要运用了animation、@keyframes和transform,望大家可以借鉴
CSS3绘制心跳爱心动画特效.rar
05-11
CSS3绘制心跳爱心动画特效
CSS3绘制心跳爱心动画特效特效代码
03-20
CSS3绘制心跳爱心动画特效是一款带心跳声的爱心动画和我爱你love you表白文字特效。
CSS3实现心跳的样子
秃头小桂子
05-17 640
CSS3实现心跳的样子 重点： transform变形； translate平移：translate(x, y)； rotate旋转：rotate(deg)，正值为顺时针，负值为逆时针，deg为旋转度数； animation动画：animation: name duration timing-function delay iteration-count direction 【1】name：规定需要绑定到选择器的 keyframe 名称 【2】duration：规定完成动画所花费的时间，以秒或毫秒计 【3】
Css实现心跳
qq_42483491的博客
04-03 613
//样式 <style> body { background: #fff; } .heart,.test { margin: 100px auto; /* 内容居中 */ width: 200px; /* 定义宽高 */ height: 2...
css心脏的跳动
棒老师的专栏
10-18 1361
#heart { position: relative; width: 100px; height: 90px; -webkit-animation:htx 0.2s linear infinite; } #heart:before, #heart:after { position: absolute; content: "";
用css代码画一颗会跳的心脏,css 实现心跳
weixin_42271195的博客
08-03 629
[源代码](https://github.com/coder-syl/cssDemo)### 效果预览![心跳](http://sylblog.xin/usr/uploads/2019/08/3131020070.gif "心跳")### 先实现一个正方形，然后旋转实现，实现心的下半部分```//预设一个div``````.heart {//这里模拟心跳的动画，后面会写animation: bea...
心跳动效css
Yugoup的博客
12-14 429
animation: heartbeat 800ms infinite; -webkit-animation: heartbeat 800ms infinite; // 心跳动效 @keyframes heartbeat { 0% { transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); -o
html+css实现心跳效果
weixin_44100702的博客
06-08 498
html+css实现心跳效果
如何用纯 CSS 为你的情人节创建一颗跳动的心
xunmaw001的博客
02-02 242
我们称之为情人节的浪漫之日是以一位基督教殉道者的名字命名的，其历史可以追溯到公元 5 世纪，但起源于罗马节日牧神节。但是通过一些几何、数学和一些基本的 CSS 规则，您可以将您的浏览器变成您的创意画布！heart您可以很容易地注意到，我们通过使用主类和两个带有 ::before和 ::after伪元素的圆圈来定义正方形及其定位。当我们使用关键帧规则时，我们可以将时间段划分为更小的部分，并通过将其拆分为多个步骤来创建转换/动画（每个步骤对应于时间段完成的百分比）。最后我们必须将动画分配给我们的心脏。
css3动画心跳效果,使用 CSS3 Animations 实现桃心跳动画效果 - 文章教程
weixin_35930535的博客
08-04 386
CSS3 Animations 赋予了我们更多的创意动画技术，通过 CSS3 Animations 这个属性，我们可以实现一些很炫很酷的动画效果，这篇文章就给大家介绍使用 CSS3 Animations 实现一个关键帧实桃心跳动画效果。Animations 常用属性首先对于不熟悉CSS3 Animations的开发者，我们一起来看看 CSS3 Animations 的常用属性，熟悉的开发者就当时温...
vue 3 心跳动代码
最新发布
04-26
在Vue 3中实现心跳动画的代码如下[^1]： 1. 首先，安装`animate.css`库： ```shell npm install animate.css ``` 2. 在Vue组件中引入`animate.css`库： ```javascript import 'animate.css'; ``` 3. 在模板中使用心跳动画效果： ```html <template> <h1 class="animate__animated animate__heartBeat">心跳动画</h1> </template> ``` 以上代码将在Vue 3中实现一个心跳动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

七色的天空

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值