<!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">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
</head>
<body>
<ul>
<li>
<label>
<input type="checkbox">
<div class="icon"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></div>
</label>
</li>
<li>
<label>
<input type="checkbox">
<div class="icon"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span></div>
</label>
</li><li>
<label>
<input type="checkbox">
<div class="icon"><span class="glyphicon glyphicon-star" aria-hidden="true"></span></div>
</label>
</li><li>
<label>
<input type="checkbox">
<div class="icon"><span class="glyphicon glyphicon-music" aria-hidden="true"></span></div>
</label>
</li><li>
<label>
<input type="checkbox">
<div class="icon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
</label>
</li>
</ul>
</body>
</html>
html,body {
margin: 0;
padding: 0;
box-sizing: border-box;
/* background-color: cyan; */
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #18191f;
}
ul {
display: flex;
}
ul li {
list-style: none;
}
ul li label {
position: relative;
}
ul li label input[type="checkbox"] {
position: absolute;
cursor: pointer;
opacity: 0;
}
ul li label .icon {
position: relative;
width: 60px;
height: 60px;
background: #18191f;
color: #555;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 0 10px;
border-radius: 10px;
box-shadow: -1px -1px 4px rgb(225,225,225,0.05),
4px 4px 6px rgb(0,0,0,0.2),
inset -1px -1px 4px rgba(225,225,225,0.05),
inset 1px 1px 1px rgba(0,0,0,0.2);
}
ul li label .icon:before {
content:"";
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 5px);
height: calc(50% - 2px);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background: rgba(225,225,225,0.05);
}
ul li label input[type="checkbox"]:checked~ .icon {
box-shadow: inset 0px 0px 2px rgba(225,225,225,0.05),
inset 4px 4px 6px rgba(0,0,0,0.2);;
}
ul li label input[type="checkbox"]:checked~ .icon .glyphicon{
color:#00f3ff;
text-shadow: 0 0 15px #00f3ff;
text-shadow: 0 0 25px #00f3ff;
animation: animate 5s linear infinite;
}
@keyframes animate {
from{
filter:hue-rotate(0deg);
}
to{
filter:hue-rotate(360deg);
}
}
知识点:
-
calc()函数:用于动态计算长度值 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
通过计算宽度可以实现居中等,而且兼容多种浏览器 -
:before :after { content: " " };
-
ul li label input[type=“checkbox”]:checked~ .icon :checked~ :来表示已经被点击的状态时的css
-
animation属性
CSS animation 属性是 (animation-name),animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
使用@keyframes规则,你可以创建动画通过逐步改变从一个CSS样式设定到另一个,指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。 -
filter属性:
hue-rotate(0deg):函数在输入图像上应用色相旋转