css学习
cRack_cLick
学无止境,一些小小的心得,绝不写收费文章,如果对你有帮助,不如点个小小的赞支持一下
展开
-
CSS学习(三)——吃豆人加载动画
效果如下: 制作的比较简单,其实本功能的困难点就是如何绘制嘴部的扇形,我的思路是这样的: 创建一个很大的矩形,使其一个顶点在圆心,如下: 然后通过overflow:hidden去除多余的部分,在用transform的rotate和skew进行控制,最终看起来就像嘴在动一样 最后源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m原创 2021-01-05 14:23:00 · 534 阅读 · 1 评论 -
CSS学习(二)——制作加载动画
效果如下: 学习制作关键帧动画,本内容需要注意的地方: var声明自定义属性名称,点我查看文档 calc动态计算属性,点我查看文档 源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0".原创 2021-01-03 16:29:22 · 204 阅读 · 0 评论 -
CSS学习(一)——制作新年贺卡
效果如下: 我也是正在学习中,此特效没有太高级的代码语法,只是transform的应用 源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cRack<.原创 2021-01-02 20:45:33 · 1346 阅读 · 1 评论