赠品:跳动的心

下面是一段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>

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

相关推荐
代码北人生7 分钟前
agent时代,我们都低估了这个 23k Star 的 Claude Code Skills 项目!
javascript
成都渲染101云渲染66667 分钟前
云渲染全面支持3dsMax 2027,高效渲染体验升级
开发语言·前端·javascript
zs宝来了15 分钟前
微前端架构:qiankun 沙箱隔离与样式冲突
前端·javascript·框架
M ? A31 分钟前
Vue 的 scoped 样式穿透 React 不支持?用 VuReact 编译就行
前端·javascript·vue.js·react.js·面试·开源·vureact
zs宝来了32 分钟前
Vue 3 Composition API:响应式系统与依赖追踪
前端·javascript·框架
村上小树1 小时前
非常简单地学习一下slate.js的原理
前端·javascript
web打印社区1 小时前
[特殊字符] 开源好物:web-print-pdf,让 Web 打印像调用接口一样简单!
前端·javascript·vue.js·electron
大家的林语冰2 小时前
TS 登顶第一语言;JS 最新 Temporal 时间减屎;Node 爆发反 AI 运动;CSS 将支持图片亮暗切换《前端周刊》
前端·javascript·css
Hilaku2 小时前
OpenClaw 为什么突然不火了?
前端·javascript·程序员
岩岩很哇塞!2 小时前
【vue实现模仿探探卡片滑动切换效果】
前端·javascript·vue.js