前端开发纯CSS制作晚上开灯效果
摘要： 前端开发需要学java吗 我java开发还要写前端 java开发分前端和后端吗 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ /> ……
| 前端开发需要学java吗 |
| 我java开发还要写前端 |
| java开发分前端和后端吗 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
<style>
/* css Document */
/*公共样式*/
body,
button,
select,
textarea,
input,
label,
option,
fieldset,
legend {
font-family: 微软雅黑e\8f6f\96c5\9ed1, Tahoma, Verdana;
font-size: 12px;
line-height: 18px;
color: #444;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
textarea {
resize: none;
}
.clear {
height: 1px;
overflow: hidden;
clear: both;
}
a,
img {
border: 0;
}
a {
color: #666;
text-decoration: none;
}
li {
list-style-type: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.nf {
clear: both;
}
.red {
color: red;
font-weight: bold;
}
.green {
color: #00b500;
font-weight: bold;
}
.ds {
display: block;
}
.hid {
overflow: hidden;
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: ‘.’;
font-size: 0;
}
.jianbian {
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #f4f4f4),
color-stop(100%, #eee)
);
background: -webkit-linear-gradient(top, #f4f4f4 0, #eee 100%);
background: linear-gradient(to bottom, #f4f4f4 0, #eee 100%);
}
.bottomshadow {
border-bottom: solid 1px #b3b3b3;
-webkit-box-shadow: 0 1px 1px 0 #dfdfdf;
box-shadow: 0 1px 1px 0 #dfdfdf;
}
/*具体样式*/
body {
background: #113965;
}
.container {
width: 100%;
height: 100%;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
.container .lempLine {
border-left: 2px solid #000;
height: 300px;
width: 0px;
position: relative;
left: 50%;
transform: translate(-50%, 0);
z-index: 5;
}
.container .lempGroup {
width: 120px;
height: 120px;
position: relative;
left: 50%;
transform: translate(-50%, -1px);
z-index: 5;
}
.container .lempGroup .Lampshade {
width: 0px;
height: 0px;
border-width: 0px 60px 60px 60px;
border-color: #000000 transparent;
border-style: solid;
position: relative;
z-index: 5;
}
.container .lempGroup .LampBulb {
width: 50px;
height: 50px;
border-radius: 40px;
position: relative;
z-index: 4;
left: 50%;
top: -28px;
transform: translate(-50%, 0);
}
.closeLight {
background: #e7e7e7;
border: 1px solid #e7e7e7;
}
.openLight {
background: #eade3b;
border: 1px solid #eade3b;
box-shadow: 0 0 26px #eade3b;
}
.openBtn {
width: 50px;
height: 80px;
background: #ffffff;
border: 1px solid #fff;
border-radius: 4px;
position: relative;
top: -45px;
left: -120px;
float: right;
z-index: 1;
box-shadow: 0px 0px 10px 0px #ffffff;
}
.openBtn > div {
width: 40px;
height: 70px;
position: relative;
left: 5px;
top: 5px;
}
.openBtn > div > ul > li {
width: 100%;
height: 33px;
text-align: center;
}
.openBtn > div > ul > li > span {
position: relative;
top: 10px;
color: #000000;
font-size: 14px;
font-weight: 900;
cursor: pointer;
}
.notic {
width: 600px;
position: relative;
left: 50%;
transform: translate(-50%, 0);
z-index: -1;
top: -205px;
}
.notic > img {
width: 100%;
}
.notic > p {
font-size: 16px;
color: #c9bc21;
}
.notic > p > span {
font-size: 20px;
color: #c9bc21;
}
.noticBar {
width: 500px;
height: 500px;
display: none;
border-radius: 250px;
background: #f2e876;
opacity: 0.4;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 150px;
box-shadow: 0px 0px 210px 0px #f2e876;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”lempLine”></div>
<div class=”lempGroup”>
<div class=”Lampshade”></div>
<div id=”line” class=”LampBulb closeLight”></div>
</div>
<div class=”openBtn”>
<div>
<ul>
<li>
<span id=”openBt”>ON</span>
</li>
<li>
<span id=”closeBt”>OFF</span>
</li>
</ul>
</div>
</div>
<div class=”noticBar”></div>
<div class=”notic”></div>
</div>
<script type=”text/javascript”>
$(‘#openBt’).on(‘click’, function() {
$(this).css({ color: ‘#f00’ })
$(‘#closeBt’).css({ color: ‘#000’ })
$(‘#line’).removeClass(‘closeLight’)
$(‘#line’).addClass(‘openLight’)
$(‘.noticBar’).show()
})
$(‘#closeBt’).on(‘click’, function() {
$(this).css({ color: ‘#f00’ })
$(‘#openBt’).css({ color: ‘#000’ })
$(‘#line’).removeClass(‘openLight’)
$(‘#line’).addClass(‘closeLight’)
$(‘.noticBar’).hide()
})
</script>
</body>
</html>
| java开发学后端还是前端好 |
| java开发好还是前端好 |
| 秦皇岛前端开发javaee教程 |
» 本文来自：前端开发者 » 《前端开发纯CSS制作晚上开灯效果》
» 本文链接地址：https://www.rokub.com/8184.html
» 您也可以订阅本站：https://www.rokub.com
近期评论