前端每日实战:30# 视频演示如何用纯 CSS 创作一个晃动的公告板
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/wjZoGV
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含公告牌、挂公告牌的细绳和固定绳子的 3 个图钉:
<div class="signboard">
<div class="sign">THANKS</div>
<div class="strings"></div>
<div class="pin top"></div>
<div class="pin left"></div>
<div class="pin right"></div>
</div>
居中显示:
html, body {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center 60%, white, sandybrown);
}
定义公告牌的整体尺寸:
.signboard {
width: 400px;
height: 300px;
}
设置木板的样式:
.signboard {
position: relative;
}
.sign {
width: 100%;
height: 200px;
background: burlywood;
border-radius: 15px;
position: absolute;
bottom: 0;
}
设置有雕刻效果的文字样式:
.sign {
color: saddlebrown;
font-family: sans-serif;
font-weight: bold;
text-align: center;
line-height: 200px;
text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3),
0 -2px 0 rgba(0, 0, 0, 0.7);
}
画出细绳:
.strings {
width: 150px;
height: 150px;
border: 5px solid brown;
position: absolute;
border-right: none;
border-bottom: none;
transform: rotate(45deg);
top: 38px;
left: 122px;
}
画出细绳顶部的图钉:
.pin {
width: 25px;
height: 25px;
border-radius: 50%;
position: absolute;
}
.pin.top {
background: gray;
left: 187px;
}
画出木板上左右两侧的图钉:
.pin.left,
.pin.right {
background: brown;
top: 110px;
box-shadow: 0 2px 0 rgba(255, 255, 255, 0.3);
}
.pin.left {
left: 80px;
}
.pin.right {
right: 80px;
}
最后,让告示牌晃动起来:
(此处已按 小蕾蕾 的建议修改为以顶部图钉作为旋转轴,比最初的效果要好)
.signboard {
animation: swing 1.5s ease-in-out infinite alternate;
transform-origin: 200px 13px;
}
@keyframes swing {
from {
transform: rotate(10deg);
}
to {
transform: rotate(-10deg);
}
}
大功告成!
前端每日实战:30# 视频演示如何用纯 CSS 创作一个晃动的公告板的更多相关文章
- 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...
- 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
- 前端每日实战:69# 视频演示如何用纯 CSS 创作一个单元素抛盒子的 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 此视频是可 ...
- 前端每日实战:81# 视频演示如何用纯 CSS 创作一个变色旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 此视频是可 ...
- 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...
- 前端每日实战:125# 视频演示如何用纯 CSS 创作一个失落的人独自行走的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 此视频是 ...
- 前端每日实战:39# 视频演示如何用纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QxbmxJ 可交互视频教程 此视频 ...
- 前端每日实战:42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教程 此视频 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
随机推荐
- UEFI手札
基于Intel TianoCore衍生的EDK-II诞生的UEFI,用来取代Legacy BIOS. INF文件 Module Information File,模块描述文件.Module可以是可执行 ...
- Customizable Route Planning
w https://www.microsoft.com/en-us/research/wp-content/uploads/2011/05/crp-sea.pdf 1 Introduction The ...
- Linux基础—saltstack运维工具学习
一.saltstack简介 1.saltstack是什么 系统管理员日常会进行大量的重复性操作,例如安装软件,修改配置文件,创建用户,批量执行命令等,如果主机数量庞大,单靠人工维护实在让人难以忍受. ...
- Delphi XE2 之 FireMonkey 入门(7) - TText 与 TFont
TText 也是从 TShape(TControl -> TShape)继承; 而与之类似的 TLabel 的继承序列是 TControl -> TStyledControl -> ...
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_07 Collections工具类_2_Collections集合工具类的方法
默认规则一般都是升序排序 再来创建一个字符串的数组 排序后,按照升序输出结果 自定义类型排序 创建一个Person类,getter和setter 有参构造和无参构造 重写toString的方法 传对象 ...
- 安装element-ui
element地址:https://element.eleme.cn/2.0/#/zh-CN/component/quickstart 1.在新建终端 [安装element-ui组件依赖]cnpm i ...
- gradle使用方法
创建一个项目 你可以通过创建一个build.gradle的文件来开始一个项目,然后可以向文件中加入构建逻辑. $ mkdir basic-demo $ cd basic-demo $ touch bu ...
- jQuery架构设计与实现(2.1.4版本)
市面上的jQuery书太多了,良莠不齐,看了那么多总觉得少点什么 对"干货",我不喜欢就事论事的写代码,我想把自己所学的知识点,代码技巧,设计思想,代码模式能很好的表达出来,所以考 ...
- 第四周课程总结&试验报告
实验二 Java简单类与对象 实验目的 掌握类的定义,熟悉属性.构造函数.方法的作用,掌握用类作为类型声明变量和方法返回值: 理解类和对象的区别,掌握构造函数的使用,熟悉通过对象名引用实例的方法和属性 ...
- [Git] 013 远程仓库篇 第零话 使用前的一些配置
0. 前言 本地仓库和 GitHub 上的远程仓库之间的传输是通过 "SSH" 加密的,所以使用前需要进行一些设置 这回的任务 设置"身份象征" 创建 &quo ...