Guru Nanak dev ji Jayanti 使用 html css 和 javascript 代码制作特殊动画
- Mary-Kate Olsen原创
- 2024-11-26 04:56:14262浏览
<html lang="zh-cn">
<头>
<title>Guru Nanak Jayanti 动画</title>
身体 {
背景：线性渐变（135deg，#ffeb3b，#f57f17）；
显示：柔性；
调整内容：居中；
对齐项目：居中；
高度：100vh；
溢出：隐藏；
保证金：0；
字体系列：“Poppins”，无衬线字体；
位置：相对；
}
。容器 {
文本对齐：居中；
颜色：#fff；
动画：淡入2秒缓入淡出；
}
.container img {
宽度：200px；
高度：自动；
底部边距：10px；
动画：发光2s无限交替；
}
h1 {
字体大小：2rem；
文本阴影: 0 0 10px rgba(255, 255, 255, 0.8);
}
.教学{
顶部边距：20px；
显示：柔性；
}
.教学盒{
宽度：160 像素；
高度：100px；
边距：自动 10 像素；
内边距：15px；
背景：#333；
边框半径：12px；
盒子阴影：0 4px 15px rgba(0, 0, 0, 0.2);
不透明度：0；
变换：翻译Y（50px）；
动画：向前滑动1.5秒；
}
.教学盒:第n个孩子(1) {
背景：#ff7043； /* 橙子 */
动画延迟：0.5s；
}
.教学盒:第n个孩子(2) {
背景：#42a5f5； /* 蓝色的 */
动画延迟：1s；
}
.教学盒:第n个孩子(3) {
背景：#66bb6a； /* 绿色的 */
动画延迟：1.5s；
}
.教学标题{
字体大小：1.4rem；
字体粗细：粗体；
下边距：5px；
}
.教学潜台词{
字体大小：1rem；
}
。花朵 {
位置：绝对；
顶部：-50px；
宽度：100%；
高度：100%；
指针事件：无；
显示：柔性；
弹性包裹：包裹；
}
。花 {
位置：绝对；
字体大小：30px；
动画：下落线性无限；
}
@关键帧下降{
来自 { 变换：translateY(-100vh) 旋转(0deg); }
到 { 变换：translateY(100vh) 旋转(360deg); }
}
@关键帧淡入{
来自{ 不透明度：0; }
至 { 不透明度：1; }
}
@关键帧发光{
来自 { 过滤器： drop-shadow(0 0 10px #fff); }
到 { 过滤器：drop-shadow(0 0 30px #ffeb3b); }
}
@keyframes SlideUp {
到 { 变换：translateY(0);不透明度：1； }
}/* 花按钮 */
.flower-按钮 {
位置：固定；
右：20 像素；
底部：20px；
字体大小：30px；
背景：无；
边框：无；
光标：指针；
动画：发光1.5s无限交替；
}
</风格>
</头>
<div>
</div>
以上是Guru Nanak dev ji Jayanti 使用 html css 和 javascript 代码制作特殊动画的详细内容。更多信息请关注PHP中文网其他相关文章！
JavaScript css html Filter auto using pointer display position overflow margin padding border viewport background transform animation flex
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn