资讯专栏INFORMATION COLUMN

【二次元的CSS】—— 纯CSS3做的能换挡的电扇

Cruise_Chan / 763人阅读

摘要:传送门效果是这样的结构小技巧就是,一开始就写了一组单选按钮来做开关的部分。有个地方需要优化,就是在换挡的时候,动画应该柔和些。

这次分享的电扇,和以往用css3画人物相比 多加了一点交互,就是电扇开关的地方,用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的。

</>复制代码

  1. GitHub传送门:https://github.com/lancer07/css3_fan

效果是这样的

HTML 结构

小技巧就是,一开始就写了一组单选按钮来做开关的部分。把单选按钮的透明度设为0,然后在后面叠加一个div来画开关的样式。

</>复制代码

  1. 0
  2. 1
  3. 2
  4. 3

开关部分的LESS代码如下

</>复制代码

  1. .switch{
  2. position: absolute;
  3. width: 24px;
  4. height: 24px;
  5. top: 296px;
  6. z-index: 13;
  7. opacity: 0;
  8. cursor: pointer;
  9. }
  10. .switch_0{
  11. .switch;
  12. left: 50px;
  13. &:checked+div{
  14. &+input+div+input+div+input+div+.mask{
  15. .leafs{
  16. animation-play-state:paused;
  17. }
  18. }
  19. }
  20. }
  21. .switch_1{
  22. .switch;
  23. left: 75px;
  24. &:checked+div{
  25. background: #a9af27;
  26. color: #0e6873;
  27. &+input+div+input+div+.mask{
  28. .leafs{
  29. animation-duration : 0.7s
  30. }
  31. }
  32. }
  33. }
  34. .switch_2{
  35. .switch;
  36. left: 100px;
  37. &:checked+div{
  38. background: #a9af27;
  39. color: #0e6873;
  40. &+input+div+.mask{
  41. .leafs{
  42. animation-duration : 0.4s
  43. }
  44. }
  45. }
  46. }
  47. .switch_3{
  48. .switch;
  49. left: 125px;
  50. &:checked+div{
  51. background: #a9af27;
  52. color: #0e6873;
  53. &+.mask{
  54. .leafs{
  55. animation-duration : 0.3s
  56. }
  57. }
  58. }
  59. }

看起来有点low。

至于电扇的CSS样式部分就不再赘述了。

有个地方需要优化,就是在换挡的时候,动画应该柔和些。有同学想到用什么办法优化下吗?

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54328.html

相关文章

  • 二次CSS】—— CSS3换挡电扇

    摘要:传送门效果是这样的结构小技巧就是,一开始就写了一组单选按钮来做开关的部分。有个地方需要优化,就是在换挡的时候,动画应该柔和些。 这次分享的电扇,和以往用css3画人物相比 多加了一点交互,就是电扇开关的地方,用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的。 GitHub传送门:https://github.com/lancer07/css3_fan 效...

    big_cat 评论0 收藏0
  • 二次CSS】—— CSS3画换频道电视机(合集)

    摘要:帮大家回忆一下,小时候的电视机。每到星期二的下午,总是这个图案。传送门这次分步来做,先画电视机,再画没有信号的界面。这次绝笔之作中,把之前所有用画的东西都放进电视机里了。所以电视机是可以切换频道的。这次不贴代码了,有点多。 帮大家回忆一下,小时候的电视机。每到星期二的下午,总是这个图案。 GitHub传送门:https://github.com/lancer07/css3TV 这次分2...

    LeviDing 评论0 收藏0
  • 二次CSS】—— CSS3画换频道电视机(合集)

    摘要:帮大家回忆一下,小时候的电视机。每到星期二的下午,总是这个图案。传送门这次分步来做,先画电视机,再画没有信号的界面。这次绝笔之作中,把之前所有用画的东西都放进电视机里了。所以电视机是可以切换频道的。这次不贴代码了,有点多。 帮大家回忆一下,小时候的电视机。每到星期二的下午,总是这个图案。 GitHub传送门:https://github.com/lancer07/css3TV 这次分2...

    elliott_hu 评论0 收藏0

发表评论

0条评论

Cruise_Chan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<