赠品:跳动的心

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

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

相关推荐
_OP_CHEN5 分钟前
【前端开发之JavaScript】(三)JS基础语法中篇:运算符 / 条件 / 循环 / 数组一网打尽
开发语言·前端·javascript·网页开发·图形化界面·语法基础·gui开发
Aric_Jones9 小时前
JavaScript 从入门到精通:完整语法指南
开发语言·javascript·ecmascript
西门吹-禅11 小时前
文本搜索node js--meilisearch
开发语言·javascript·ecmascript
问今域中13 小时前
Vue的computed用法解析
前端·javascript·vue.js
扶苏100213 小时前
详解Vue3的provide和inject
前端·javascript·vue.js
奋斗吧程序媛14 小时前
Vue3初体验(2)
前端·javascript·vue.js
FunW1n15 小时前
tmf.js Hook Shark框架相关疑问归纳总结报告
java·前端·javascript
henry10101016 小时前
Deepseek辅助生成的HTML5网页版抄经典《弟子规》
前端·javascript·css·html·html5
扶苏100217 小时前
深入 Vue 3 computed:原理、实战与避坑指南
前端·javascript·vue.js
高德开放平台18 小时前
高德开放平台JS API插件支持WebMCP:重新定义AI与网页交互的新时代
javascript·人工智能·开发者·高德地图