淘先锋技术网

首页 1 2 3 4 5 6 7

最近我发现了一些有趣的 CSS 搞笑图片,简直让我大喊“太有创意了!”

img{
border: 5px solid black;
border-radius: 50%;
box-shadow: 0 0 20px 5px #00ff00;
transform: rotate(360deg)
}

首先来看这个旋转的球,有人可能会认为是使用 JavaScript 实现的,但是其实只需要 CSS 就可以完成。

img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(45deg)
}

还有这只旋转的猫头鹰,利用了绝对定位和 translate 实现了中心旋转的效果。

div{
border: 5px solid black;
padding: 20px;
font-size: 40px;
font-weight: bold;
background-color: #00ff00;
transform: perspective(600px) rotateX(45deg) rotateY(45deg);
}

这个立体效果非常棒的方块,使用了 CSS 的透视变换,同时绕着 X 轴和 y 轴旋转。

div{
width: 50px;
height: 50px;
border: 5px solid black;
background-color: #00ff00;
animation: shake 0.5s infinite alternate;
}
@keyframes shake{
0%{ transform: translate(0,0)}
100%{ transform: translate(10px,10px)}
}

最后,这个快速晃动的方格,通过使用 CSS 的关键帧动画来实现。

总的来说,这些 CSS 搞笑图片真的非常有趣和创意,不只能让我们在学习 CSS 的过程中保持乐观和开心,同时也能激发我们自己的想象力,制作出更加有趣的网页效果。