CSS一个摇摆的大红灯笼

一个摇摆的灯笼

知识点总结：

box-shadow: 是给元素块添加周边阴影效果
@keyframes 自定义动画
通过这个例子，让灯笼上部的线，下边的三部分组成的穗待在一个合理的位置是一个挑战，通过改变bottom属性来完成。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="denglong.css"><title>Document</title>
</head>
<body><div class="box"><div class="light"><div class="line"></div><div class="light-a"><div class="light-b"></div><div class="light-c">新</div><div class="ear-a"></div><div class="ear-b"></div><div class="ear-c"></div></div></div></div>
</body>
</html>

CSS部分

*{margin: 0;padding:0;
}
.box{position: fixed;top:100px;left: 100px;
}
.box .light{animation: d-light 2s linear infinite;
}
.box .light .line{position: absolute;width: 2px;height: 20px;left:50%;top:-30px;transform:translateX(-50%);background-color: red;}
.box .light .light-a{width: 150px;height: 120px;background-color: red;border-radius: 50%;box-shadow: 5px 5px 70px 5px red;
}
.box .light .light-a::before
{content:"";position: absolute;left: 50%;top:-10px;transform:translateX(-50%);width: 80px;height: 20px;border-radius: 50% 50% 0 0;z-index:3;background: linear-gradient(to right, #dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);}
.box .light .light-a::after
{content:"";position: absolute;left: 50%;bottom:-10px;transform:translateX(-50%);width: 80px;height: 20px;border-radius: 0 0 50% 50%; z-index:3;background: linear-gradient(to right, #dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);
}
.box .light .light-b{position: absolute;left: 50%;top:3px;transform:translateX(-50%);width: 120px;height: 120px;border-radius: 50%;border:2px solid #da9619;
}
.box .light .light-c{position: absolute;left: 50%;top:3px;transform:translateX(-50%);width: 50px;height: 120px;border-radius: 50%;border:2px solid #daab11;text-align: center;line-height: 120px;font-size: 50px;font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;color: #ffa500;
}
.box .light .ear-a{position: absolute;bottom:-30px;left: 50%;transform:translateX(-50%);width: 5px;height: 20px;background-color:#ffa500;animation: d-ear 3s linear infinite;
}
.box .light .ear-b{position: absolute;bottom:-35px;left: 52%;transform:translateX(-50%);width: 10px;height: 10px;border-radius: 50%;background-color: rgb(206, 22, 22);z-index:2;
}
.box .light .ear-c{position: absolute;bottom:-73px;left: 52%;transform:translateX(-50%);width: 10px;height: 40px;background-color: #ffa500;}
@keyframes d-light
{0%{transform:rotate(-10deg);}50%{transform:rotate(10deg);}100%{transform:rotate(-10deg);}
}
@keyframes d-ear
{0%{transform:rotate(10deg);}50%{transform:rotate(-10deg);}100%{transform:rotate(10deg);}
}

来源于b站教学视频

CSS一个摇摆的大红灯笼相关推荐

[css] 一个页面引用多个文件，如何防止样式冲突？
[css] 一个页面引用多个文件,如何防止样式冲突? 编码层面: 1.定制规则:不同的样式文件表,增加不同的前缀. 2.按照功能区分文件:不同的文件样式表,针对页面不同的部分写样式,通过样式层级的方式 ...
[css] 一个项目中有很多无用的css代码，怎么找到并清除这些无用的代码？
[css] 一个项目中有很多无用的css代码,怎么找到并清除这些无用的代码? 1.使用浏览器插件 2.使用PurifyCSS 3.chrome浏览器 F12审查元素的Audits,手动删个人简介我 ...
animate.css 兼容ie,animate.css一个跨浏览器的CSS动画库
animate.css一个跨浏览器的CSS动画库.简单易用.虽然已Star,但每次使用使用时都要在stars里查找...当然啦,更多动画库可以参考这里. 如何使用要在网站中使用animate.css ...
CSS一个冒号是伪类:用于监控动作、两个冒号是伪元素::用于定位元素
一个冒号两个冒号::: 一个冒号是伪类,两个冒号是伪元素伪类有----:first-child ,:link , :vistited,:hover:,active:focus,:lang用于监控 ...
CSS一个元素同时使用多个类选择器（class selector）
CSS类选择器参考手册一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div ...
css一个盒子里可以装3个图片并排吗_John: CSS浮动与清除浮动属性详解（CSS float clear）...
CSS里的浮动,可以让元素脱离标准流,从左上角或右上角依次贴边排列. 下面这个案例将会帮我们了解浮动的基本情况.下面这段代码块,外面是一个大div,里面包含着3个div,第一个左浮动,后两个无浮动. ...
android 水印视频教程,如何给视频添加一个摇摆的文字水印?安卓手机视频编辑助手app给视频加文字水印...
注意此教程方案是『安卓手机端教程方案』如果在手机端操作不方便或对眼睛不好也可以用另外电脑端的教程方案操作:视频加旋转水印[找更多方案] 今天要介绍安卓手机上视频编辑助手是可以给视频添加摇摆的文字水 ...
HTML+CSS一个简单的电影网页制作作业，学生个人html静态网页制作成品代码, html电影速递网
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
css一个点,用纯CSS从一个点到另一个点绘制一条线（路径）
我在下面的这条路径中有一个动画图像,并希望路径可见. CSS div { width:10px; height:10px; background:red; position:relative; -we ...

CSS一个摇摆的大红灯笼

CSS一个摇摆的大红灯笼相关推荐

最新文章

热门文章