css随笔记

发表于 | 分类于

div下加一条分割线

1
border-bottom:1px solid  #D7D8D9;

头像圆角并旋转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  border-radius: 60%;
  transition: 2.5s all;  
}

.site-author-image:hover {
    transform: rotate(360deg);
}


.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

立体旋转图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>立体滚动图</title>
	<style>
	.wrap{
		width: 120px;
		height: 200px;
		margin: 20px;
		position: fixed;
		top: 15px;
		right: 15px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		z-index: 22;
	}
	.cube {
		width: 120px;
		height: 120px;
		margin: 0 auto;
		transform-style: preserve-3d;
		transform: rotateX(-30deg) rotateY(-80deg);
		animation: rotate linear 20s infinite;
	}
	@-webkit-keyframes rotate {
		from {
			transform: rotateX(0deg) rotateY(0deg);
		}
		to {
			transform: rotateX(360deg) rotateY(360deg);
		}
	}
	.cube div {
		position: absolute;
		width: 120px;
		height: 120px;
		opacity: 0.8;
		transition: all .4s;
	}
	.cube .out_front {
		transform: rotateY(0deg) translateZ(60px);
	}

	.cube .out_back {
		transform: translateZ(-60px) rotateY(180deg);
	}

	.cube .out_left {
		transform: rotateY(-90deg) translateZ(60px);
	}

	.cube .out_right {
		transform: rotateY(90deg) translateZ(60px);
	}

	.cube .out_top {
		transform: rotateX(90deg) translateZ(60px);
	}

	.cube .out_bottom {
		transform: rotateX(-90deg) translateZ(60px);
	}
	</style>
<body>

<div class="wrap">
    <div class="cube">
        <div class="out_front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp" class="pic"></div>
        <div class="out_back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp" class="pic"></div>
        <div class="out_left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp" class="pic"></div>
        <div class="out_right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp" class="pic"></div>
        <div class="out_top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp" class="pic"></div>
        <div class="out_bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp" class="pic">
        </div>
    </div>
</div>
</body>
</html>
-------------本文结束感谢您的阅读-------------