按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/RBjdzZ
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cgkE6C6
定义 dom,容器中包含 2 个元素,分别代表插头和线缆:
<p class="cable"> <span class="head"></span> <span class="body"></span> </p>
居中显示:
body { margin: 0; height: 100vh; display: flex; align-items: center; }
定义容器尺寸:
.cable { display: flex; align-items: center; font-size: 10px; margin-left: 5em; }
画出插头的轮廓:
.head { width: 8.5em; height: 8.5em; border-radius: 2em 0 0 2em; }
画出插头上针脚的轮廓:
.head { position: relative; } .head::before { content: ''; position: absolute; width: 3em; height: 7.3em; top: calc((8.5em - 7.3em) / 2); left: 0.7em; border-radius: 1em; box-sizing: border-box; }
画出线缆中手持部位的轮廓:
.body { width: 15.5em; height: 11em; border-radius: 0.5em; }
画出线缆中稍粗部位的轮廓:
.body { position: relative; display: flex; align-items: center; } .body::before { content: ''; position: absolute; width: 13.5em; height: 6em; left: 15.5em; }
画出线缆的延长线部分:
.body::after { content: ''; position: absolute; width: 100vh; height: 3.9em; left: calc(15.5em + 13.5em); }
隐藏画面外的部分:
body { overflow: hidden; }
接下来绘制细节。
为延长线涂上渐变色:
.body::after { background: linear-gradient( white, hsl(0, 0%, 96%) 5%, hsl(0, 0%, 97%) 25%, hsl(0, 0%, 95%) 40%, hsl(0, 0%, 81%) 95%, white ); }
为线缆中稍粗部位涂上渐变色:
.body::before { background: linear-gradient( white, hsl(0, 0%, 96%) 5%, hsl(0, 0%, 98%) 20%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 81%) 95%, white ); }
为线缆中手持部位涂上渐变色:
.body { background:linear-gradient( hsl(0, 0%, 91%), white 15%, hsl(0, 0%, 93%) 50%, hsl(0, 0%, 87%) 70%, hsl(0, 0%, 79%) 90%, hsl(0, 0%, 84%), hsl(0, 0%, 86%) ); }
为插头涂上渐变色:
.head { background: linear-gradient( -45deg, hsl(0, 0%, 75%), hsl(0, 0%, 79%), hsl(0, 0%, 78%), hsl(0, 0%, 87%) 80% ); }
在插头上画出针脚:
.head::before { background-color: white; } .head::after { content: ''; position: absolute; box-sizing: border-box; width: 2.2em; height: 0.4em; color: goldenrod; background-color: currentColor; border-radius: 0.5em; left: 1.1em; top: 1.2em; box-shadow: 0 0.8em 0, 0 1.6em 0, 0 2.4em 0, 0 3.2em 0, 0 4em 0, 0 4.8em 0, 0 5.6em 0; }
接下来添加阴影,使线缆更立体。
绘制插头上的阴影:
.head { background: linear-gradient( 90deg, transparent 80%, rgba(0,0,0,12%) ), linear-gradient( -45deg, hsl(0, 0%, 75%), hsl(0, 0%, 79%), hsl(0, 0%, 78%), hsl(0, 0%, 87%) 80% ); }
绘制线缆手持部分的阴影:
.body::before { background: linear-gradient( 45deg, rgba(0,0,0,4%) 10%, transparent 20% ), linear-gradient( 90deg, rgba(0,0,0,4%), transparent 10% ), linear-gradient( white, hsl(0, 0%, 96%) 5%, hsl(0, 0%, 98%) 20%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 81%) 95%, white ); }
绘制线缆中稍粗部位的阴影:
.body::after { background: linear-gradient( 45deg, rgba(0,0,0,4%), transparent 4% ), linear-gradient( 90deg, rgba(0,0,0,4%), transparent 2% ), linear-gradient( white, hsl(0, 0%, 96%) 5%, hsl(0, 0%, 97%) 25%, hsl(0, 0%, 95%) 40%, hsl(0, 0%, 81%) 95%, white ); }
最后,为画面增加入场动画
.cable { animation: show 5s linear infinite; } @keyframes show { 0% { transform: translateX(100vw); } 20%, 100% { transform: translateX(0); } }
大功告成!
相关文章:
相关视频:
以上是实例讲解如何用CSS语言创作一根闪电连接线的详细内容。更多信息请关注PHP中文网其他相关文章!