技术标签: css 前端 html javascript
一颗爱心送给你 - 个人 - Microsoft Edge 2022-04-27 16-38-59
html代码
<div id="main"></div>
css代码
#main{ width:500px;
height:500px;
margin:150px auto; /*这里是将其居中,因为后期要用到position,所以后期我会将其去掉*/
border:1px solid #F00; /*注意:这是块的边框,这里加边框是为了便于设计时的查看,后期为了美观,我会将其去掉*/
}
效果图:
第一个小块:
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度后的效果图:
这是最后的效果图:
如下:
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);
}
(小编也在努力学习中,请广大读者不要催更啦^-^)
文章浏览阅读376次。题目描述给定一个 没有重复 数字的序列,返回其所有可能的全排列。示例:输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1]]解题思路这个题目很容易理解,就是将数组中的所有数进行全排列,最后输出全排列的结果。这个应该还是回溯+剪枝的问题,以1为开头的组合为例:红色部分就是我们需要剪掉的枝。限制条件就是,结果数组不能重复,元素不能重复。这里我们初始化一个数组arr,当每一次将一个_前端 全排列
文章浏览阅读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
文章浏览阅读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.3k次,点赞4次,收藏19次。【计算机组成与体系结构Ⅰ】实验2 数据通路组成实验_数据通路实验
文章浏览阅读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 没有上司的舞会
文章浏览阅读224次。新手站长基本上都会遇到一个难题——为什么我的网站权重不高?为什么我的网站收录太低,甚至没有?大多数站长处理此类问题的解决办法是从网站内链外链、网站标题、关键词、描述语以及网站内容的原创度等等方面去优化,然而他们可能会忽略另一个看似不起眼但也很重要的问题——服务器。服务器是支撑网站运行的基础,所以服务器在网站的优化上也起着至关重要的作用,因此这就要求站长在选择服务器上谨慎又谨慎了。关于服务器的选择,蒙鸟云为大家提供以下一些参考方面。服务器稳定性选择服务器的稳定性决定了网站的访问.._云优化seo登录不上
文章浏览阅读3.7k次。问题:电脑与平板数据线连接好后,平板已经出现“USB调试设置”,已选择“传输文件”此选项。电脑却一直无法出现此图标。 无法进行把电脑文件复制到平板上的操作。经过多次尝试与信息搜索,最终找到解决方案! 解决方案:第一步,打开平板的“设置”--->开发者选项--->启用USB调试模式进度:此时上图的图标已经能够出现,但是无法显示其内存,即你在电..._mtp驱动
文章浏览阅读698次,点赞2次,收藏2次。Spring 框架两大核心机制(IoC、AOP)IoC(控制反转)/ DI(依赖注入)AOP(面向切面编程)Spring 是一个企业级开发框架,是软件设计层面的框架,优势在于可以将应用程序进行分层,开发者可以自主选择组件。MVC:Struts2、Spring MVCORMapping:Hibernate、MyBatis、Spring Data如何使用 IoC创建 Maven 工..._spring 两大机制
文章浏览阅读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根据像素点坐标画的线远端炸开怎么处理
文章浏览阅读168次。Spring学习笔记:控制工厂创建对象次数和生命周期1.如何控制简单对象创建次数2.如何控制复杂对象创建次数3.为什么我们要控制对象创建次数4.什么是对象的生命周期1.如何控制简单对象创建次数<bean id="account" scope="singleton|prototype" class="xxxx.Account"/>sigleton:只会创建⼀次简单对象 默认值prototype:每⼀次都会创建新的对象2.如何控制复杂对象创建次数FactoryBean{ isSing_spring创建对象的生命周期四种分别是
文章浏览阅读2.8k次。CPU L2缓存初探探索目的为了设计高性能的内存数据库,往往要考虑CPU缓存的命中率,查阅资料发现,Intel架构的处理器有3级缓存的设置,其中L1,L2较小,L3较大但被三个核心所公用。在我使用的i7 4712mq中,使用dmidecode查看缓存大小:inszva@inszva-Aspire-E5-572G:~$ sudo dmidecode[sudo] password for inszva
文章浏览阅读109次。如何共享WIFI上网?其实这种功能的软件网上有很多,比如联想的闪联任意通,英特尔的MYWIFI等等,但是通常这类软件都对硬件有诸多限制,使用起来并不是十分方便,win7作为微软一个成功系统典范,现在使用已经十分普遍,主要是功能十分强大,有很多意想不到的内在东西在WIN7系统里,比如,方便设置WIN7的无线网卡路由设置,实现共享WIFI上网,下面就分享一下设置过程:1. 以管理员身份运行命令提示符因..._github安卓无线连接电脑