赠品:跳动的心

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

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

相关推荐
Timer@20 小时前
LangChain 教程 04|Agent 详解:让 AI 学会“自己干活“
javascript·人工智能·langchain
阿珊和她的猫21 小时前
TypeScript中的never类型: 深入理解never类型的使用场景和特点
javascript·typescript·状态模式
走粥1 天前
clsx和twMerge解决CSS类名冲突问题
前端·css
九皇叔叔1 天前
003-SpringSecurity-Demo 统一响应类
java·javascript·spring·springsecurity
低代码布道师1 天前
纯代码实战:MBA培训管理系统 (十四) ——用户管理(批量选择与批量删除)
javascript·nextjs
Hello--_--World1 天前
JavaScript运行机制、v8原理、js事件循环
开发语言·javascript·ecmascript
吠品1 天前
CSS图片居中:Flexbox、Grid与Transform的完整指南
前端·css
天若有情6731 天前
Canvas生成艺术|意外诞生的混沌风暴(附完整源码+GitHub部署)
前端·css·html·github·canvas·网页
敲敲了个代码1 天前
React 那么多状态管理库,到底选哪个?如果非要焊死一个呢?这篇文章解决你的选择困难症
前端·javascript·学习·react.js·前端框架
阿珊和她的猫1 天前
React 中 CSS 书写方式全解析
前端·css·react.js