JS实现A13界面个人练习（20）

最新推荐文章于 2022-08-14 14:33:01 发布

迷人滴巷子哥

最新推荐文章于 2022-08-14 14:33:01 发布

阅读量274

点赞数 1

分类专栏： CSS 文章标签： html css css3 js javascript

本文链接：https://blog.csdn.net/weixin_47445023/article/details/106323163

版权

这是一个关于使用JS实现A13界面的个人练习项目，涵盖了HTML、CSS和JS源代码的编写，最终展示了实现的效果图片。

摘要由CSDN通过智能技术生成

JS实现A13界面个人练习第二十天

Html源代码

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - iPhone SE - A13 Animation</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<section id="chip-section">
  <video src="https://www.apple.com/105/media/us/iphone-se/2020/90024c0f-285a-4bf5-af04-2c38de97b06e/anim/arcade-loop/large.mp4" muted playsinline autoplay loop></video>
  <h1>
    iPhone 11 Pro called.<br>
    It wants its chip back.
  </h1>
  <div id="the-chip">
    <svg viewBox="0 0 1000 1000" id="A13">
      <rect class="text-bg" x="78" y="307" width="843" height="387"></rect>
      <path d="M893.839695,31 L895.066071,31.0099354 C935.054114,31.6582805 967.348376,63.956556 967.990262,103.946169 L968,105.160305 L968,894.839695 L967.990065,896.066071 C967.341719,936.054114 935.043444,968.348376 895.053831,968.990262 L893.839695,969 L104.160305,969 L102.933929,968.990065 C62.9458856,968.341719 30.6516243,936.043444 30.0097379,896.053831 L30,894.839695 L30,105.160305 L30.0099354,103.933929 C30.6582805,63.9458856 62.956556,31.6516243 102.946169,31.0097379 L104.160305,31 L893.839695,31 Z M746.261438,399 C720.891068,399 697.908497,406.178571 686.267974,413.65625 L695.520697,446.558036 C703.281046,441.772321 719.995643,434.892857 735.814815,434.892857 C755.215686,434.892857 764.46841,443.566964 764.46841,455.232143 C764.46841,471.683036 745.366013,477.665179 730.143791,477.665179 L712.235294,477.665179 L712.235294,510.267857 L730.740741,510.267857 C750.738562,510.267857 769.840959,518.941964 769.840959,538.383929 C769.840959,552.741071 757.901961,564.107143 734.32244,564.107143 C715.816993,564.107143 697.311547,556.629464 689.252723,552.142857 L680,586.54017

最低0.47元/天解锁文章

迷人滴巷子哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现A13界面个人练习（20）

JS实现A13界面个人练习第二十天Html源代码<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title>CodePen - iPhone SE - A13 Animation</title> <link rel="stylesheet" href="./style.css"></head><body&
复制链接

扫一扫