情人节代码

最新推荐文章于 2024-01-12 09:11:38 发布

弯月liang

最新推荐文章于 2024-01-12 09:11:38 发布

阅读量1.3k

点赞数 2

分类专栏：前端文章标签： html 弹幕情人节

本文链接：https://blog.csdn.net/sll9711/article/details/100765451

版权

效果图

代码



<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>爱你一万年</title>
  <!-- 弯月亮 荣誉出品，https://blog.csdn.net/sll9711/article/details/100765451#comments_16513333-->
  <style>
    #wrapper {
      height: 35rem;
      width: 100%;
      position: relative;
      overflow: hidden;
      background: url(http://bpic.588ku.com/element_origin_min_pic/16/06/25/11576df4a2f1f4c.jpg);
      
      color: #ffffff82;
      font-size: 14px;
      text-shadow: 1px 1px #000;
      animation:change 1s infinite;
    }
    .right {
      /*left: 100%;*/
      position: absolute;
      visibility: hidden;
      white-space: nowrap;
      /*left: 700px;*/
      transform: translateX(700px);
    }
    .left {
      position: absolute;
      white-space: nowrap;
      user-select: none;
      transition: transform 7s linear; /* 时间相同 越长的弹幕滑动距离越长 所以越快~ */
    }
    input {
      position: absolute;
      bottom: 10px;
      left: 20rem;
      width: 300px;
      height: 26px;
    }

    button {
      position: absolute;
      bottom: 8px;
      left: 40rem;
      width: 100px;
      height: 38px;
      border-radius: 10px;
      font-size: 16px;
      background-color: #FFB6C1;
    }
    span {
    	 l

最低0.47元/天解锁文章

弯月liang

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
5
评论
情人节代码

效果图代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>爱你一万年</title>  <style> #wrapper...
复制链接

扫一扫