问答一下，轻松解决，电脑应用解决专家!
主板
显卡
CPU
内存
显示器
硬盘维修
显卡维修
显示器维修
注册表
系统命令
DOS命令
Win8
存储
光存储
鼠标键盘
内存维修
打印机维修
WinXP
Win7
Win10/Win11
硬件综合
机箱电源散热器
手机数码
主板维修
CPU维修
键盘鼠标维修
Word教程
Excel教程
PowerPoint
WPS
网络工具
系统工具
图像工具
数据库
javascript
Linux系统
PHP教程
CSS教程
XML教程
首页
硬件教程
软件教程
电脑维修
网页编程
操作系统
办公教程
网页设计
Photoshop教程
局域网设置
服务器
笔记本电脑
在线问答
搜索
检索标题
智能模糊
搜索
首页
>
设计学院
>
网页编程
>
CSS教程
>
css3动画实现跳动的心，相对定位
更新时间:
2022-06-12 14:33
作者:
佚名
点击:
<style> .main{ width: 500px; height: 500px; /*background: grey;*/ margin: 100px auto; position: relative; animation: xt .9s linear infinite; } .l{ width: 300px; height: 300px; background: red; border-radius: 50%; position: absolute; left: 0; top: 0; } .r{ width: 300px; height: 300px; background: red; border-radius: 50%; position: absolute; right: 0; top: 0; } .z{ width: 300px; height: 300px; background: red; transform: translate(100px,100px) rotate(45deg); } @keyframes xt{ 0%{ transform: scale(1.0); } 50%{ transform: scale(1.2); } 100%{ transform: scale(1.0); } } .dear{ font-size: 30px; text-align: center; color: red; } </style> <div class="main"> <div class="l"></div> <div class="r"></div> <div class="z"></div> </div> <div class="dear">亲爱的，你是一只狗</div>
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
上一篇：
CSS实现时光轴记录、大事记、时间流程列表
下一篇：没有了
推荐图文
CSS 3中flex-basis属性用法详解
css样式中input和img在同一行居
百叶窗效果 html+css
学习CSS网页制作：ul打造表格样
导航栏滚动渐变效果 html+css+js
你可能感兴趣的内容
CSS实现时光轴记录、大事记、时间流程…
导航栏因滚动条隐藏、显示而产生晃动
CSS实现代码高亮显示行数原理解析，设…
利用 CSS Overview 面板重构优化你的…
CSS聚光灯效果
前端规范之CSS规范（Stylelint）
一行CSS代码实现头像与国旗的融合
页面在移动端出现右边空白，为何不能…
推荐内容
CSS页面布局及排版
CSS 实现字体发光效果 text-shadow
CSS 不定宽高的垂直水平居中（最全9种…
6种使用 CSS 实现绘制三角形的技巧
canvas旋转跟随鼠标线条 html+css+js
css实现等边六边形
css多行文本溢出显示省略号（兼容ie）
div水平垂直居中的六种方法
热点内容
几款很经典的CSS表格样式
CSS让段落开头自动空两格代码
用CSS样式画横线的方法
css里的no-repeat是什么意思？
CSS 3中flex-basis属性用法详解
CSS 中文字号、磅和像素对照关系
CSS超出部分显示省略号…代码
CSS如何隐藏div及html内容
