一、心跳
图片如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心动</title>
<style>
@keyframes jump{
from{
transform: scale(0.5);
opacity: 0.5;
}to{
transform: scale(2);
opacity: 1;
}
}
@keyframes circles {
from{
transform: rotate(0deg);
z-index: 1;
}to{
transform: rotate(360deg);
z-index: -1;
}
}
.f{
width: 170px;
height: 160px;
border:none;
position: relative;
left: 200px;
top: 200px;
background-color: white;
/* animation: jump 1s ease alternate infinite; */
}
.m{
animation: jump 1s ease alternate infinite;
}
.f>div{
position: absolute;
}
.z1,.z2{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
.z2{
left: 70px;
}
.z3{
width: 100px;
height: 100px;
background-color: red;
left: 35px;
top: 35px;
transform: rotate(45deg);
}
.z4{
top:50px;
left:45px;
font-size: large;
color: aliceblue;
z-index: -1;
}
.z4c{
animation: circles 1s linear 1s infinite;
}
button{
width: 80px;
height: 40px;
background-color:green;
border: none;
color: white;
font: large;
border-radius: 10px;
cursor: pointer;
margin-left: 20px;
}
button :active{
transform: translate(5px,5px);
}
</style>
</head>
<body>
<button onclick="start1()">开始</button>
<button onclick="stop1()">结束</button>
<div id="divF" class="f">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
<div id="z4" class="z4">I   O   U </div>
</div>
</body>
<script>
let divF=document.getElementById('divF')
let z4=document.getElementById('z4')
function start1(){
divF.className='f m'
z4.className='z4 z4c'
}
function stop1(){
divF.className='f'
z4.className='z4'
}
</script>
</html>
示例代码:
1.
@keyframes jump{
from{
transform: scale(0.5);
opacity: 0.5;
}to{
transform: scale(2);
opacity: 1;
}
}
这段代码是一个CSS动画的关键帧定义。它定义了一个名为"jump"的关键帧,其中包含了两个关键帧状态。
在动画开始时(from),元素将被缩放到原来的一半大小(scale(0.5))并且不透明度设置为0.5。而在动画结束时(to),元素将被放大到原来的两倍大小(scale(2))并且透明度设置为1。
使用这个关键帧定义,你可以将动画效果应用于需要的元素上,使其在播放动画时按照指定的变化缩放和透明度。
2.
<body>
<button onclick="start1()">开始</button>
<button onclick="stop1()">结束</button>
<div id="divF" class="f">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
<div id="z4" class="z4">I   O   U </div>
</div>
</body>
这段代码是一个简单的HTML页面,包含了两个按钮和一个div容器。点击"开始"按钮会执行start1()函数,点击"结束"按钮会执行stop1()函数。div容器中包含了四个子元素,分别有class为"f"、"z1"、"z2"和"z3"的div,以及id为"z4"且内容为"I O U"的div。
3.
<script>
let divF=document.getElementById('divF')
let z4=document.getElementById('z4')
function start1(){
divF.className='f m'
z4.className='z4 z4c'
}
function stop1(){
divF.className='f'
z4.className='z4'
}
</script>
这段代码是一个简单的JavaScript脚本,主要功能是控制网页中的两个DOM元素的类名,从而改变它们的样式。
首先,代码中通过getElementById
方法获取了名为divF
和z4
的两个DOM元素。
接下来,start1
函数会在调用时给divF
添加一个名为f m
的类名,同时给z4
添加一个名为z4c
的类名。这样,这两个DOM元素就会应用相应的CSS样式。
最后,stop1
函数会将divF
的类名设置为f
,将z4
的类名设置为z4
,从而恢复它们的原始样式。
需要注意的是,这段代码仅包含简单的DOM操作,如果想要完整运行,还需要在HTML文档中正确地定义divF
和z4
元素,并在适当的时机调用start1
和stop1
函数。
二、走马灯
图片如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>走马灯</title>
<style>
.f{
width: 800px;
height: 110px;
border-top: 1px solid red;
}
.f>div{
width:60px ;
height:40px ;
background-color: white;
border-radius: 50%;
float: left;
margin-left : 20px;
}
/* button{
width: 200px;
height: 100px;
border-color: red;
} */
@keyframes changeColor {
0%{
background-color: red;
}20%{
background-color: rgb(217, 255, 0);
}40%{
background-color: rgb(0, 255, 106);
}60%{
background-color: rgb(0, 68, 255);
}80%{
background-color: rgb(195, 0, 255);
}100%{
background-color: rgb(255, 0, 157);
}
}
.f>div:nth-child(1){
animation: changeColor 3s ease 0s infinite ;
}
.f>div:nth-child(2){
animation: changeColor 3s ease 1s infinite ;
}
.f>div:nth-child(3){
animation: changeColor 3s ease 2s infinite ;
}
.f>div:nth-child(4){
animation: changeColor 3s ease 3s infinite ;
}
.f>div:nth-child(5){
animation: changeColor 3s ease 4s infinite ;
}
.f>div:nth-child(6){
animation: changeColor 3s ease 5s infinite ;
}
.f>div:nth-child(7){
animation: changeColor 3s ease 6s infinite ;
}
.f>div:nth-child(8){
animation: changeColor 3s ease 7s infinite ;
}
.f>div:nth-child(9){
animation: changeColor 3s ease 8s infinite ;
}
.f>div:nth-child(10){
animation: changeColor 3s ease 9s infinite ;
}
</style>
</head>
<body id="body">
<div class="f">
<!-- <button>坤坤</button> -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script>
let body=document.getElementById('body')
let s=''
for (let i = 0; i < 10; i++) {
s+=`<div class="f">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>`
}
body.innerHTML=s
</script>
</html>
示例代码:
1.
.f>div:nth-child(1){
animation: changeColor 3s ease 0s infinite ;
}
.f>div:nth-child(2){
animation: changeColor 3s ease 1s infinite ;
}
.f>div:nth-child(3){
animation: changeColor 3s ease 2s infinite ;
}
.f>div:nth-child(4){
animation: changeColor 3s ease 3s infinite ;
}
.f>div:nth-child(5){
animation: changeColor 3s ease 4s infinite ;
}
.f>div:nth-child(6){
animation: changeColor 3s ease 5s infinite ;
}
.f>div:nth-child(7){
animation: changeColor 3s ease 6s infinite ;
}
.f>div:nth-child(8){
animation: changeColor 3s ease 7s infinite ;
}
.f>div:nth-child(9){
animation: changeColor 3s ease 8s infinite ;
}
.f>div:nth-child(10){
animation: changeColor 3s ease 9s infinite ;
}
这段代码是使用CSS中的动画(animation)属性来实现颜色变化效果。通过选择器(selector).f>div:nth-child(x),可以选中.f元素下第x个子元素的div元素。
每个子元素的动画效果都相同,都使用名为changeColor的动画,并且都是无限循环(infinite)。不同之处在于每个子元素的动画延时(delay)不同,分别为0s、1s、2s、3s、4s、5s、6s、7s、8s、9s。
具体的动画效果需要在其他地方定义changeColor动画,包括动画的名称、持续时间(3s)、缓动函数(ease)等。
总体上,这段代码的作用是使.f元素下的10个子元素的背景颜色以一定的延时和循环方式进行变化。
2.
let body=document.getElementById('body')
let s=''
for (let i = 0; i < 10; i++) {
s+=`<div class="f">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>`
}
body.innerHTML=s
这段代码是用于在网页中创建一列包含多个 div 元素的容器。每个容器具有相同的类名 "f",并且内部包含了 10 个空的 div 元素。
通过获取 id 为 "body" 的元素,并将生成的 HTML 字符串赋值给其 innerHTML 属性,可以将这些 div 元素添加到网页中。
需要注意的是,在实际使用中,应该确保在文档加载完成后执行该代码,以避免找不到 id 为 "body" 的元素或其他相关问题。
三、圆周运动
图片如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆周运动</title>
<style>
.r1{
width: 500px;
height: 500px;
border: 1px solid red;
border-radius: 50%;
position: relative;
}
.r1>div{
position: absolute;
}
.r2{
width: 300px;
height: 300px;
border: 1px solid green;
border-radius: 50%;
top: 100px;
left: 100px;
}
.b1{
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
top: 200px;
left: 0px;
}
.b2{
width: 100px;
height: 100px;
background-color: rebeccapurple;
border-radius: 50%;
top: 200px;
left: 100px;
}
.r3{
width: 100px;
height: 100px;
border: 1px solid blue ;
border-radius: 50%;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div class="r1">
<div id="b1" class="b1"></div>
<div class="b2"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
<button onclick="start1()">开始</button>
</body>
<script>
let r=200,x0=250,y0=250;
let b1=document.getElementById('b1')
let x=50,y=50
// function start1(){
// let z=document.getElementById('z')
// let x=0,y=0
// setInterval(()=>{
// x++
// y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
// b1.style.top=y-50+'px'
// b1.style.left=x-50+'px'
// },10);
// }
function start1(){
let i=0
setInterval(()=>{
i++
let deg=i*Math.PI/180
x=x0+r*Math.cos(deg)
y=y0+r*Math.sin(deg)
b1.style.left=x-50+'px'
b1.style.top=y-50+'px'
},10);
}
</script>
</html>
示例代码:
1.
let r=200,x0=250,y0=250;
let b1=document.getElementById('b1')
let x=50,y=50
function start1(){
let i=0
setInterval(()=>{
i++
let deg=i*Math.PI/180
x=x0+r*Math.cos(deg)
y=y0+r*Math.sin(deg)
b1.style.left=x-50+'px'
b1.style.top=y-50+'px'
},10);
}
这段代码是使用JavaScript实现的一个动画效果。具体来说,它定义了一些变量和元素,并提供了一个名为start1的函数。
使用了一个i变量作为时间的计数器,每隔10毫秒,i的值递增,然后根据三角函数计算出x和y的值,同样通过修改b1元素的位置实现动画效果。
你可以调用start1函数来启动这个动画效果。