效果预览

在线演示

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

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

大功告成!

原文地址:https://segmentfault.com/a/1190000015257561

如何用纯 CSS 创作一支诱人的冰棍的更多相关文章

  1. 前端每日实战:49# 视频演示如何用纯 CSS 创作一支诱人的冰棍

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

  2. 49.纯 CSS 创作一支诱人的冰棍

    原文地址:https://segmentfault.com/a/1190000015257561 感想:重点在让色彩滚动起来->background-position: 0 1000vh; HT ...

  3. 75.纯 CSS 创作一支摇曳着烛光的蜡烛

    原文地址:https://segmentfault.com/a/1190000015580809 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:CSS 真强大! ...

  4. 如何用纯 CSS 创作文本滑动特效的 UI 界面

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

  5. 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

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

  6. 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效

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

  7. 如何用纯 CSS 创作炫酷的同心矩形旋转动画

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

  8. 如何用纯 CSS 创作一个渐变色动画边框

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

  9. 如何用纯 CSS 创作条形图,不用任何图表库

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

随机推荐

  1. 最短路之Dijkstra(单源)HDU 2544

    #include <iostream> using namespace std; ; ][]; ]; int middist; ]; void dijkstra(int n,int m) ...

  2. iOS常用的存储方式

    在iOS App开发过程中经常需要操作一些需要持续性保留的数据,比如用户对于App的相关设置.需要在本地缓存的数据等等.本文针对OC中经常使用的一下存储方式做了个整理. 常用的存储工具/方式: NSU ...

  3. 20180401 lambda表达式

    ##lambda表达式:替代简单函数用 (反而增加了代码阅读难度,不建议使用) def fg(a1,a2): return a1+a2 qq = lambda a1,a2 : a1+a2 a1 = 1 ...

  4. 软件管理命令-- rpm

    RPM(红帽软件包管理器) 安装软件 rpm -ivh filename.rpm 升级软件 rpm -Uvh filename.rpm 卸载软件 rpm -e filename.rpm -i 安装一个 ...

  5. C51 笔记

    一 关于宏常量的长度:C51中定义一个常数宏(默认是16位的),如果用宏表示一个32位的宏而不加'L'标志的话就会出错.如 #define BLOCK_A_BASEADDR  18*64*1024 / ...

  6. HDU 1028 Ignatius and the Princess III dp整数划分

    http://acm.hdu.edu.cn/showproblem.php?pid=1028 dp[i][j]表示数值为i,然后最小拆分的那个数是j的时候的总和. 1 = 1 2 = 1 + 1 . ...

  7. HDU 5869 Different GCD Subarray Query 树状数组 + 一些数学背景

    http://acm.hdu.edu.cn/showproblem.php?pid=5869 题意:给定一个数组,然后给出若干个询问,询问[L, R]中,有多少个子数组的gcd是不同的. 就是[L, ...

  8. memcache学习

    1.memcache和memcached区别 Memcache是该系统的项目名称,Memcached是该系统的主程序文件(字母d可以理解为daemon),以守护程序方式运行于一个或多个服务器中,随时接 ...

  9. Mybatis中的复合条件查询

    1.Map中根据字段名存儲: 定义接口:List<Student> selectByCondition1(Map<String,Object> map); 映射文件: < ...

  10. MyBatis的数据库操作

    MyBatis的数据库操作 大学毕业有一段时间了,作为一名没有任何开发工作经验的大专毕业生想找到一份软件开发的工作确实很难,但我运气还算不错,应聘上一份java web开发的工作.作为一名新人,老板给 ...