CSS3 画点好玩的东西

虽然项目赶工还是挺忙的，但闲了总要找点乐子嘛，毕竟秃顶和猝死两座大山夹逼着编程员们。

好吧，其实是无聊起来我自己都怕，于是就做了点小玩意。

.heart {

	position: relative;

	transform: rotate(45deg);

	width: 3em;

	height: 3em;

	background: red;

	margin: 50px auto;

}

.heart:before, .heart:after {

	content: "";

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: red;

    　　border-radius: 100%;

}

.heart:before {transform: translate(-50%,0);}

.heart:after {transform: translate(0,-50%);}

画个桃心送给女朋友（没错，我没法让她变成空心的，要空心的话那就去玩玩 Font Awesome 什么的吧）

.warning {

    position: relative;

    width: 0;

    height: 0;

    font-size: 2rem;

    border-left: 1em solid transparent;

    border-right: 1em solid transparent;

    border-bottom: 2em solid #e67e22;

    text-align: center;

    line-height: 2em;

}

.warning:after {

    content: "!";

    font-size: 2em;

    color: #fff;

    position: absolute;

    transform: translate(-50%,0);

}

警告，你的污力已超标（改掉 .warning 的 font-size 就能改整体大小咯）

.chooseButton {

	position: relative;

	font-size: 1rem;

	width: 4em;

	height: 2em;

	display: inline-block;

	background: lightblue;

	border: 1px solid #ccc;

	border-radius: 1000px;

	transition: .3s;

}

.chooseButton:after {

	content: "";

	position: absolute;

	top: 0;

	left: 0;

	width: 50%;

	height: 100%;

	border-radius: 100%;

	background: #fff;

	transition: .3s;

}

.chooseButton:focus {

	background: pink;

}

.chooseButton:focus:after {

	left: 50%;

}

这个倒是挺简单的，到时候把 :focus 换成类然后与事件绑定，是个不错的表单

.word {

	color: lightblue;

	text-shadow: 0 1px 0 #999, 0 2px 0 #888, 0 3px 0 #777, 0 4px 0 #666, 0 5px 0 #555, 0 4px 8px #000;

}

好吧好吧，先放这些吧，以后再来一波...

巴特西

CSS3 画点好玩的东西

最新文章

热门文章