Оригинальный фон из точек

Пример:

••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

HTML:

<div class="dot-bg">	
	<span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span>
</div>

••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

</div>

CSS:

.dot-bg {
	display: grid;
	cursor: crosshair;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(10, 1fr);
	margin: 0;
	padding: 0;
	place-items: center;
	width: 100%;
	height: 500px;
}
.dot-bg span {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	position: relative;
	user-select: none;
	width: 100%;
	font-size: 18px;
	font-family: Verdana, sans-serif;
}
.dot-bg span:before, 
.dot-bg span:after {
	content: '';
	height: 4px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transition: transform 800ms 2s cubic-bezier(0.215, 0.61, 0.355, 1);
	width: 100%;
	z-index: -1;
}
.dot-bg span:after {
	height: 100%;
	width: 4px;
	transform: scaleY(0);
}
.dot-bg span:nth-child(1n) {
	color: #81d08b;
}
.dot-bg span:nth-child(1n):before, 
.dot-bg span:nth-child(1n):after {
	background: #81d08b;
}
.dot-bg span:nth-child(2n) {
	color: #9d80dd;
}
.dot-bg span:nth-child(2n):before, 
.dot-bg span:nth-child(2n):after {
	background: #9d80dd;
}
.dot-bg span:nth-child(3n) {
	color: #99cec2;
}
.dot-bg span:nth-child(3n):before, 
.dot-bg span:nth-child(3n):after {
	background: #99cec2;
}
.dot-bg span:nth-child(4n) {
	color: #db9a65;
}
.dot-bg span:nth-child(4n):before,
.dot-bg span:nth-child(4n):after {
	background: #db9a65;
}
.dot-bg span:nth-child(5n) {
	color: #7bd890;
}
.dot-bg span:nth-child(5n):before, 
.dot-bg span:nth-child(5n):after {
	background: #7bd890;
}
.dot-bg span:nth-child(6n) {
	color: #b7bb6c;
}
.dot-bg span:nth-child(6n):before,
.dot-bg span:nth-child(6n):after {
	background: #b7bb6c;
}
.dot-bg span:nth-child(7n) {
	color: #94d2a4;
}
.dot-bg span:nth-child(7n):before,
.dot-bg span:nth-child(7n):after {
	background: #94d2a4;
}
.dot-bg span:nth-child(8n) {
	color: #97d68c;
}
.dot-bg span:nth-child(8n):before,
.dot-bg span:nth-child(8n):after {
	background: #97d68c;
}
.dot-bg span:nth-child(9n) {
	color: #bac9c6;
}
.dot-bg span:nth-child(9n):before,
.dot-bg span:nth-child(9n):after {
	background: #bac9c6;
}
.dot-bg span:nth-child(10n) {
	color: #d4748e;
}
.dot-bg span:nth-child(10n):before,
.dot-bg span:nth-child(10n):after {
	background: #d4748e;
}
.dot-bg span:nth-child(11n) {
	color: #6aafcb;
}
.dot-bg span:nth-child(11n):before,
.dot-bg span:nth-child(11n):after {
	background: #6aafcb;
}
.dot-bg span:nth-child(12n) {
	color: #8794b3;
}
.dot-bg span:nth-child(12n):before,
.dot-bg span:nth-child(12n):after {
	background: #8794b3;
}
.dot-bg span:nth-child(13n) {
	color: #b5d96e;
}
.dot-bg span:nth-child(13n):before,
.dot-bg span:nth-child(13n):after {
	background: #b5d96e;
}
.dot-bg span:nth-child(14n) {
	color: #d189b9;
}
.dot-bg span:nth-child(14n):before,
.dot-bg span:nth-child(14n):after {
	background: #d189b9;
}
.dot-bg span:nth-child(15n) {
	color: #acd1af;
}
.dot-bg span:nth-child(15n):before,
.dot-bg span:nth-child(15n):after {
	background: #acd1af;
}
.dot-bg span:nth-child(16n) {
	color: #d2de9a;
}
.dot-bg span:nth-child(16n):before, 
.dot-bg span:nth-child(16n):after {
	background: #d2de9a;
}
.dot-bg span:nth-child(17n) {
	color: #8bc4a7;
}
.dot-bg span:nth-child(17n):before,
.dot-bg span:nth-child(17n):after {
	background: #8bc4a7;
}
.dot-bg span:nth-child(18n) {
	color: #86ae91;
}
.dot-bg span:nth-child(18n):before,
.dot-bg span:nth-child(18n):after {
	background: #86ae91;
}
.dot-bg span:nth-child(19n) {
	color: #b099c7;
}
.dot-bg span:nth-child(19n):before,
.dot-bg span:nth-child(19n):after {
	background: #b099c7;
}
.dot-bg span:nth-child(20n) {
	color: #d8c59c;
}
.dot-bg span:nth-child(20n):before,
.dot-bg span:nth-child(20n):after {
	background: #d8c59c;
}
.dot-bg span:nth-child(21n) {
	color: #7373bc;
}
.dot-bg span:nth-child(21n):before, 
.dot-bg span:nth-child(21n):after {
	background: #7373bc;
}
.dot-bg span:nth-child(22n) {
	color: #da8ede;
}
.dot-bg span:nth-child(22n):before,
.dot-bg span:nth-child(22n):after {
	background: #da8ede;
}
.dot-bg span:nth-child(23n) {
	color: #d0958c;
}
.dot-bg span:nth-child(23n):before,
.dot-bg span:nth-child(23n):after {
	background: #d0958c;
}
.dot-bg span:nth-child(24n) {
	color: #999476;
}
.dot-bg span:nth-child(24n):before, 
.dot-bg span:nth-child(24n):after {
	background: #999476;
}
.dot-bg span:nth-child(25n) {
	color: #d29498;
}
.dot-bg span:nth-child(25n):before,
.dot-bg span:nth-child(25n):after {
	background: #d29498;
} 
.dot-bg span:hover:before,
.dot-bg span:hover:after {
	transition-duration: 80ms;
	transition-delay: 0s;
}
.dot-bg span:hover:before {
	transform: scaleX(1);
}
.dot-bg span:hover:after {
	transform: scaleY(1);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

.dot-bg {

display: grid;

cursor: crosshair;

grid-template-columns: repeat(10, 1fr);

grid-template-rows: repeat(10, 1fr);

margin: 0;

padding: 0;

place-items: center;

width: 100%;

height: 500px;

}

.dot-bg span {

align-items: center;

display: flex;

height: 100%;

justify-content: center;

position: relative;

user-select: none;

width: 100%;

font-size: 18px;

font-family: Verdana, sans-serif;

}

.dot-bg span:before,

.dot-bg span:after {

content: '';

height: 4px;

left: 0;

margin: auto;

position: absolute;

right: 0;

transform: scaleX(0);

transition: transform 800ms 2s cubic-bezier(0.215, 0.61, 0.355, 1);

width: 100%;

z-index: -1;

}

.dot-bg span:after {

height: 100%;

width: 4px;

transform: scaleY(0);

}

.dot-bg span:nth-child(1n) {

color: #81d08b;

}

.dot-bg span:nth-child(1n):before,

.dot-bg span:nth-child(1n):after {

background: #81d08b;

}

.dot-bg span:nth-child(2n) {

color: #9d80dd;

}

.dot-bg span:nth-child(2n):before,

.dot-bg span:nth-child(2n):after {

background: #9d80dd;

}

.dot-bg span:nth-child(3n) {

color: #99cec2;

}

.dot-bg span:nth-child(3n):before,

.dot-bg span:nth-child(3n):after {

background: #99cec2;

}

.dot-bg span:nth-child(4n) {

color: #db9a65;

}

.dot-bg span:nth-child(4n):before,

.dot-bg span:nth-child(4n):after {

background: #db9a65;

}

.dot-bg span:nth-child(5n) {

color: #7bd890;

}

.dot-bg span:nth-child(5n):before,

.dot-bg span:nth-child(5n):after {

background: #7bd890;

}

.dot-bg span:nth-child(6n) {

color: #b7bb6c;

}

.dot-bg span:nth-child(6n):before,

.dot-bg span:nth-child(6n):after {

background: #b7bb6c;

}

.dot-bg span:nth-child(7n) {

color: #94d2a4;

}

.dot-bg span:nth-child(7n):before,

.dot-bg span:nth-child(7n):after {

background: #94d2a4;

}

.dot-bg span:nth-child(8n) {

color: #97d68c;

}

.dot-bg span:nth-child(8n):before,

.dot-bg span:nth-child(8n):after {

background: #97d68c;

}

.dot-bg span:nth-child(9n) {

color: #bac9c6;

}

.dot-bg span:nth-child(9n):before,

.dot-bg span:nth-child(9n):after {

background: #bac9c6;

}

.dot-bg span:nth-child(10n) {

color: #d4748e;

}

.dot-bg span:nth-child(10n):before,

.dot-bg span:nth-child(10n):after {

background: #d4748e;

}

.dot-bg span:nth-child(11n) {

color: #6aafcb;

}

.dot-bg span:nth-child(11n):before,

.dot-bg span:nth-child(11n):after {

background: #6aafcb;

}

.dot-bg span:nth-child(12n) {

color: #8794b3;

}

.dot-bg span:nth-child(12n):before,

.dot-bg span:nth-child(12n):after {

background: #8794b3;

}

.dot-bg span:nth-child(13n) {

color: #b5d96e;

}

.dot-bg span:nth-child(13n):before,

.dot-bg span:nth-child(13n):after {

background: #b5d96e;

}

.dot-bg span:nth-child(14n) {

color: #d189b9;

}

.dot-bg span:nth-child(14n):before,

.dot-bg span:nth-child(14n):after {

background: #d189b9;

}

.dot-bg span:nth-child(15n) {

color: #acd1af;

}

.dot-bg span:nth-child(15n):before,

.dot-bg span:nth-child(15n):after {

background: #acd1af;

}

.dot-bg span:nth-child(16n) {

color: #d2de9a;

}

.dot-bg span:nth-child(16n):before,

.dot-bg span:nth-child(16n):after {

background: #d2de9a;

}

.dot-bg span:nth-child(17n) {

color: #8bc4a7;

}

.dot-bg span:nth-child(17n):before,

.dot-bg span:nth-child(17n):after {

background: #8bc4a7;

}

.dot-bg span:nth-child(18n) {

color: #86ae91;

}

.dot-bg span:nth-child(18n):before,

.dot-bg span:nth-child(18n):after {

background: #86ae91;

}

.dot-bg span:nth-child(19n) {

color: #b099c7;

}

.dot-bg span:nth-child(19n):before,

.dot-bg span:nth-child(19n):after {

background: #b099c7;

}

.dot-bg span:nth-child(20n) {

color: #d8c59c;

}

.dot-bg span:nth-child(20n):before,

.dot-bg span:nth-child(20n):after {

background: #d8c59c;

}

.dot-bg span:nth-child(21n) {

color: #7373bc;

}

.dot-bg span:nth-child(21n):before,

.dot-bg span:nth-child(21n):after {

background: #7373bc;

}

.dot-bg span:nth-child(22n) {

color: #da8ede;

}

.dot-bg span:nth-child(22n):before,

.dot-bg span:nth-child(22n):after {

background: #da8ede;

}

.dot-bg span:nth-child(23n) {

color: #d0958c;

}

.dot-bg span:nth-child(23n):before,

.dot-bg span:nth-child(23n):after {

background: #d0958c;

}

.dot-bg span:nth-child(24n) {

color: #999476;

}

.dot-bg span:nth-child(24n):before,

.dot-bg span:nth-child(24n):after {

background: #999476;

}

.dot-bg span:nth-child(25n) {

color: #d29498;

}

.dot-bg span:nth-child(25n):before,

.dot-bg span:nth-child(25n):after {

background: #d29498;

}

.dot-bg span:hover:before,

.dot-bg span:hover:after {

transition-duration: 80ms;

transition-delay: 0s;

}

.dot-bg span:hover:before {

transform: scaleX(1);

}

.dot-bg span:hover:after {

transform: scaleY(1);

}

Если нет необходимости делать точки и крестики разноцветными, можно значительно упростить css код:

.dot-bg {
	display: grid;
	cursor: crosshair;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(10, 1fr);
	margin: 0;
	padding: 0;
	place-items: center;
	width: 100%;
	height: 500px;
}
.dot-bg span {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	position: relative;
	user-select: none;
	width: 100%;
	font-size: 20px;
	font-family: Verdana, sans-serif;
}
.dot-bg span:before, 
.dot-bg span:after {
	content: '';
	height: 4px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transition: transform 800ms 2s cubic-bezier(0.215, 0.61, 0.355, 1);
	width: 100%;
	z-index: -1;
}
.dot-bg span:after {
	height: 100%;
	width: 4px;
	transform: scaleY(0);
}
.dot-bg span {
	color: #BFE2FF;
}
.dot-bg span:before, 
.dot-bg span:after {
	background: #337AB7;
}
.dot-bg span:hover:before,
.dot-bg span:hover:after {
    transition-duration: 80ms;
    transition-delay: 0s;
}
.dot-bg span:hover:before {
    transform: scaleX(1);
}
.dot-bg span:hover:after {
    transform: scaleY(1);
}

.dot-bg {

display: grid;

cursor: crosshair;

grid-template-columns: repeat(10, 1fr);

grid-template-rows: repeat(10, 1fr);

margin: 0;

padding: 0;

place-items: center;

width: 100%;

height: 500px;

}

.dot-bg span {

align-items: center;

display: flex;

height: 100%;

justify-content: center;

position: relative;

user-select: none;

width: 100%;

font-size: 20px;

font-family: Verdana, sans-serif;

}

.dot-bg span:before,

.dot-bg span:after {

content: '';

height: 4px;

left: 0;

margin: auto;

position: absolute;

right: 0;

transform: scaleX(0);

transition: transform 800ms 2s cubic-bezier(0.215, 0.61, 0.355, 1);

width: 100%;

z-index: -1;

}

.dot-bg span:after {

height: 100%;

width: 4px;

transform: scaleY(0);

}

.dot-bg span {

color: #BFE2FF;

}

.dot-bg span:before,

.dot-bg span:after {

background: #337AB7;

}

.dot-bg span:hover:before,

.dot-bg span:hover:after {

transition-duration: 80ms;

transition-delay: 0s;

}

.dot-bg span:hover:before {

transform: scaleX(1);

}

.dot-bg span:hover:after {

transform: scaleY(1);

}

В результате получится так:

За основу взят код, найденный на codepen.io у пользователя Ryan Mulligan

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий: