今天利用transform来实现一个动态页面 -- 跳动的心！

最新推荐文章于 2024-04-07 23:59:16 发布

米&然

最新推荐文章于 2024-04-07 23:59:16 发布

阅读量485

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/mi130922/article/details/106082318

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

跳动的心
注：这是利用transform实现一个简单的动态页面

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>跳动的心</title>
  <style>
  body{
   background:rgba(250,60,60,0.5); 
  }
 div{	
  width: 
  height: 
  background-color: red;
  margin: 300px auto;
  transform: rotate(45deg);
  opacity: 0.5;
  filter: drop-shadow(0px 0px 30px red);
  box-shadow: 0px 0px 30px red;
  animation: m 0.8s linear infinite;
 }
 @keyframes m{
  50%{transform: rotate(45deg) scale(0.8,0.8);}
 
  80%{transform: rotate(45deg) scale(0.7,0.7);}
 }
 div:after{
  content: "";
  width:200px;
  height: 200px;
  background-color:red;
  position: relative;
  display: block;
  border-radius: 50%;
  top: -300px;
  left: 0px;
 }
 div:before{
  content: "";
  width:200px;
  height: 200px;
  background-color:red;
  position: relative;
  display: block;
  border-radius: 50%;
  top: 0px;
  left: -100px;
 }
 p{
  font-family:楷体;
  font-size: 50px;
  text-align: center;
 }
 </style>
 </head>
 <body>
  <p> 跳动的心</p>
 <div></div>
 </body>
 </html>

展示效果：
在这里插入图片描述
注：这只是一个截屏页面！

米&然

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
今天利用transform来实现一个动态页面 -- 跳动的心！

跳动的心注：这是利用transform实现一个简单的动态页面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跳动的心</title> <style> body{ background:rgba(250,60,60,0.5); } div{ width: height: backg
复制链接

扫一扫