原文地址: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. C/S,B/S的应用区别

    C/S,B/S的应用区别 C/S即大家熟知的客服机和服务器结构通过它可以充分利用两端硬件环境的优势,将任务合理分配到Client端和Server端来实现,降低了系统的通讯开销 B/S结构即浏览器和服务 ...

  2. 正则判断 文件名是否为zip格式

    var type = filename.match(/^(.*)(\.)(.{1,8})$/)[3].toUpperCase();

  3. 【JVM参数】Java启动时,显示class是从哪个Jar中加载的

    显示具体的Class是从哪个Jar文件加载 JVM参数: -verbose:class 启动后输出如下: [Opened D:\Program Files\Java\jdk1.8.0_131\jre\ ...

  4. Android开发之动态添加控件

    动态添加TextView控件: 一:创建一个Android project项目 activity_main.xml文件: 1.用两个LinearLayout布局分别包裹一对TextView,EditT ...

  5. sys.modules[__name__]的一个实例

    关于sys.modules[__name__]的用法,百度上阅读量比较多得一个帖子是:https://www.cnblogs.com/robinunix/p/8523601.html 对于里面提到的基 ...

  6. VMware上centos系统忘记账号和密码解决

    转载: https://blog.csdn.net/wyx_wyl/article/details/78246907 我们有时会忘记虚拟机上的登陆密码,今天来说一下怎样修改我们的密码.应该对大多数的l ...

  7. [UE4]RetainerBox,控制UI更新频率,把渲染后的UI当成Texture

    RetainerBox是一个容器,只会影响其容器内的UI,RetainerBox的作用: 一.控制UI更新频率(可能是为有优化性能) 1.在UserWidget中添加Retainer Box容器,并在 ...

  8. sqlserver数据库设计完整性与约束

    use StudentManageDB go --创建主键约束 if exists(select * from sysobjects where name='pk_StudentId') alter ...

  9. java基础阶段关于密码或账号字符数字的判断总结

    将字符串转成字符数组 首字母判断 思路:应该如何获取首字母 arr[0]为数组第一个元素即是首字母 数字判断true为数字false为非数字 "0123456789".contai ...

  10. JIT和AOT编译详解

    JIT和AOT编译介绍 JIT - Just-In-Time             实时编译,即时编译 通常所说的JIT的优势是Profile-Based Optimization,也就是边跑边优化 ...