宿觞博客 宿觞博客

HTML/CSS/JS表白特效 一学就会

in 实用技巧 read (192) 文章转载请注明来源!

效果
CSDN_1565072990457.jpg

小姐姐爱了爱了,看到效果后是不是很想学呐~~
let‘s go~~

代码如下
CSS部分

<style>
          body{
                margin:0%;/*外边距 解决各浏览器兼容性问题*/
                padding:0%;/*内边距 解决各浏览器兼容性问题*/
              }
         .wrap{
                display:flex;/*弹性盒模型 伸缩布局 默认不换行*/
                justify-content: space-between;
                /*主轴方向两端对齐*/
                flex-wrap:wrap;/*强制换行*/
                height: 100vh;
                /*将浏览器高度分为100分 100vh为满屏*/
                background-color:aqua; /*设置背景颜色 可视化*/
                background-image:url("timg.jpeg");
                /*引入背景图片 加上引号 显得更加专业哦*/
                background-size:cover;/*使图片等比例覆盖背景*/
                overflow:hidden;
              }
          span{
                float:left;/*向左浮动*/
                width:9.7%; /*一行10方框,考虑到边框线定为9.7%*/
                height:40px;
                background-color:white;
                border:1px solid red;   
                /*边框线 粗细 实线 颜色*/         
              }
         .fall{
                animation: fall 4s forwards;  
                /*动画 名称 时间 掉下去后不再往返*/       
              }
@keyframes fall{
                0%{transform:translateY(0);}
                100%{transform:translateY(2000px);}
              }
    </style>

HTML部分

<div class="wrap">
              <span class="fall"></span> 
              <span></span>
              .......      /*一共200个span标签 在这里省略*/
               <span></span>
</div>

JS部分

<script>
         var ap=document.getElementsByTagName("span"); 
         /*获取文档内所有的span标签*/
         length=ap.length; /*让大小等于span标点的个数 这里有200个span标签 但不另i<200 而是另i<span标签的个数 方便以后增加或减少span标签个数*/
         for(var i=0;i<length;i++)/*应用for循环 简化代码*/
            {
               ap[i].onclick=function()/*鼠标点击事件*/
                    {
                        this.className="fall";/
                        *给点击的span标签一个名字*/
                        this.style.backgroundColor="red";
                        /*点击后颜色变为红色*/
                    }
            }
</script>

需要你做的(换成你喜欢的人的图片)
CSDN_1565073164463.jpg

将background-image:url(" time.ipeg");中time.ipeg 换成 你喜欢的人的图片名称哦。即为改变图片路径

首先 在文件夹中找到存放刚刚写好的html的文件夹 例如 哄女朋友必备(我的文件夹)
CSDN_1565073210834.jpg

打开后只有一个html文件 此时只要将你喜欢的人的图片拖拽到此文件夹内即可
CSDN_1565073239452.jpg

拖拽后如下
CSDN_1565073266462.jpg

此时将图片的名称复制粘贴替换background-image:url(" time.ipeg");中的 time.ipeg就可以了 是不是很简单 get到了么?
记得CSS部分要写在head标签内哦
记得HTML部分要写在body标签内哦
记得JS部分要写在body标签结束之前哦

jrotty WeChat Pay

微信、支付宝、QQ

jrotty Alipay

三合一打赏

文章二维码

扫描二维码,在手机上阅读!

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://blog.2dph.com/archives/229/ (转载时请注明本文出处及文章链接)

教程代码
发表新评论
博客已萌萌哒运行
© 2019 宿觞
目前距离2020年高考还有
百度统计 站点地图
所有者:段鹏辉
湘ICP备06010528号
前篇 后篇
雷姆
拉姆
0:00