赠品:跳动的心

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

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

相关推荐
研☆香2 小时前
聊一聊前端的常见字 关键字
开发语言·前端·javascript
日光倾4 小时前
TypeScript 随手记 —— 1
前端·javascript·typescript
Buke..6 小时前
【APP 逆向】哔哩哔哩 sign 参数逆向(下):OLLVM 混淆还原 sign 算法
java·javascript·爬虫·python·算法
前端炒粉8 小时前
长会话虚拟滚动与渲染优化
前端·javascript·vue.js
谙忆10248 小时前
图片裁剪总是跑偏?用 object-fit、object-position 和真实像素把坐标对齐
javascript·css·图像识别
花归去9 小时前
ant的a-table更改表格的高度
前端·javascript·html
sibylyue9 小时前
基于 Vben Admin 框架的 Vue 3 前端项目配置文件及常用命令
前端·javascript·vue.js
01_ice10 小时前
前端学习css
前端·css·学习
AC赳赳老秦11 小时前
多源数据关联挖掘:OpenClaw 打通工商、招投标、专利公开数据,挖掘企业业务关联关系
java·c语言·javascript·c++·python·deepseek·openclaw
光影少年12 小时前
react navite 内存泄漏:定时器、监听事件、订阅销毁
前端·javascript·react native·react.js·前端框架