纯CSS手里剑绘制练习优化2

来源：互联网发布：行业数据分析编辑：程序博客网时间：2024/06/10 02:47

今天继续优化css3代码，使用伪类选择器和伪对象选择器，增加圆孔内阴影，精简了很多代码。

截图：

代码案例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS手里剑绘制练习优化2</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
margin: 100px auto;
position: relative;
background-color: #FFF;
transform-style: preserve-3d;
animation: rotateZ360 20s ease-in-out infinite;
}
/*想要让这个相册动起来，加一个动画就好了*/
@keyframes rotateZ360 {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.trh {
width: 200px;
height: 200px;
margin: 0px;
padding: 0px;
float: left;
}
/* trh的子元素中div标签的第1个子元素 */
.trh > div:first-child{
width: 0;
height: 0;
border-top: 50px solid #999;
border-left: 50px solid transparent;
border-right: 150px solid transparent;
}
/* trh的子元素中div标签的最后1个子元素 */
.trh > div:last-child{
width: 0;
height: 0;
border-left: 50px solid #000;
border-top: 50px solid transparent;
border-bottom: 150px solid transparent;
position: relative;
bottom: 50px;
}
/* trh的父元素的1个子元素 */
.trh:first-child{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* trh的父元素的2个子元素 */
.trh:nth-child(2) {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
/* trh的父元素的3个子元素 */
.trh:nth-child(3) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/* trh的父元素的最后1个子元素 */
.trh:last-child {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* trh的父元素的最后1个子元素后面加上伪对象类似span标签作用，减少页面代码 */
.trh:last-child:after {
content: '';
height: 50px;
width: 50px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
position: relative;
background-color: #FFFFFF;
position: relative;
display: block;
left: -25px;
top: -275px;
box-shadow:3px 3px 3px 1px #333 inset;
/*水平阴影垂直阴影羽化值阴影的大小阴影的颜色阴影的类别：内和外阴影，默认是外阴影*/

}
</style>
</head>

<body>
<div class="box">
<div class="trh">
<div></div>
<div></div>
</div>
<div class="trh">
<div></div>
<div></div>
</div>
<div class="trh">
<div></div>
<div></div>
</div>
<div class="trh">
<div></div>
<div></div>
</div>
</div>
</body>
</html>

0 0