【每日一练】140—一个漂亮的爱心等式

最新推荐文章于 2024-11-01 16:54:21 发布

web前端开发V

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量101

点赞数

文章标签： css html css3 前端 javascript

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649135772&idx=3&sn=54df320590f53f6f41f58a99bd42cbc9&chksm=be58bd31892f3427f680d5b3b831edd09a97f858116ca1f4c44ef2b2d961689e866f4e673e65&scene=126&sessionid=0

版权

今天练习一个好玩的效果，请大家看下面的最终效果：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>【每日一练】140—一个漂亮的爱心等式</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="drop">
    <p>Html</p>
  </div>
  <span>+</span>
  <div class="drop">
    <p>CSS</p>
  </div>
  <span>=</span>
  <div class="drop">
    <ion-icon name="heart"></ion-icon>
  </div>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

CSS代码：

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Courgette', cursive;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: #eee;
  gap: 30px;
}
.drop
{
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  font-size: 2.5em;
  display: flex;
  text-shadow: -2px -2px 5px #fff;
  filter: drop-shadow(4px 4px 10px #fff);
  justify-content: center;
  align-items: center;
  box-shadow: inset 10px 10px 10px rgba(0,0,0,0.05),
              15px 25px 10px rgba(0,0,0,0.05),
              15px 20px 20px rgba(0,0,0,0.05),
              inset -10px -10px 15px rgba(255,255,255,0.9);
}
.drop::before
{
  content: '';
  position: absolute;
  top: 35px;
  left: 25px;
  background: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  filter: blur(2px)
}
.drop::after
{
  content: '';
  position: absolute;
  top: 25px;
  left: 50px;
  background: #fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  filter: blur(2px)
}
.drop ion-icon 
{
  font-size: 5em;
  color: #444;
}
span 
{
  font-size: 3em;
}
.drop ion-icon
{
  font-size: 2em;
  color: #ff5353;
}

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

推荐阅读

【每日一练】01~100练大合集汇总

学习更多技能

请点击下方公众号