当前位置: 首页 > Web前端 > HTML

前端日常实践:123#视频演示纯CSS制作双河北飞机

时间:2023-04-02 14:51:30 HTML

效果预览在当前页面点击右侧“点击预览”按钮进行预览,点击链接进行预览全屏显示。https://codepen.io/comehop??e/pen/yxVYRL互动视频本视频为互动视频,您可以随时暂停视频,编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cmVLRc9源码下载日常前端实战系列完整源码请到github下载:https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom,容器包含3个子元素,分别代表飞机、螺旋桨和轮子。飞机有4个桨叶,左右轮各一个:

定义容器尺寸:.plane{width:28em;高度:13em;font-size:10px;}定义子元素的整体布局和公共属性:.plane{display:flex;证明内容:居中;位置:相对;}.plane>*{位置:绝对;}.plane>*::before,.plane>*::after{content:'';position:absolute;}定义基本颜色:.plane{color:black;}绘制双翼:.wings{width:inherit;显示:弹性;证明内容:c输入;}.wings::before{宽度:继承;高度:0.5em;背景色:currentColor;}.wings::after{top:4em;宽度:90%;高度:0.4em;;}绘制螺旋桨的中心:.fans{width:11em;高度:11em;轮廓:1px虚线;background:radial-gradient(black2.5em,transparent2.5em);}定义叶片的形状为半圆:。粉丝跨度{宽度:继承;height:inherit;}.fansspan::before{width:inherit;高度:50%;背景色:rgba(255,255,255,0.4);border-radius:50%50%00/100%100%00;}分别旋转叶片的角度,使4个叶片均匀分布在一个圆圈内:.fansspan::before{transform-origin:底部;变换:旋转(计算((var(--n)-1)*90deg));}.fansspan:nth-??child(1){--n:1;}.fansspan:nth-??child(2){--n:2;}.fansspan:nth-child(3){--n:3;}.fansspan:nth-child(4){--n:4;}画2个轮子:.wheels{width:16em;高度:2em;轮廓:1px虚线;底部:0;显示:弹性;内容:空间之间;}.wheels跨度{位置:静态;宽度:1em;身高:继承;背景颜色:currentColor;border-radius:0.5em;}绘制轮子的两个支架:.wheelsspan{display:flex;证明内容:居中;}.wheelsspan::before{width:0.2em;高度:8em;背景颜色:currentColor;变换原点:底部;底部:1em;z-index:-1;}.wheels.left::before{transform:rotate(45deg);}.wheels.right::before{transform:rotate(-45deg);}接下来制作动画效果添加螺旋桨旋转动画效果:.fansspan{animation:fans-rotating0.8slinearinfinite;animation-delay:calc(var(--n)*0.1s);}@keyframesfans-rotating{to{transform:rotate(-1turn);}}增加飞机飞行的动画效果:.plane{animation:fly5sinfinite;}@keyframesfly{10%,50%,100%{top:0;}25%{顶部:1em;}75%{顶部:-1em;}}增加飞机旋转动画效果:.plane{animation:plane-rotating10sinfinite,fly5sinfinite;}@keyframesplane-rotating{10%,30%,50%{transform:rotate(0deg);}20%{变换:旋转(-4deg);}80%{变换:旋转(8度);}100%{变换:旋转(-1turn);}}你完成了!