css+div实现灯牌霓虹灯旋转动画效果代码-html代码-BFW代码库

css+div实现灯牌霓虹灯旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现灯牌霓虹灯旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat:400');

body{
  background-color:#3c3c3e;
  font-family : 'Montserrat', Arial;
}
.bulb-board-wrapper {
    display: inline-flex;
    transform: scale(1) translate(-50%, -50%);
    transition: transform 0.05s linear;
    position:absolute;
    left:50%;
    top:50%;
    tranform:translate(-50%,-50%);
}
.bulb-board-wrapper:active{
    transform: scale(0.7);
}
.btn {
    font-size: 1.3em;
    text-align: center;
    text-decoration: none;
    color: rgba(254, 234, 145, 1);
    /* background: #241454; */
    background: rgba(77, 76, 84, 1);
    outline: none;
    position: relative;
    display: inline-block;
    padding: 10px 22px;
    cursor: pointer;
    width: auto;
    box-shadow: inset 1px -1px 7px -1px #000;
}
.btn:active{
	box-shadow: inset -1px -1px 7px -1px #000;
} 
.bulb-board {
    position: relative;
    display: inline-block;
    padding: 15px;
    /* background-color: #2c127e; */
    background-color: rgba(53, 53, 62, 1);
    border-radius: 10px;
    overflow: hidden;
    transform-origin: top center;
    box-shadow: 2px 2px 9px 0px #000;
}
.bulb {
	position: absolute;
}
.top-bulb,
.bottom-bulb {
	width: calc(100% - 30px);
	height: 15px;
	left: 50%;
	transform: translate(-50%);
}
.top-bulb {
	top: 0;
}
.right-bulb,
.left-bulb {
	height: 100%;
	width: 15px;
	bottom: 0;
}
.right-bulb {
	right: 0;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.left-bulb {
	left: 0;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.bulb > ul > li {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	width: 7px;
	height: 7px;
    border-radius: 50%;
    background: rgba(236, 204, 104, 0.1);
	animation-name: flash-1;
	animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	position: relative;
}
.bulb > ul > li:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	top: 0;
	left: -4px;
	border-radius: 50%;
	z-index: -1;
	opacity: 0.3;
}
.bulb > ul {
	display: flex;
	padding: 0;
	margin: 0;
	justify-content: space-around;
	align-items: center;
	height: 100%;
}
.top-bulb > ul,
.bottom-bulb > ul {
	flex-direction: row;
}
.right-bulb > ul,
.left-bulb > ul {
	flex-direction: column;
}
/*Animation */
@keyframes flash-1 {
	0% {
		background:#f0b600;
		background:rgba(236, 204, 104, 1);
	}
	100% {
		background:rgba(236, 204, 104, 0.1);
	}
}
</style>
<style scoped>
    @media (max-width: 768px){
        .btn-primary{
            font-size: 1em;
            padding: 8px 15px;
        }
        .bulb-board{
            padding: 8px;
        }
        .top-bulb, .bottom-bulb{
            height: 8px;
        }
        .right-bulb, .left-bulb{
            width: 8px;
        }
        .bulb > ul > li{
            width: 4px;
            height: 4px;
        }
        .right-bulb{
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }
        .left-bulb{
            border-top-left-radius: 2px;
    .........完整代码请登录后点击上方下载按钮下载查看