效果预览

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

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

可交互视频

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

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

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

源代码下载

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

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

代码解读

定义 dom,容器中包含 2 个 .half 元素,各表示剪刀的半边,它的子元素 handle 表示刀柄,blade 表示刀,最后的 .joint 表示连接左右两部分铆钉:

<figure class="scissors">
<div class="half">
<span class="handle"></span>
<span class="blade"></span>
</div>
<div class="half">
<span class="blade"></span>
<span class="handle"></span>
</div>
<div class="joint"></div>
</figure>

居中显示:

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

定义容器尺寸,其中 outline 是辅助线:

.scissors {
width: 21em;
height: 7em;
outline: 1px dashed;
}

定义半边剪刀的尺寸,其中 outline 是辅助线:

.scissors {
position: relative;
} .half {
position: absolute;
width: inherit;
height: 4em;
outline: 1px dashed red;
}

画出刀柄:

.handle {
position: absolute;
box-sizing: border-box;
width: 8em;
height: inherit;
border: 1em solid #333;
border-radius: 2em;
}

画出刀,用圆角属性画出了顶部的刀尖:

.blade {
position: absolute;
width: 15em;
height: 1em;
background-color: silver;
top: 3em;
left: 6em;
border-radius: 0 0 1em 0;
z-index: -1;
}

用伪元素在刀的底部画一个三角形,使刀与刀柄连接得更牢固:

.blade::before {
content: '';
position: absolute;
border-style: solid;
border-width: 0 1.8em 1em 1.8em;
border-color: transparent transparent silver transparent;
top: -1em;
left: 0.2em;
}

使半边刀倾斜:

.half {
transform-origin: 45% bottom;
transform: rotate(15deg);
}

利用 scale() 函数画出剪刀的另一半:

.half {
transform-origin: 45% bottom;
transform: rotate(calc(15deg * var(--direction))) scaleY(var(--direction));
} .half:nth-child(1) {
--direction: 1;
top: 0;
} .half:nth-child(2) {
--direction: -1;
top: -1em;
}

画出连接左右半边的铆钉:

.joint {
position: absolute;
width: 0.7em;
height: 0.7em;
background-color: #333;
border-radius: 50%;
top: calc(50% - 0.7em / 2);
left: 45%;
}

增加动画鼠标悬停时的动画效果:

.scissors:hover .half {
animation: cut 2s ease-out;
} @keyframes cut {
20%, 60% {
transform: rotate(calc(30deg * var(--direction))) scaleY(var(--direction));
} 40%, 80% {
transform: rotate(calc(5deg * var(--direction))) scaleY(var(--direction));
}
}

最后,别忘了删掉辅助线。

大功告成!

前端每日实战:131# 视频演示如何用纯 CSS 创作一把剪刀的更多相关文章

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

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

  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. 前端每日实战:126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果

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

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

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

  9. 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件

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

随机推荐

  1. 替换String中的\r\n\t

    String json = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n " ...

  2. sql 坐标距离排序计算距离(转)

    如果两个坐标的列是(x1,y1).(x2,y2),那么他们之间的距离:SQRT((X1-X2)*(X1-X2)+(Y1-Y2)*(Y1-Y2)) sql排序 SELECT * FROM m_store ...

  3. ACM-ICPC Nanjing Onsite 2018 I. Magic Potion

    题意:类似二分图匹配给的题目,不过这次在这里给出了k,表示没人可以再多一次匹配机会,这次匹配不能用上一次被匹配的对象 分析:不能用匈牙利做俩次匹配,因为俩次的最大匹配并不等价于总和的匹配,事实证明,你 ...

  4. macbook安装LightGBM

    一开始直接用pip install lightgbm 报错: OSError: dlopen(/opt/anaconda3/lib/python3.7/site-packages/lightgbm/l ...

  5. COMET探索系列二【Ajax轮询复用模型】

    写在前面:Ajax轮询相信大家都信手拈来在用,可是有这么一个问题,如果一个网站中同时有好多个地方需要用到这种轮询呢?就拿我们网站来说,有一个未读消息数提醒.还有一个时实时加载最新说说.昨天又加了一个全 ...

  6. C语言中传值和C++的传引用

    在C语言中,传址其实也时传值的一种,首先地址其实也时可以看做是一个值来进行传递的. 在C++中有一种说法叫传引用,就是&变量名. 比如: /* * 传值 int a = 3; void fun ...

  7. 识别ios系统设备并获取版本号

    let isIOS = userAgent.toLowerCase().indexOf("like mac os x") > 0; //ios终端 if (isIOS) { ...

  8. text-align和vertical-align

    1.text-align(水平对齐)text-align样式使元素在其定界区域内水平对齐,其取值可以是left.right.center或justify.justify使元素两端对齐.2.vertic ...

  9. python与正则不得不说的故事

    今日所得 正则表达式 re模块 正则表达式:字符 元字符 匹配内容 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线 \s 匹配任意的空白符 \d 匹配数字 \n 匹配一个换行符 \t 匹 ...

  10. vue-cli3初始化项目

    1 npm install -g @vue/cli 创建配置 创建 1 vue create vue-app 选择配置 1234 ? Please pick a preset: (Use arrow ...