css3
的animation
是个好东西,之前应景的七夕表白爱心图。(都是中午午休时候的突发奇想。)
想想,应该在很多应节场合用css
玩点有意思的。
突然想到上次的月食
,那就玩玩。
看了一个div
的炫技网站.
画个月亮嘛,还是尝试用一个div
来实现,主div
做背景黑夜,before
做月亮,after
做挡住月亮的黑影。
用position
控制位置,用animation
控制动画。
.moonback{
width: 600px;
height: 600px;
background-color: #000;
margin: 0 auto;
position: relative;
}
.moonback::before{
content: ",";
display: block;
position: absolute;
left: 200px;
top: 100px;
width: 200px;
height: 200px;
background-color: #ff0;
border-radius: 100px;
}
.moonback::after{
content: " ";
display: block;
position: absolute;
left: 26px;
top: 0px;
width: 200px;
height: 200px;
background-color: #000;
border-radius: 100px;
-webkit-animation: 8s dog linear infinite;
-moz-animation: 8s dog linear infinite;
animation: 8s dog linear infinite;
}
@-webkit-keyframes dog {
0% {
left:27px;
top: 0px;
}
100% {
left: 399px;
top: 216px;
}
}
@-moz-keyframes dog {
0% {
left:27px;
top: 0px;
}
100% {
left: 399px;
top: 216px;
}
}
@keyframes dog {
0% {
left:27px;
top: 0px;
}
100% {
left: 399px;
top: 216px;
}
}
最好body
也设成背景黑,那就更好了~
等等,看不到星星的天空,缺少了幸福感。
正好偷师一下,一个div里的美队盾做法,直接用★
也给个动画效果,放大缩小~
.star{
position: absolute;
}
.star::before{
content: "★";
display: block;
position: absolute;
left: 10px;
top: 20px;
width: auto;
height: auto;
color: #fff;
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
transform:scale(0.5);
-webkit-animation: 1s starlight linear infinite;
-moz-animation: 1s starlight linear infinite;
animation: 1s starlight linear infinite;
}
.star::after{
content: "★";
display: block;
position: absolute;
left: 40px;
top: 120px;
width: auto;
height: auto;
color: #fff;
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
transform:scale(0.5);
-webkit-animation: 2s starlight linear infinite;
-moz-animation: 2s starlight linear infinite;
animation: 2s starlight linear infinite;
}
@-webkit-keyframes starlight {
0% {
-webkit-transform:scale(0.5);
}
100% {
-webkit-transform:scale(0.1);
}
}
@-moz-keyframes starlight {
0% {
-moz-transform:scale(0.5);
}
100% {
-moz-transform:scale(0.1);
}
}
@keyframes starlight {
0% {
transform:scale(0.5);
}
100% {
transform:scale(0.1);
}
}
效果图如下:
完毕,嗯,再给月亮加个颜色渐变?
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。