如何用纯 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);
}
}
大功告成!
原文地址:https://segmentfault.com/a/1190000014983030
如何用纯 CSS 创作一个晃动的公告板的更多相关文章
- 前端每日实战:30# 视频演示如何用纯 CSS 创作一个晃动的公告板
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wjZoGV 可交互视频教程 此视频 ...
- 30.纯 CSS 创作一个晃动的公告板
原文地址:https://segmentfault.com/a/1190000014983030 感想: 绝对定位+动画 HTML代码: <div class="signboard&q ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个充电 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deNqdV 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个容器厚条纹边框特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...
随机推荐
- Python之禅 this模块
The Zen of Python, by Tim Peters Beautiful is better than ugly.Explicit is better than implicit.Simp ...
- linux命令---vi编辑器快速定位行数
linux命令—vi编辑器快速定位行数.删除当前行.和删除当前行后面的全部内容 1.vi 编辑器如何快速定位到第N行 命令方式下 :n http://bbs.chinaunix.net/thread- ...
- Java 注解指导手册(下)
9. 自定义注解 正如我们之前多次提及的,可以定义和实现自定义注解.本章我们即将探讨. 首先,定义一个注解: public @interface CustomAnnotationClass ...
- postgres的数据库备份和恢复
备份和恢复 一条命令就可以解决很简单: 这是备份的命令: pg_dump -h 127/0.0.1 -U postgres databasename > databasename.bak 指令解 ...
- JVM 监控工具——jconsole
[官方文档]:Using JConsole 1. 简介 JConsole是一个内置Java性能分析器,可以从命令行或在GUI shell中运行.您可以轻松地使用JConsole(或者,它更高端的“近亲 ...
- vuex 讲解
vuex 状态的管理状态,它采用集中式存储管理应用的所有组件的状态,尤其是在中大型项目,则是很好的开发利器 vuex 的流程图 vuex 的优势: 1. vuex 的存储状态,响应式的 2. 他是所有 ...
- 2017年内容营销如何提高ROI转化率
根据2017 CMI报告显示,有近41%的营销人员今年会实施一系列内容营销战略.作为与用户间长期关系的桥梁, 从品牌化输出到信任感的培育,内容营销的影响力迅猛发展. 本次Focussend从互动集成内 ...
- 日志框架之Logger
概述 在我们日常的开发中,肯定是少不了要和 Log 打交道,回想一下我们是怎么使用 Log 的:先定义一个静态常量 TAG,TAG 的值通常是当前类的类名,然后在需要打印 Log 的地方,调用 Log ...
- 整型,长整型,无符号整型等 大端和小端(Big endian and Little endian)
一.大端和小端的问题 对于整型.长整型.无符号整型等数据类型,Big endian 认为第一个字节是最高位字节(按照从低地址到高地址的顺序存放数据的高位字节到低位字节):而 Little endian ...
- (转)js控制窗口失去焦点(包括屏蔽Alt+Tab键切换页面)
本章内容转自:http://www.cnblogs.com/BoKeYuanVinson/articles/3360954.html 转载自网络贴吧: 页面脚本是无法截获alt键的,不过可以变通一下, ...