使用 html css 和 javascript 的布告栏逼真的错觉 https://www.instagram.com/webstreet_code/
- Mary-Kate Olsen原创
- 2024-11-21 02:53:10364浏览
在 Instagram 上关注我们：https://www.instagram.com/webstreet_code/
<html lang="zh-cn">
<头>
布告栏标题>
@import url('https://fonts.googleapis.com/css2?family=Shadows Into Light&display=swap');
身体 {
显示：柔性；
调整内容：居中；
对齐项目：居中；
高度：100vh；
字体系列：'Arial'，无衬线字体；
保证金：0；
背景颜色：#f0f0f0；
}
.布告栏{
显示：柔性；
弹性包裹：包裹；
justify-content：空间周围；
对齐项目：居中；
宽度：80%；
高度：80vh；
间隙：20px；
内边距：20px；
背景颜色：#54290a； /* 棕色背景 */
边框：10px实线#6b3e1b； /* 深棕色边框 */
边框半径：12px；
盒子阴影：0 20px 35px rgba(0, 0, 0, 0.4);
}
。注意 {
宽度：200px；
高度：170 像素；
背景颜色：#f5f5dc；
内边距：15px；
位置：相对；
盒子阴影：0 4px 10px rgba(0, 0, 0, 0.2);
边框半径：10px；
过渡：transform 0.3s 缓动，box-shadow 0.3s 缓动；
字体系列：“Shadows Into Light”，草书；
字体大小：1.1rem；
颜色：#333；
显示：柔性；
对齐项目：居中；
调整内容：居中；
文本对齐：居中；
变换：旋转（-5deg）； /* 初始倾斜效果 */
}
.通知：悬停{
变换：translateY(-8px) 旋转(-3deg);
盒子阴影：0 8px 20px rgba(0, 0, 0, 0.3);
}
。别针 {
位置：绝对；
顶部：-8px；
左：50%；
变换：translateX(-50%)；
宽度：18px；
高度：18px；
背景颜色：红色；
边界半径：50%；
盒子阴影：0 4px 8px rgba(0, 0, 0, 0.3);
z 索引：1；
}
/* 为每个通知添加独特的倾斜和背景颜色 */
.notice:nth-child(1) {
背景颜色：#FFECB3； /* 浅黄色 */
变换：旋转（-2deg）；
}
.notice:nth-child(2) {
背景颜色：#C8E6C9； /* 浅绿色 */
变换：旋转（2deg）；
}
.notice:nth-child(3) {
背景颜色：#FFCDD2； /* 浅粉色 */
变换：旋转（-4deg）；
}
.notice:nth-child(4) {
背景颜色：#D1C4E9； /* 薰衣草 */
变换：旋转（3deg）；
}
</风格>
</头>
<div>
</div>以上是使用 html css 和 javascript 的布告栏逼真的错觉 https://www.instagram.com/webstreet_code/的详细内容。更多信息请关注PHP中文网其他相关文章！
JavaScript css html for using display position margin padding border viewport background transform transition flex https
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn