0
点赞
收藏
分享

微信扫一扫

自己动手做一只雪糕感受夏天的乐趣

夏天出了酷热,还有西瓜,雪糕等清凉可口的食物,今天我们一起动手实现一只雪糕把,在此之前我们先看看最终实现的效果: 自己动手做一只雪糕感受夏天的乐趣_html

实现过程

实现雪糕过程如下:

  1. 定义 dom,容器中包含 2 个元素,​​ice-lolly​​​ 用来绘制整个雪糕的区域,​​flavors​​​ 雪糕,​​stick​​ 是雪糕的区域。
<div class="ice-lolly">
<div class="flavors"></div>
<div class="stick"></div>
</div>
  1. 然后将 body 居中显示,方便展示
# 内容居中显示
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
//background-color: darkslategray;
}
  1. 绘制出冰棍的外形:​​.flavors​​​, 大小和宽度大家都是可以调整的,通过​​border-radius​​ 来设置让雪糕更加圆润。
.flavors {
width: 19em;
height: 26em;
font-size: 10px;
border-radius: 8em 8em 1em 1em;
}
  1. 给冰棍上色:​​.flavors​​​ 、​​.flavors::before​
.flavors {
position: relative;
overflow: hidden;
}
.flavors::before {
content: '';
position: absolute;
width: 140%;
height: 120%;
background: linear-gradient(
hotpink 0%,
hotpink 25%,
deepskyblue 25%,
deepskyblue 50%,
gold 50%,
gold 75%,
lightgreen 75%,
lightgreen 100%);
z-index: -1;
left: -20%;
transform: rotate(-25deg);
}
  1. 增加光照效果:​​.flavors::after​
.flavors::after {
content: '';
position: absolute;
width: 2em;
height: 17em;
background-color: rgba(255, 255, 255, 0.5);
left: 2em;
bottom: 2em;
border-radius: 1em;
}
  1. 画出冰棍筷子:​​.stick​
.stick {
position: relative;
width: 6em;
height: 8em;
background-color: sandybrown;
left: calc(50% - 6em / 2);
border-radius: 0 0 3em 3em;
}
  1. 给冰棍筷子加一点阴影,增加立体感:​​.stick::after​
stick::after {
content: '';
position: absolute;
width: inherit;
height: 2.5em;
background-color: sienna;
}
  1. 冰棍彩色滚动起来​​.flavors::before​​,更加的生动
.flavors::before {
animation: moving 100s linear infinite;
}
  1. 鼠标浮停动画​​.ice-lolly:hover​​, 让雪糕产生简单的动画效果
.flavors::before {
animation-play-state: paused;
}
.ice-lolly:hover .flavors::before {
animation-play-state: running;
}

最后完成整个雪糕的开发,你是否感受到了夏天酷热中的一丝丝清凉呢。

看看效果

我们可以通过 ​​马上掘金​​ 功能来进行展示,它不仅支持 css + html 的编写,还支持是试运行,是非常方便的。效果如下: 代码片段

参考资料

  • github.com/comehope/fr…
举报

相关推荐

0 条评论