2019 年 3月 29 日随笔档案 - 半夏微澜ぺ

2019年3月29日

摘要：原理：利用transform-origin改变旋转的圆心，实现秒数和分钟数的刻度线，利用transfrom translate实现钟表小时刻度的显示 html: 1 绘制圆盘 2 绘制秒数 css js：绘制的是60个刻度，每个刻度的角度是360/60*i 4 绘制分钟刻度，12个刻度线，原理同阅读全文

posted @ 2019-03-29 16:53 半夏微澜ぺ阅读(382) 评论(0) 推荐(0)

菜单展开效果

摘要： html 原理：子菜单定位到父元素圆的中心点，利用transform的translate来实现位移，子菜单的位置利用三角函数获取，父元素加上透明度opacity和缩放scale效果 css js 阅读全文

posted @ 2019-03-29 15:22 半夏微澜ぺ阅读(313) 评论(0) 推荐(0)

css3 实现运动动画圆与椭圆

摘要：圆： html css 椭圆运动：原理就是在圆运动的基础上给父元素添加一个y轴上的上下运动 css 钟摆运动：这个比较简单，就是把元素的运动参考点移动到顶部中心，就是设置 transform-origin:top center; demo: html css 阅读全文

posted @ 2019-03-29 15:19 半夏微澜ぺ阅读(2364) 评论(0) 推荐(0)

css3 翻起页脚

摘要： html <div class="demo2"> <img src="images/1.jpg"> </div> css .demo2{ width: 300px; height: 300px; position: relative; margin: 100px auto; } .demo2 img 阅读全文

posted @ 2019-03-29 11:25 半夏微澜ぺ阅读(309) 评论(0) 推荐(0)

css3 实现loading效果

摘要： 1 圆点渐入渐出要点：缩放和透明度的变化,循环变化 <div class="demo1"></div> 2 线条loading图要点：使用缩放实现线条的高度的变化，循环变化，使用animation-delay的负值实现动画的连续变化（负值：动画立即执行，从设置的值之后开始执行动画，比如是-1s 阅读全文

posted @ 2019-03-29 11:20 半夏微澜ぺ阅读(299) 评论(0) 推荐(0)