赠品:跳动的心

下面是一段html代码,你可以把它在浏览器中显示一下,有点意思。

<!DOCTYPE html>

<html lang="en" encoding="utf-8">

<head>

<meta charset="UTF-8">

<title>Titlexinxing</title>

<style>

body{

background-color:#ffa5a5;

}

.cen{

width: 200px;

height: 200px;

background-color: red;

box-shadow:0px 0px 80px red;

animation:0.6s ad infinite;

}

.left{

border-radius:100px;

position:absolute;

top:200px;

left:200px;

}

.rig{

border-radius: 100px;

position:absolute;

top:200px;

left:341px;

}

.c{

transform: rotate(45deg);

position:absolute;

top: 269px;

left: 271px;

}

@keyframes ad{

0%{transform:scale(1)rotate(45deg);}

50%{transform:scale(1.1)rotate(45deg);}

100%{transform:scale(1)rotate(45deg);}

}

div:hover{

transform:scale(1.3);

transform:translate(0px,-5px);

transform:skew()

}

</style>

</head>

<body>

<div class="cen left"></div>

<div class="cen c"></div>

<div class="cen rig"></div>

</body>

</html>

运行之前,需要调整一下嵌套格式。

相关推荐
anOnion16 小时前
Agentic 前端开发之 实时显示 AI Agent 终端输出
前端·javascript·人工智能
这是个栗子16 小时前
【前端性能优化】优化数据加载:用 Promise.all 从串行到并行
前端·javascript·性能优化·异步编程·前端优化·promise.all
fei_sun17 小时前
黑洞路由(Null Route/空接口路由)
服务器·前端·javascript
摇滚侠18 小时前
方法 A 等方法 B 执行完再执行 叫同步调用还是异步调用 JS 默认是同步调用还是异步调用
开发语言·javascript·ecmascript
触底反弹19 小时前
🔥 字符串算法面试三连击:反转、回文、回文变种,搞懂这三题稳了!
前端·javascript·算法
触底反弹19 小时前
AI Tool Use 深度解析:大模型是如何"突破物理限制"调用外部工具的?
javascript·人工智能·后端
竹林81819 小时前
从 RPC 超时到批量签名:我用 @solana/web3.js 重构了一个 NFT 铸造页面,踩了这些坑
前端·javascript
优雅格子衫19 小时前
TypeScript 类的基本使用小结
javascript·ubuntu·typescript
橘子星19 小时前
从零手写 RAG 语义检索:基于 Node.js 实现轻量级向量搜索
javascript·人工智能
林希_Rachel_傻希希20 小时前
web性能优化之————图片效果
前端·javascript·面试