css3动画
April Story
这个作者很懒,什么都没留下…
展开
-
<CSS练习>案例-旋转木马
一个大盒子section里面放6个小盒子div 6个小盒子 分别绕y轴递进旋转60度 再往Z轴正向移动300px 先旋转再移动 最后给父级加一个动画 @keyframes move{ 0%{ transform: rotateY(0); } 100%{ transform: rotateY(360deg); } } 效果图 代码: <!DOCTYPE html> <html> <head> <me原创 2021-06-25 11:15:48 · 216 阅读 · 0 评论 -
<CSS练习> 3D旋转 翻转的盒子
效果图: 正面 反面 1.先搭建HTML构架: <div class="box"> <div class="front"> 你好 </div> <div class="black"> 再见 </div> </div> 建立三个盒子 box是翻转的盒子 front是前面的盒子 black是后面的盒子 2.CSS样式 box指定大小 要添加3D呈现 black先沿Y轴旋转180度 最后将bo原创 2021-06-24 14:09:56 · 337 阅读 · 0 评论 -
<CSS练习> 奔跑的小熊 CSS3动画 含素材
本案例用了2个动画 第一个动画是整张的素材(文章末尾) 从左往右依次划过 这里animation属性用步长steps() 第二个是第一个的动画 一直运动到浏览器的中央 animoaion-fill-mode:forwards; 因为素材是白色的 我这里设置了背景图为粉色 更方便看出效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>原创 2021-06-22 13:21:38 · 2644 阅读 · 0 评论