css布局实现一个悬浮打火机生火打开动画效果代码
代码语言:html
所属分类:悬停
代码描述:css布局实现一个悬浮打火机生火打开动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@charset "UTF-8";
body {
background: #cccccc;
}
:before, :after {
position: absolute;
content: "";
}
.playground {
position: relative;
width: 140px;
height: 400px;
left: 50%;
margin-left: -70px;
}
.flame {
opacity: 0;
position: absolute;
bottom: 60%;
left: 42%;
width: 14px;
height: 70px;
background-color: white;
border-radius: 100% 100% 0 0;
box-shadow: 0 0 20px #FFFEF0, 0 0 20px #FFFEE6, 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec.........完整代码请登录后点击上方下载按钮下载查看
网友评论0