html5和css3能实现哪些效果

html-css0150

html5和css3能实现哪些效果,第1张

模糊,毛玻璃效果 (Css3 Filter):

图片自动360旋转效果:

图片,平滑的转动360度效果:

CSS3倒计时效果:

文字描边效果:

Canvas 立方体 Cube 效果:

text-fill-color 文字遮罩动画效果

html5:

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素,比如 article、footer、header、nav、section

新的表单控件,比如 calendar、date、time、email、url、search

css3:

1. CSS3实现圆角(border-radius),阴影(box-shadow),

2.对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)// 旋转,缩放,定位,倾斜

4.增加了更多的CSS选择器 多背景 rgba

5.在CSS3中唯一引入的伪元素是 ::selection.

6.媒体查询,多栏布局

7.border-image

用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。

这里收集了几十个用html5和css3实现的loading效果,以供学习参考。

01. CSS Rainbow Loader

02. Single element Slack loader

03. Pure CSS3 loader

04. CSS Cog loader

05. VSCO – CSS loader

06. Cube CSS Loader

07. CSS Loader

08. Tumblr-style cog loaders

09. CSS Weather Loader

10. Chrome Cast CSS Loader

11. CSS3 Loaders

12. Android 4.4 Kitkat loader

13. CSS loaders kit

14. CSS creative loading

15. CSS Loading Animation

16. Logo Loader

17. Loaders collection by Loaders.css

18. CSS Water filling Loader

19. CSS loader

20. Animated CSS3 Loading Bar

21. CSS loading text animation

22. Simple Loader

23. CSS Loading animation

24. CSS loader

25. Pushing pixels CSS loader

26. CSS Loader

27. CSS Loaders

28. Random Loader

29. Single element CSS spinners

30. Simple CSS loader

31. SpinKit – CSS loaders

32. Modern Google Loader

33. 2D and 3D Block Loaders

34. 12 free SVG loaders

35. Page Loading Effects

36. Pace.js – Page Load Progress Bars

37. Loading SVG loaders

38. Material Design preloader