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

感想: 绝对定位+动画

HTML代码:

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

CSS代码:

html, body {
margin:;
padding:;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center 60%,white,saddlebrown)
}
.signboard{
position: relative;
width: 400px;
height: 300px;
/* border: 1px solid blue; */
}
.sign{
position: absolute;
bottom:;
width: 100%;
height: 200px;
border-radius: 15px;
background: burlywood;
line-height: 200px;
text-align: center;
font-family: sans-serif;
font-weight: bold;
color: saddlebrown;
text-shadow: 0 2px 0 rgba(225, 225, 225, 0.3),
0 -2px 0 rgba(0, 0, 0, 0.7);
}
/* 画出细绳 */
.strings{
position: absolute;
width: 150px;
height: 150px;
border: 5px solid brown;
border-right: none;
border-bottom: none;
transform: rotate(45deg);
top: 38px;
left: 122px;
}
/* 画出细绳顶部的图钉 */
.pin{
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
}
.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晃动起来 */
.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 创作一个晃动的公告板的更多相关文章

  1. 前端每日实战:30# 视频演示如何用纯 CSS 创作一个晃动的公告板

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

  2. 如何用纯 CSS 创作一个晃动的公告板

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

  3. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  4. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  5. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  6. 如何用纯 CSS 创作一个充电 loader 特效

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

  7. 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

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

  8. 前端每日实战:8# 视频演示如何用纯 CSS 创作一个充电 loader 特效

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

  9. 69.纯 CSS 创作一个单元素抛盒子的 loader

    原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...

随机推荐

  1. position 分层固定在屏幕某位置

    很多网站我们看到在屏幕右下角有一个,返回顶部,始终在那儿,还有些网站顶部菜单栏永远也是固定的不动,就是通过今天学习的position来做的. 在style中加入 positon:fixed;top 0 ...

  2. linux 简单笔记

    Linux查看端口使用状态.关闭端口方法    http://blog.csdn.net/wudiyi815/article/details/7473097

  3. live555峰哥的私房菜(二)-----计划任务(TaskScheduler)探讨

    计划任务(TaskScheduler)探讨 上一篇谈到SingleStep()函数会找到三种任务类型并执行之. 这三种任务是: socket handler, event handler, delay ...

  4. Espresso 开源了

    Google Testing Blog上发布了一篇博客,Espresso 开源了 http://googletesting.blogspot.com/2013/10/espresso-for-andr ...

  5. PAT 乙级 1018 锤子剪刀布 (20) C++版

    1018. 锤子剪刀布 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 大家应该都会玩“锤子剪刀布”的游 ...

  6. Flume的基本概念

    Flume 概念 Flume 最早是Cludera提供的日志收集系统,后贡献给Apache.所以目前是Apache下的项目,Flume支持在日志系统中指定各类数据发送方,用于收集数据. Flume 是 ...

  7. 解决wordpress文章归档和分类目录小工具标题重复问题

    最近更新了wordpress,发现更新后小工具中的文章归档和分类目录出现了标题重复,经检查,是部分主题下,主题的代码已经输出了标题,而wordpress的代码又再次输出了一次.于是我们需要删除word ...

  8. 点击input触发弹出框的bug

    先点击第一个input建立弹出框,再点击第二个input打开弹出框,操作点击,同时触发了两个input点击事件.主要原因是建立弹出框时绑定了input1的click事件,再次触发时,又再亿次绑定了in ...

  9. IntelliJ IDEA 2018破解方法

    1.下载idea:https://download.jetbrains.8686c.com/idea/ideaIU-2018.2.exe 2.安装idea 3.下载破解补丁:http://idea.l ...

  10. PowerDesigner最基础的使用方法入门学习(二)

    1.  生成sql脚本 Database→Generate Database 选择要输出的文件路径,即文件存储路径,并根据需要修改文件名,单击确定后便会生成sql脚本. 在Options选项卡里,可以 ...