我正在参加「创意开发 投稿大赛」详情请看:掘金创意开发大赛来了!
我的想法
都说程序员是死宅男,天生缺少浪漫细菌。这不是明摆着对程序员的黑化吗?(虽然我真的是这样)。而且最近我看到一条新闻,说程序员在人群中很明显“黑眼镜,格子衫,双肩包,说话没有头发多” 。。。。说实话很多行业对我们程序员有太多的不了解导致一直被黑化。虽然说除了发量描述的跟我还挺像(可恶)。所以今天我出一个和浪漫有关的话题特效,希望大家用的到。
展示
相关技术
首先页面部分设置div容器,和文字。
<div class="balloon"></div>
<div class="center">
<h5>
我爱你就像<br><br><br>
风走了千万里不问归期<br><br><br>
像太阳升了落去无论朝夕<br><br><br>
就像云飘了千万里都不曾歇息<br><br><br>
像白雪肆虐大地茫茫无期</h5></br> <h6>2022.++.++</h6>
</div>
然后就是样式的设置了
一个粉色调的背景
body {
height: 100vh;
width: 100vw;
overflow: hidden;
background: -webkit-linear-gradient(white, #e0d1d1);
background: linear-gradient(white, #e0d1d1);
box-shadow: inset 0 5vh 30vh 5vh #d6c2c2;
font-family: "Share Tech Mono", monospace;
color: white;
font-size: 2rem;
}
设置气球样式
.balloon {
top: 100vh;
opacity: 0.95;
position: absolute;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
width: 10rem;
height: 10rem;
background: #faf9f9;
border-radius: 10rem 10rem 4rem 10rem;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 3rem 3rem 1.5rem rgba(153, 102, 102, 0.2);
-webkit-animation: float1 10s infinite ease-out;
animation: float1 10s infinite ease-out;
}
设置浮动
-webkit-keyframes float1 {
0% {
-webkit-transform: rotate(40deg) translateY(0) translateX(0);
transform: rotate(40deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
}
}
@keyframes float1 {
0% {
-webkit-transform: rotate(40deg) translateY(0) translateX(0);
transform: rotate(40deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
}
}
@-webkit-keyframes float2 {
0% {
-webkit-transform: rotate(55deg) translateY(0) translateX(0);
transform: rotate(55deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
}
}
@keyframes float2 {
0% {
-webkit-transform: rotate(55deg) translateY(0) translateX(0);
transform: rotate(55deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
}
}
@-webkit-keyframes float3 {
0% {
-webkit-transform: rotate(45deg) translateY(0) translateX(0);
transform: rotate(45deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
}
}
@keyframes float3 {
0% {
-webkit-transform: rotate(45deg) translateY(0) translateX(0);
transform: rotate(45deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
}
}
@-webkit-keyframes floatfront1 {
0% {
-webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
}
}
@keyframes floatfront1 {
0% {
-webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
}
}
@-webkit-keyframes floatfront2 {
0% {
-webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
}
}
@keyframes floatfront2 {
0% {
-webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
}
}
@-webkit-keyframes floatfront3 {
0% {
-webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
}
}
@keyframes floatfront3 {
0% {
-webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
}
100% {
-webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
}
}
主要内容就是这样效果和整体代码我放在上面了,有兴趣大家可以看看。