html--剑雨

最新推荐文章于 2024-05-21 18:11:13 发布
最新推荐文章于 2024-05-21 18:11:13 发布
阅读量518 收藏 9
点赞数 9
分类专栏： html 文章标签： html 前端 javascript 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/138372084
版权 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3剑雨-jq22.com</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style>
.sword:before, .sword:after, .grip:before, .grip:after {
  border: 2px solid;
}

.sword {
  height: 20vh;
  width: 3vh;
  background-image: -webkit-linear-gradient(left, transparent, transparent 16.66667%, black 16.76667%, black calc(16.66667% + 2px + .1%), #4a2713 calc(16.66667% + 2px + .1%), #6b3b1f calc(83.33333% - 2px), black calc(83.33333% - 2px + .1%), black 83.33333%, transparent 83.43333%);
  background-image: linear-gradient(to right, transparent, transparent 16.66667%, black 16.76667%, black calc(16.66667% + 2px + .1%), #4a2713 calc(16.66667% + 2px + .1%), #6b3b1f calc(83.33333% - 2px), black calc(83.33333% - 2px + .1%), black 83.33333%, transparent 83.43333%);
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation: sword 10s ease-in both infinite;
          animation: sword 10s ease-in both infinite;
}
.sword:before, .sword:after {
  content: '';
  position: absolute;
  height: 70%;
  width: 50%;
  bottom: -2vh;
  background-color: gray;
}
.sword:before {
  left: 0;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transform: skewY(45deg);
          transform: skewY(45deg);
  background-color: #494545;
  border-right: none;
}
.sword:after {
  right: 0;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: skewY(-45deg);
          transform: skewY(-45deg);
  background-color: #878383;
  border-left: none;
}
.sword:nth-child(1) {
  --rotate: 8.39386deg;
  --z: -83.75725px;
  -webkit-animation-delay: 0.47328s;
          animation-delay: 0.47328s;
}
.sword:nth-child(2) {
  --rotate: -6.8085deg;
  --z: -72.38789px;
  -webkit-animation-delay: 0.11367s;
          animation-delay: 0.11367s;
}
.sword:nth-child(3) {
  --rotate: -1.63563deg;
  --z: -7.72513px;
  -webkit-animation-delay: 1.14191s;
          animation-delay: 1.14191s;
}
.sword:nth-child(4) {
  --rotate: 5.61503deg;
  --z: -61.22559px;
  -webkit-animation-delay: 0.47981s;
          animation-delay: 0.47981s;
}
.sword:nth-child(5) {
  --rotate: 2.60706deg;
  --z: -62.69257px;
  -webkit-animation-delay: 0.75611s;
          animation-delay: 0.75611s;
}
.sword:nth-child(6) {
  --rotate: 7.80629deg;
  --z: -2.27727px;
  -webkit-animation-delay: 1.06902s;
          animation-delay: 1.06902s;
}
.sword:nth-child(7) {
  --rotate: 3.06714deg;
  --z: -20.85914px;
  -webkit-animation-delay: 1.42217s;
          animation-delay: 1.42217s;
}
.sword:nth-child(8) {
  --rotate: -8.73295deg;
  --z: -96.66717px;
  -webkit-animation-delay: 1.25464s;
          animation-delay: 1.25464s;
}
.sword:nth-child(9) {
  --rotate: 6.79895deg;
  --z: -6.32906px;
  -webkit-animation-delay: 0.07573s;
          animation-delay: 0.07573s;
}
.sword:nth-child(10) {
  --rotate: -6.98765deg;
  --z: -70.44303px;
  -webkit-animation-delay: 1.80721s;
          animation-delay: 1.80721s;
}
.sword:nth-child(11) {
  --rotate: -3.16949deg;
  --z: -30.74019px;
  -webkit-animation-delay: 0.67041s;
          animation-delay: 0.67041s;
}
.sword:nth-child(12) {
  --rotate: 0.21328deg;
  --z: -20.84269px;
  -webkit-animation-delay: 4.17622s;
          animation-delay: 4.17622s;
}
.sword:nth-child(13) {
  --rotate: 1.63682deg;
  --z: -27.30875px;
  -webkit-animation-delay: 1.59776s;
          animation-delay: 1.59776s;
}
.sword:nth-child(14) {
  --rotate: 4.93067deg;
  --z: -43.03541px;
  -webkit-animation-delay: 6.43133s;
          animation-delay: 6.43133s;
}
.sword:nth-child(15) {
  --rotate: 1.90074deg;
  --z: -87.00767px;
  -webkit-animation-delay: 1.61407s;
          animation-delay: 1.61407s;
}
.sword:nth-child(16) {
  --rotate: -0.77103deg;
  --z: -15.8819px;
  -webkit-animation-delay: 7.13583s;
          animation-delay: 7.13583s;
}
.sword:nth-child(17) {
  --rotate: -7.57022deg;
  --z: -31.15633px;
  -webkit-animation-delay: 2.31672s;
          animation-delay: 2.31672s;
}
.sword:nth-child(18) {
  --rotate: 2.0886deg;
  --z: -11.75369px;
  -webkit-animation-delay: 0.12172s;
          animation-delay: 0.12172s;
}
.sword:nth-child(19) {
  --rotate: -5.86961deg;
  --z: -79.20324px;
  -webkit-animation-delay: 7.94673s;
          animation-delay: 7.94673s;
}
.sword:nth-child(20) {
  --rotate: -8.13614deg;
  --z: -56.73587px;
  -webkit-animation-delay: 9.84234s;
          animation-delay: 9.84234s;
}
.sword:nth-child(21) {
  --rotate: 2.27997deg;
  --z: -51.48173px;
  -webkit-animation-delay: 8.9305s;
          animation-delay: 8.9305s;
}
.sword:nth-child(22) {
  --rotate: 7.29396deg;
  --z: -42.69384px;
  -webkit-animation-delay: 9.83579s;
          animation-delay: 9.83579s;
}
.sword:nth-child(23) {
  --rotate: -6.6045deg;
  --z: -38.5548px;
  -webkit-animation-delay: 3.67031s;
          animation-delay: 3.67031s;
}
.sword:nth-child(24) {
  --rotate: -5.44095deg;
  --z: -38.05734px;
  -webkit-animation-delay: 3.44631s;
          animation-delay: 3.44631s;
}
.sword:nth-child(25) {
  --rotate: 4.29331deg;
  --z: -38.05218px;
  -webkit-animation-delay: 11.86746s;
          animation-delay: 11.86746s;
}
.sword:nth-child(26) {
  --rotate: -1.67063deg;
  --z: -7.4513px;
  -webkit-animation-delay: 7.15327s;
          animation-delay: 7.15327s;
}
.sword:nth-child(27) {
  --rotate: 0.71187deg;
  --z: -11.12918px;
  -webkit-animation-delay: 5.06463s;
          animation-delay: 5.06463s;
}
.sword:nth-child(28) {
  --rotate: 3.82341deg;
  --z: -33.35393px;
  -webkit-animation-delay: 3.10124s;
          animation-delay: 3.10124s;
}
.sword:nth-child(29) {
  --rotate: 1.81681deg;
  --z: -31.20551px;
  -webkit-animation-delay: 3.57987s;
          animation-delay: 3.57987s;
}
.sword:nth-child(30) {
  --rotate: 3.91762deg;
  --z: -27.99528px;
  -webkit-animation-delay: 2.78144s;
          animation-delay: 2.78144s;
}
.sword:nth-child(31) {
  --rotate: -0.70354deg;
  --z: -12.75031px;
  -webkit-animation-delay: 1.06997s;
          animation-delay: 1.06997s;
}
.sword:nth-child(32) {
  --rotate: 4.25287deg;
  --z: -35.87313px;
  -webkit-animation-delay: 10.1253s;
          animation-delay: 10.1253s;
}
.sword:nth-child(33) {
  --rotate: 6.37927deg;
  --z: -24.85096px;
  -webkit-animation-delay: 1.66117s;
          animation-delay: 1.66117s;
}
.sword:nth-child(34) {
  --rotate: 9.83106deg;
  --z: -71.21465px;
  -webkit-animation-delay: 4.4098s;
          animation-delay: 4.4098s;
}
.sword:nth-child(35) {
  --rotate: 8.39125deg;
  --z: -25.06617px;
  -webkit-animation-delay: 5.99589s;
          animation-delay: 5.99589s;
}
.sword:nth-child(36) {
  --rotate: -0.93748deg;
  --z: -34.90687px;
  -webkit-animation-delay: 15.30374s;
          animation-delay: 15.30374s;
}
.sword:nth-child(37) {
  --rotate: 5.87064deg;
  --z: -94.47802px;
  -webkit-animation-delay: 8.14205s;
          animation-delay: 8.14205s;
}
.sword:nth-child(38) {
  --rotate: 2.58501deg;
  --z: -88.41837px;
  -webkit-animation-delay: 15.93085s;
          animation-delay: 15.93085s;
}
.sword:nth-child(39) {
  --rotate: -6.61699deg;
  --z: -41.5508px;
  -webkit-animation-delay: 17.48765s;
          animation-delay: 17.48765s;
}
.sword:nth-child(40) {
  --rotate: -4.59197deg;
  --z: -48.89949px;
  -webkit-animation-delay: 8.19838s;
          animation-delay: 8.19838s;
}
.sword:nth-child(41) {
  --rotate: -1.83705deg;
  --z: -75.18958px;
  -webkit-animation-delay: 11.52209s;
          animation-delay: 11.52209s;
}
.sword:nth-child(42) {
  --rotate: -2.25668deg;
  --z: -48.11329px;
  -webkit-animation-delay: 13.68936s;
          animation-delay: 13.68936s;
}
.sword:nth-child(43) {
  --rotate: 4.10462deg;
  --z: -66.9364px;
  -webkit-animation-delay: 0.73041s;
          animation-delay: 0.73041s;
}
.sword:nth-child(44) {
  --rotate: -7.89393deg;
  --z: -9.63365px;
  -webkit-animation-delay: 15.91373s;
          animation-delay: 15.91373s;
}
.sword:nth-child(45) {
  --rotate: 3.4608deg;
  --z: -58.19061px;
  -webkit-animation-delay: 3.10076s;
          animation-delay: 3.10076s;
}
.sword:nth-child(46) {
  --rotate: -8.23501deg;
  --z: -80.69943px;
  -webkit-animation-delay: 11.82384s;
          animation-delay: 11.82384s;
}
.sword:nth-child(47) {
  --rotate: -9.77678deg;
  --z: -76.91881px;
  -webkit-animation-delay: 4.30803s;
          animation-delay: 4.30803s;
}
.sword:nth-child(48) {
  --rotate: -7.69954deg;
  --z: -17.63265px;
  -webkit-animation-delay: 13.04739s;
          animation-delay: 13.04739s;
}
.sword:nth-child(49) {
  --rotate: 3.79306deg;
  --z: -34.19814px;
  -webkit-animation-delay: 10.67998s;
          animation-delay: 10.67998s;
}
.sword:nth-child(50) {
  --rotate: -4.12563deg;
  --z: -75.97199px;
  -webkit-animation-delay: 8.76057s;
          animation-delay: 8.76057s;
}
@-webkit-keyframes sword {
  from {
    -webkit-transform: translateY(-200vh) translateZ(var(--z)) rotate(var(--rotate));
            transform: translateY(-200vh) translateZ(var(--z)) rotate(var(--rotate));
  }
  10%, to {
    -webkit-transform: translateZ(var(--z)) rotate(var(--rotate));
            transform: translateZ(var(--z)) rotate(var(--rotate));
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sword {
  from {
    -webkit-transform: translateY(-200vh) translateZ(var(--z)) rotate(var(--rotate));
            transform: translateY(-200vh) translateZ(var(--z)) rotate(var(--rotate));
  }
  10%, to {
    -webkit-transform: translateZ(var(--z)) rotate(var(--rotate));
            transform: translateZ(var(--z)) rotate(var(--rotate));
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.grip {
  position: absolute;
  width: 200%;
  height: 40%;
  left: -50%;
  z-index: 1;
}
.grip:before, .grip:after {
  content: '';
  position: absolute;
}
.grip:before {
  bottom: 0;
  height: 25%;
  width: 100%;
  background-color: #594E4C;
}
.grip:after {
  width: 3vh;
  height: 3vh;
  border-radius: 50%;
  background-color: #594e4c;
  left: calc(50% - 1.5vh);
  top: -1vh;
}

.clouds {
  width: 20vmax;
  height: 10vmax;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-filter: blur(5vmax);
          filter: blur(5vmax);
  will-change: transform;
}
.clouds:before, .clouds:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: -5vh;
  left: 0;
  background-color: currentColor;
  border-radius: 50%;
}
.clouds:before {
  color: rgba(255, 255, 255, 0.3);
  width: 200%;
  box-shadow: 51.46069vw 2.20661vh currentColor, 4.23275vw 5.34393vh currentColor, 61.96204vw 5.60124vh currentColor, 76.41196vw 13.43362vh currentColor, 27.17839vw 15.88727vh currentColor, 68.88903vw 14.37287vh currentColor, 68.27601vw 18.81424vh currentColor, 18.73497vw 8.14598vh currentColor, 45.23568vw 11.77528vh currentColor, 23.49576vw 5.78673vh currentColor;
}
.clouds:after {
  color: #0d141c;
  -webkit-filter: blur(3vmax);
          filter: blur(3vmax);
  z-index: 1;
  opacity: 0.6;
  box-shadow: 7.03855vw 14.44877vh currentColor, 50.38532vw 19.75786vh currentColor, 12.37191vw 19.24552vh currentColor, 37.30133vw 10.33487vh currentColor, 74.22589vw 11.91745vh currentColor, 47.69337vw 11.6707vh currentColor, 6.7451vw 11.5466vh currentColor, 30.73069vw 17.49921vh currentColor, 78.58482vw 10.9125vh currentColor, 66.90668vw 4.3153vh currentColor, 2.62032vw 9.25307vh currentColor, 78.92189vw 4.64943vh currentColor, 9.54749vw 11.94573vh currentColor, 75.3324vw 16.62846vh currentColor, 51.04472vw 0.16786vh currentColor, 8.70098vw 4.83993vh currentColor, 9.92011vw 0.02991vh currentColor, 57.21962vw 8.88835vh currentColor, 2.15261vw 4.72386vh currentColor, 37.72257vw 9.80013vh currentColor, 28.77529vw 1.4043vh currentColor, 81.76587vw 7.03797vh currentColor, 82.91088vw 14.00317vh currentColor, 9.52429vw 11.06823vh currentColor, 24.95449vw 2.41647vh currentColor, 68.82464vw 12.08197vh currentColor, 42.26014vw 16.36082vh currentColor, 34.09558vw 16.2289vh currentColor, 68.26821vw 3.6377vh currentColor, 36.30567vw 10.35826vh currentColor, 20.6792vw 18.01393vh currentColor, 93.77443vw 19.86978vh currentColor, 70.62608vw 0.162vh currentColor, 32.36522vw 6.98021vh currentColor, 65.42297vw 14.74296vh currentColor, 44.82203vw 10.41328vh currentColor, 74.57411vw 15.50219vh currentColor, 79.91373vw 0.19257vh currentColor, 96.0318vw 12.04559vh currentColor, 92.77587vw 19.17998vh currentColor, 16.72115vw 10.99563vh currentColor, 16.27435vw 12.71046vh currentColor, 12.39346vw 0.4635vh currentColor, 94.99648vw 9.36274vh currentColor, 25.01611vw 3.65712vh currentColor, 2.12716vw 15.84533vh currentColor, 78.49207vw 5.95591vh currentColor, 43.67731vw 17.70427vh currentColor, 69.07299vw 13.79832vh currentColor, 81.47311vw 17.11507vh currentColor;
}

@-webkit-keyframes lightning {
  from, to {
    opacity: 0;
  }
  90.45835% {
    opacity: 1;
  }
  93.45835%, 89.45835% {
    opacity: 0;
  }
  76.20299% {
    opacity: 1;
  }
  79.20299%, 75.20299% {
    opacity: 0;
  }
  6.75355% {
    opacity: 1;
  }
  9.75355%, 5.75355% {
    opacity: 0;
  }
  91.12547% {
    opacity: 1;
  }
  94.12547%, 90.12547% {
    opacity: 0;
  }
  20.58968% {
    opacity: 1;
  }
  23.58968%, 19.58968% {
    opacity: 0;
  }
}

@keyframes lightning {
  from, to {
    opacity: 0;
  }
  90.45835% {
    opacity: 1;
  }
  93.45835%, 89.45835% {
    opacity: 0;
  }
  76.20299% {
    opacity: 1;
  }
  79.20299%, 75.20299% {
    opacity: 0;
  }
  6.75355% {
    opacity: 1;
  }
  9.75355%, 5.75355% {
    opacity: 0;
  }
  91.12547% {
    opacity: 1;
  }
  94.12547%, 90.12547% {
    opacity: 0;
  }
  20.58968% {
    opacity: 1;
  }
  23.58968%, 19.58968% {
    opacity: 0;
  }
}
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-perspective: 100px;
          perspective: 100px;
  background-color: #0C1617;
}
body:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-animation: lightning 10s infinite;
          animation: lightning 10s infinite;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}
</style>
</head>
<body>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>
<div class="sword">
  <div class="grip"></div>
</div>

<div class="clouds">
  
</div>

<script>
</script>

</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

fo安方
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html-loader2
04-30
html-loader2 html-loader 是一个基于流处理 html 文件的工具。都到了8102年，我居然还是写出了这个。。。 html-loader 设计哲学 如 browserify 等打包工具都是将 js 作为一等公民很少有打包工具将 html 作为一等...
html-表格-漂亮.pdf
11-18
html-表格-漂亮.pdf
点化讲究机缘--剑雨
weixin_34080903的博客
01-17 114
为何他死前说before he died,he said禅机已到“the window of opportunity has arrived”佛祖点化世人讲究机缘Buddha can only help those seeking enlightenment禅机一过 缘即灭矣When the window passes,the chance is lost而禅机未到And if the wi...
HTML-作业（基础）
m0_60979337的博客
10-16 447
【代码】HTML-作业（基础）
第16节-图片 | 剑雨Axure RP9系列【基础】
剑雨
08-15 1016
图片 前面的话：图片这个元件可能是原型设计中使用频率最高的一个了。在AXURE中支持的图片格式有 JPG，PNG，GIF，BMP和SVG。 图片的添加 图片的添加有多种方法，如下： 从元件库中拖入 这种最简单的一种方法了。 图片的导入：从左侧拖入图片后，双击该图片元件可从电脑载入你要放入的图片，而且些时载入的图片会自动适应到这个尺寸， Fit to Image： 菜单中插入 通过菜单顶部的插入按...
Web21-45集
m0_73381821的博客
10-27 315
表格、段落、表单
HTML5--常用新元素
maomaolaoshi的博客
09-27 829
如果我问你，HTML5的新增加的元素有哪些?不少人可能脱口而出section、article、header……等等。但是如果要问你HTML5增加新的元素，同时废弃了很多元素的原因是什么，我觉得大多数人可能都没思考过这个问题。标签语义化标签语义化就是上个问题的答案。HTML5一个最主要的变化是基本信念的变化：将元素的语义与元素对其内容呈现结果的影响分开。 HTML元素负责文档内容的结构和含义，CS
电影《剑雨》
weixin_34301132的博客
07-02 2788
“我愿化身石桥······”，借用这个标题，与主题关系甚小，只更多是为了表达我对《剑雨》这部电影由衷的喜爱。 电影中这句台词来自李宗翰饰演的陆竹，少林寺四十年来佛法武功第一的带发修行僧人，完整是这样的：我愿化身石桥，受五百年风吹，五百年日晒，五百年雨打。还有更完整的版本，据剧中见痴老僧讲述，此语来自典故：佛陀弟子阿难出家前曾遇一少女，爱慕难舍。佛祖就问他，你有多爱那少女？阿难答曰，我愿化身石桥，...
使用HTML制作一个简单的个人主页
热门推荐
indulgexiaomei的博客
10-09 20万+
此网页我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版的练习，文字
一剑走江湖---武汉
diaoliurong2173的博客
04-16 110
一日 提起武汉，就会想到池莉。就会想到她的《生活秀》，想起那个卖鸭颈的来双扬，想起她那句“崩溃”的口头禅。 火车在去武汉的路上奔驰，很多很多的人夹杂着汗腥味飘在空气中，很闷，九个小时，超越我的心理极限。聊天，打牌，睡觉占据了我们大部分的时间。比较不幸的是被胖子和rover他们拍到了我的睡姿，晕啊，什么时候都不忘欺负我。崩溃！ 到达武昌车站的时间是...
CSS3剑雨
chuju7926的博客
11-08 72
(https://static.oschina.net/uploads/img/201711/08210149_jfUG.png "在这里输入图片标题")") HTML结构 <div class="sword"> <div class="grip"></div...
HTML特效-流星雨
10-14
html流星雨特效，仿若流星眨眼即逝
HTML+Element-ui邮件管理前端界面
07-12
不用脚手架，无需创建vue工程 若element-ui显示故障： 1.查看是否引用 <!--引入 element-ui 的样式，--> ...2.html代码是否被div包含 3.是否 var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
红包雨-HTML5网页源代码
03-22
这是一个抢红包雨游戏-使用HTML网页制作而成，用Canvas组件绘制的， 可用（手机）浏览器打开运行， 配套的教程请看相关文章https://blog.csdn.net/zs1028/article/details/127864697
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 143
HTML,CSS,JavaScript,DOM的理解
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 330
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
HTML常见标签-换行标签-水平线标签
weixin_44201223的博客
05-14 186
换行标签 水平线标签
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 745
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
html-to-pdfmake
07-27
HTML-to-PDFMake 是一个用于将 HTML 转换为 PDFMake 格式的库。PDFMake 是一个用于在浏览器中生成 PDF 的 JavaScript 库。通过使用 HTML-to-PDFMake，您可以将现有的 HTML 内容转换为 PDFMake 格式，然后使用 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值