用html(Dreamweaver)做一个爱心(还会动的哦^_^)_dw爱心代码怎么写-程序员宅基地

技术标签: css  前端  html  javascript  

       爱情,是每个人都在追求的东西。身为一个IT行业人士,我也会追求爱情,我也会像心爱的人表达感情,只是我所表达的方式与他人有所不同。我的主要战场在计算机上,所以我就想到了用计算机来表达感情,我是初学html,就想到了在网页上做一个爱心,还是会动的爱心:

这是效果视频:

一颗爱心送给你 - 个人 - Microsoft​ Edge 2022-04-27 16-38-59

 第一步:建立相应文件夹,打开DW软件,新建空白html5模板

第二步:开始写爱心的代码(html5+css)

制作图形需要用到四个基础图形(也就是四个块),一个大的正方形(为主块),在大的正方形里面建立三个小正方形(前两个正方形需要将其修改为圆形)。

1、先建一个大的正方形的主块:

html代码

<div id="main"></div>

 css代码

#main{ width:500px; 
       height:500px; 
       margin:150px auto;  /*这里是将其居中,因为后期要用到position,所以后期我会将其去掉*/
       border:1px solid #F00; /*注意:这是块的边框,这里加边框是为了便于设计时的查看,后期为了美观,我会将其去掉*/
      }

效果图:

2、再在主块main中建立三个小块:

第一个小块:

html代码

<div id="main">
    <div id="a"></div>
</div>

css代码

#main{ width:500px; 
       height:500px; 
       position:absolute; /*注意:这段也可以写为 position:relative; margin:150px auto; 但是不同的写法最后爱心的起始位置不同。*/
       border:1px solid #F00;
      }
#a{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%;  /*将a块正方形修改为圆形,并将其放在大正方形内测左上角*/
   }

效果图:

  

第二个小块: 

html代码:

<div id="main">
    <div id="a"></div>
    <div id="b"></div>
</div>

 css代码:

#main{ width:500px;
       height:500px; 
       position:absolute;
       border:1px solid #F00;
      }
#a{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%;
   }
#b{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    right:0; 
    border-radius:50%;   /*将b块正方形改为圆形,并将其放大正方形内测右上角*/
   }

效果图

 第三个小块:

html代码:

<div id="main">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</div>

css代码:(这里我为了美观要把大正方形的边框去掉)

#main{ width:500px;
       height:500px; 
       position:absolute;
      }
#a{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%;
   }
#b{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    right:0; 
    border-radius:50%;
   }
#c{ width:300px;
    height:300px;
    background:#F00; 
    transform:translate(100px,100px) rotate(45deg);  /*将c块正方形旋转45度*/
  }

注意:这是c块正方形旋转45度后的效果图:

这是最后的效果图:

 

第三步:写让爱心动起来的JavaScript代码 

如下:

var fl = document.getElementById('main');
var chroX = document.documentElement.clientWidth;  //yemian整个的高宽
var chroY = document.documentElement.clientHeight;
var offsetLeft = fl.offsetLeft;   //盒子的位置
var offsetTop = fl.offsetTop;
var timer = 0;
console.log(offsetTop)
var x = 20;
var y = 20;    //x,y可以看作是爱心移动的速度。
window.onresize = function(){
    chroX = document.documentElement.clientWidth;  //yemian整个的高宽
    chroY = document.documentElement.clientHeight;
}
function move(){
    offsetLeft += x;
    offsetTop += y;
    fl.style.left = offsetLeft  + 'px';
    fl.style.top = offsetTop  + 'px';
    console.log(chroY)
}
window.onload = function(){
   timer = setInterval(function(){
        move();
        if(offsetTop+100 > chroY || offsetTop < 0){
            y = -y;
        }
        if(offsetLeft+100 > chroX || offsetLeft <0){
            x = -x;
        }
    },10)
}
fl.onmouseenter = function(){
    clearInterval(timer)
}
fl.onmouseleave = function(){
    window.onload();
}

 注意:在写入js时,一定要保证id一致

第四步:在浏览器上执行代码,就可以得到一颗会跳动的爱心^_^(达到视频上的效果)

完整的代码如下:

html段代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一颗爱心送给你</title>
<link href="images/01.jpg" rel="shortcut icon"/>
<link href="css/Untitled-2.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<div id="main">

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

</div>
<script type="text/javascript">
var fl = document.getElementById('main');
var chroX = document.documentElement.clientWidth;
var chroY = document.documentElement.clientHeight;
var offsetLeft = fl.offsetLeft;
var offsetTop = fl.offsetTop;
var timer = 0;
console.log(offsetTop)
var x = 20;
var y = 20;
window.onresize = function(){
    chroX = document.documentElement.clientWidth;
    chroY = document.documentElement.clientHeight;
}
function move(){
    offsetLeft += x;
    offsetTop += y;
    fl.style.left = offsetLeft  + 'px';
    fl.style.top = offsetTop  + 'px';
    console.log(chroY)
}
window.onload = function(){
   timer = setInterval(function(){
        move();
        if(offsetTop+100 > chroY || offsetTop < 0){
            y = -y;
        }
        if(offsetLeft+100 > chroX || offsetLeft <0){
            x = -x;
        }
    },10)
}
fl.onmouseenter = function(){
    clearInterval(timer)
}
fl.onmouseleave = function(){
    window.onload();
}
</script>
</body>
</html>

css段代码:

#main{ width:500px;
       height:500px; 
       position:absolute;
      }
#a{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%;
   }
#b{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    right:0; 
    border-radius:50%;
   }
#c{ width:300px;
    height:300px;
    background:#F00; 
    transform:translate(100px,100px) rotate(45deg);
  }

注意:

1、在使用position时,用absolute和relative是不一样的效果,用absolute时,爱心运动的起始位置是窗口的左上角,用relative时,爱心运动的起始位置是窗口中间。(如果不明白这一点,请了解position元素的用法。

2、将正方形修改成圆形,其实是用border-radius属性把正方形的边框修改成弧形。

(小编也在努力学习中,请广大读者不要催更啦^-^)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_69057208/article/details/124454933

智能推荐

【LeetCode 46】全排列_前端 全排列-程序员宅基地

文章浏览阅读376次。题目描述给定一个 没有重复 数字的序列,返回其所有可能的全排列。示例:输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1]]解题思路这个题目很容易理解,就是将数组中的所有数进行全排列,最后输出全排列的结果。这个应该还是回溯+剪枝的问题,以1为开头的组合为例:红色部分就是我们需要剪掉的枝。限制条件就是,结果数组不能重复,元素不能重复。这里我们初始化一个数组arr,当每一次将一个_前端 全排列

记录CAS6.1X Server 部署加Mysql数据源整合详细_\etc\cas\thekeystore-程序员宅基地

文章浏览阅读1.4k次。1.首先下载CAS6.1X Serve端代码链接如下(注意cas6.1要求jdk11的环境):https://github.com/apereo/cas-overlay-template/tree/6.12.代码下载本地后解压 cas-overlay-template-6.1.zip 如下代码3.cmd进入解压后的目录,执行命令gradlew.bat clean build 进行第一次构建。gradlew.bat clean build 4.构建完成后,执行命令 gradlew.bat _\etc\cas\thekeystore

imx6 LCD 参数配置(lvds为例)_ldb=spl1-程序员宅基地

文章浏览阅读1.4k次。目前imx6的BSP开发中,lvds的参数配置一般在两个地方:uboot的CMDLINE的参数设置,形如:video=mxcfb0:dev=ldb,bpp=32uboot板级代码中对struct display_info_t的配置,形如:static struct display_info_t const displays[] = {{.bus = -1,.addr = ..._ldb=spl1

【计算机组成与体系结构Ⅰ】实验2 数据通路组成实验_数据通路实验-程序员宅基地

文章浏览阅读2.3k次,点赞4次,收藏19次。【计算机组成与体系结构Ⅰ】实验2 数据通路组成实验_数据通路实验

洛谷P1352 没有上司的舞会(树形DP)-程序员宅基地

文章浏览阅读221次。传送门难度[https://www.luogu.com.cn/problem/P1352](https://www.luogu.com.cn/problem/P1352)普及+/提高注:与POJ2342完全相同POJ传送门[http://poj.org/problem?id=2342](http://poj.org/problem?id=2342)..._p1352 没有上司的舞会

蒙鸟云:网站SEO优化上不去?很可能和你的服务器有关!_云优化seo登录不上-程序员宅基地

文章浏览阅读224次。新手站长基本上都会遇到一个难题——为什么我的网站权重不高?为什么我的网站收录太低,甚至没有?大多数站长处理此类问题的解决办法是从网站内链外链、网站标题、关键词、描述语以及网站内容的原创度等等方面去优化,然而他们可能会忽略另一个看似不起眼但也很重要的问题——服务器。服务器是支撑网站运行的基础,所以服务器在网站的优化上也起着至关重要的作用,因此这就要求站长在选择服务器上谨慎又谨慎了。关于服务器的选择,蒙鸟云为大家提供以下一些参考方面。服务器稳定性选择服务器的稳定性决定了网站的访问.._云优化seo登录不上

随便推点

如何解决MTP 驱动更新的问题(手机插上电脑无法显示U盘弹窗)?_mtp驱动-程序员宅基地

文章浏览阅读3.7k次。问题:电脑与平板数据线连接好后,平板已经出现“USB调试设置”,已选择“传输文件”此选项。电脑却一直无法出现此图标。 无法进行把电脑文件复制到平板上的操作。经过多次尝试与信息搜索,最终找到解决方案! 解决方案:第一步,打开平板的“设置”---&gt;开发者选项---&gt;启用USB调试模式进度:此时上图的图标已经能够出现,但是无法显示其内存,即你在电..._mtp驱动

Spring 框架两大核心机制(IoC、AOP)_spring 两大机制-程序员宅基地

文章浏览阅读698次,点赞2次,收藏2次。Spring 框架两大核心机制(IoC、AOP)IoC(控制反转)/ DI(依赖注入)AOP(面向切面编程)Spring 是一个企业级开发框架,是软件设计层面的框架,优势在于可以将应用程序进行分层,开发者可以自主选择组件。MVC:Struts2、Spring MVCORMapping:Hibernate、MyBatis、Spring Data如何使用 IoC创建 Maven 工..._spring 两大机制

基本的图像处理和操作—— Matplotlib_matplotlib根据像素点坐标画的线远端炸开怎么处理-程序员宅基地

文章浏览阅读279次。Matplotlib1.1绘制图像、点、线Matplotlib可以绘制出较好的条形图、饼状图、散点图等.from PIL import Imagefrom pylab import *#读取图像到数组中im = array(Image.open('FatherAndSon.jpg'))#绘制图像imshow(im)#一些点x = [50,50,100,100]y ..._matplotlib根据像素点坐标画的线远端炸开怎么处理

Spring学习笔记(五):控制工厂创建对象次数和生命周期_spring创建对象的生命周期四种分别是-程序员宅基地

文章浏览阅读168次。Spring学习笔记:控制工厂创建对象次数和生命周期1.如何控制简单对象创建次数2.如何控制复杂对象创建次数3.为什么我们要控制对象创建次数4.什么是对象的生命周期1.如何控制简单对象创建次数<bean id="account" scope="singleton|prototype" class="xxxx.Account"/>sigleton:只会创建⼀次简单对象 默认值prototype:每⼀次都会创建新的对象2.如何控制复杂对象创建次数FactoryBean{ isSing_spring创建对象的生命周期四种分别是

CPU L2缓存初探-程序员宅基地

文章浏览阅读2.8k次。CPU L2缓存初探探索目的为了设计高性能的内存数据库,往往要考虑CPU缓存的命中率,查阅资料发现,Intel架构的处理器有3级缓存的设置,其中L1,L2较小,L3较大但被三个核心所公用。在我使用的i7 4712mq中,使用dmidecode查看缓存大小:inszva@inszva-Aspire-E5-572G:~$ sudo dmidecode[sudo] password for inszva

android 连笔记本无线上网,[转载]android手机通过笔记本无线wifi上网-程序员宅基地

文章浏览阅读109次。如何共享WIFI上网?其实这种功能的软件网上有很多,比如联想的闪联任意通,英特尔的MYWIFI等等,但是通常这类软件都对硬件有诸多限制,使用起来并不是十分方便,win7作为微软一个成功系统典范,现在使用已经十分普遍,主要是功能十分强大,有很多意想不到的内在东西在WIN7系统里,比如,方便设置WIN7的无线网卡路由设置,实现共享WIFI上网,下面就分享一下设置过程:1. 以管理员身份运行命令提示符因..._github安卓无线连接电脑

推荐文章

热门文章

相关标签