首页 > 开发 > CSS > 正文

css3实现超炫风车特效

2024-07-11 08:54:31
字体:
来源:转载
供稿:网友

前面讲过css3可以替代很多js实现的效果,其实很多时候纯css3甚至可以替代图片,直接用css3就可以画出一些简单的图片。虽然css3画出来的图片效果可能不如直接用图片的好,实现起来也比较复杂,最麻烦的是兼容性问题,不如图片来得直接实用。但是换一种思路去思考问题的解决办法往往能激发我们的灵感,也有助于我们学习css3。

下面给出的demo里会有用图片和纯css3实现的风车效果的对比。

先看看静态的效果图:

下面简单介绍一下我是如何用纯css3实现一个风车的动画效果的,

1.画出风车的柱子

我们可以看到风车的柱子是一个等边的梯形,通过width,height属性配合border我们可以实现很多几何图形,如三角形,梯形等等,大家可以参照下面梯形的实现方法自己试试其他图形的实现。


复制代码
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表