效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/vrxzMw

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cnpZEAZ

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含 2 个元素:

<div class="ice-lolly">
<div class="flavors"></div>
<div class="stick"></div>
</div>

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: darkslategray;
}

绘制出冰棍的外形:

.flavors {
width: 19em;
height: 26em;
font-size: 10px;
border-radius: 8em 8em 1em 1em;
}

给冰棍上色:

.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);
}

来一点光照效果:

.flavors::after {
content: '';
position: absolute;
width: 2em;
height: 17em;
background-color: rgba(255, 255, 255, 0.5);
left: 2em;
bottom: 2em;
border-radius: 1em;
}

画出冰棍筷子:

.stick {
position: relative;
width: 6em;
height: 8em;
background-color: sandybrown;
left: calc(50% - 6em / 2);
border-radius: 0 0 3em 3em;
}

给冰棍筷子加一点阴影,增加立体感:

.stick::after {
content: '';
position: absolute;
width: inherit;
height: 2.5em;
background-color: sienna;
}

让冰棍的色彩滚动起来:

.flavors::before {
animation: moving 100s linear infinite;
} @keyframes moving {
to {
background-position: 0 1000vh;
}
}

最后,增加交互效果,当鼠标悬停时才播放动画:

.flavors::before {
animation-play-state: paused;
} .ice-lolly:hover .flavors::before {
animation-play-state: running;
}

大功告成!

前端每日实战:49# 视频演示如何用纯 CSS 创作一支诱人的冰棍的更多相关文章

  1. 如何用纯 CSS 创作一支诱人的冰棍

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrxzMw 可交互视频教 ...

  2. 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...

  3. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

  4. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...

  5. 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...

  6. 前端每日实战:161# 视频演示如何用纯 CSS 创作一张纪念卓别林的卡片(没有笑声的一天就是被荒废的一天)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WaaBNV 可交互视频 此视频是可 ...

  7. 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...

  8. 前端每日实战:126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...

  9. 前端每日实战:138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...

随机推荐

  1. luogu P1307 数字反转 x

    题目描述 给定一个整数,请将该数各个位上数字反转得到一个新数.新数也应满足整数的常见形式,即除非给定的原数为零,否则反转后得到的新数的最高位数字不应为零(参见样例2). 输入输出格式 输入格式: 输入 ...

  2. 【CF1243B2】Character Swap (Hard Version)【思维】

    题意:给定两个字符串,问是否存在交换方案使得两个字符串相同,方案为交换次数小于等于2n,且每次只交换s1与s2中的一个字符 题解:考虑从前往后枚举,当第i位不同时,考虑找后边的第j位,若存在这样的第j ...

  3. [CSP-S模拟测试]:Rectangle(模拟+树状数组)

    题目描述 平面上有$n$个点,第$i$个点的坐标为$X_i,Y_i$.对于其中的一个非空点集$S$,定义$f(S)$为一个最小矩形,满足:$\bullet$覆盖$S$中所有的点(在边界上也算覆盖):$ ...

  4. OpenCV笔记:pyrDown()函数和pryUp()函数的使用

    OpenCV实现了用于创建图像金字塔的两个函数pyrDown()和pryUp(). 图像金字塔是一种经典的图像多尺寸描述方法,它将降采样和平滑滤波结合在一起,对图像进行多尺度表示.图像金字塔由不同尺寸 ...

  5. php面试专题---16、MySQL创建高性能索引考点

    php面试专题---16.MySQL创建高性能索引考点 一.总结 一句话总结: 注意:只写精品 1.索引的基础? 类似书籍的目录:索引类似于书籍的目录,要想找到一本书的某个特定主题,需要先查找书的目录 ...

  6. 洛谷P1120 小木棍 [数据加强版](搜索)

    洛谷P1120 小木棍 [数据加强版] 搜索+剪枝 [剪枝操作]:若某组拼接不成立,且此时 已拼接的长度为0 或 当前已拼接的长度与刚才枚举的长度之和为最终枚举的答案时,则可直接跳出循环.因为此时继续 ...

  7. Oracle 数据库优化

    Oracle 数据库优化 参考网址

  8. Linux下jdk1.6安装指引

    Linux安装JDK步骤1. 先从网上下载jdk(jdk-6u4-linux-x64-rpm.bin) ,推荐SUN的官方网站www.sun.com,下载后放在/home目录中,当然其它地方也行. 进 ...

  9. JSP中四种属性保存范围(1)

    一.四种属性范围 在JSP中提供了四种属性保存范围 page:在一个页面内保存属性,跳转之后无效request:在一次服务请求范围内,服务器跳转后依然有效session:-在一次会话范围内,无论何种跳 ...

  10. [Linux] 018 关机重启命令

    1. shutdown 命令 $ shutdown [选项] 时间 选项 -c 取消前一个关机wgwy -h 关机 -r 重启 2. 其他关机命令 $ halt $ poweroff $ init 0 ...