目录
css心动的感觉
transform:scale属性用来设置图像的缩减，后面括号里面添入比1小的值为缩小，比1大为增大，等于1则缩放为原来的形状
opacity属性用来设置图形的透明度，比1小则所以，比1大则放大，等于1则不透明
border属性用来设置边框，none值表示无边框
outline属性用来设置轮廓，none值表示无轮廓
注意：边框是占有一定大小的，轮廓是不占有大小的
<style>
/* 定义一个动画 */
@keyframes jump {
from{
/* 设置图像缩小 scale后的值表示缩小的倍数 */
transform: scale(0.5);
/* 设置透明度，opacity属性后面跟的值表示透明的程度 */
opacity: 0.5;
}to{
/* 设置图像大小 */
transform: scale(2);
opacity: 1;
}
}
.fu{
position: relative;
width: 300px;
height: 300px;
/* 给父元素绑定动画效果 */
animation: jump 1 ease alternate infinite;
}
.fu>div{
position: absolute;
width: 300px;
height: 300px;
background-color: red;
}
.z1{
/* 设置为圆形 */
border-radius: 50%;
top: 200px;
left: 200px;
font-size: 50px;
}
.z2{
top: 300px;
left: 300px;
transform: rotate(45deg);
}
.z3{
border-radius: 50%;
top: 200px;
left: 400px;
}
button{
/* 取消边框线 */
border: none;
/* 取消轮廓 */
outline: none;
font-size: 20px;
margin-right: 20px;
background-color: green;
/* 设置圆角 */
border-radius: 8px;
}
</style>
<body>
<button>开始</button>
<button>停止</button>
<div class="fu">
<div class="z1">IOU</div>
<div class="z2"></div>
<div class="z3"></div>
</div>
</body>
js走马灯
.f>div:nth-child(n)解析：
.f表示f类选择器，.f>div表示该类选择器所在标签，所包含的所有的div标签
.f>div:nth-child(n)表示f类选择器包含的div中按照顺序第n的div标签
@keyframes，表示定义一个css动画
docment.getElementById()用来接收设置的id值
<style>
.f{
width: 800px;
height: 100px;
border-top: 1px solid slategray;
}
.f>div{
width: 60px;
height: 40px;
border-radius: 50%;
background-color: white;
float: left;
margin-left: 20px;
}
.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;
}
@keyframes changeColor {
o%{
background-color: red;
}20%{
background-color: orange;
}40%{
background-color: green;
}60%{
background-color: aqua;
}80%{
background-color: blueviolet;
}100%{
background-color: darksalmon;
}
}
</style>
<body id="body">
<button>生成</button>
<input type="number">行<br>
<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>
<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>
js动画
setInterval属性用来设置一个定时器
在定时器可以来修改图形的运动轨迹，在修改运动轨迹之前需要获取到该图形的id值，
因为图形的轨迹等通常情况下是在css的style标签下修改的，所以这里也是使用的这种方法
z.style.top = y +'px'解析：
z为要修改图形的id值，style表示css下的style标签，top表示向下移动。
y+'px'，这里y是一个数值类型，而px用单引号为字符串类型，所以这里是字符串的拼接
<style>
.f{
position: relative;
width: 500px;
height: 500px;
border:1px solid slategrey;
}
.z{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: chartreuse;
}
</style>
<body>
<div class="f">
<div id="z" class="z"></div>
</div>
</body>
<script>
// 获取值
let z = document.getElementById("z")
let x = 0,y = 0
// 设置定时器
let dsq = setInterval(()=>{
if(x>=450 || y>=450){
clearInterval(dsq)
}
x+=2,
y++
z.style.top = y +'px'
z.style.left = x + 'px'
},10)
</script>
js实现小球圆周运动
思想：这里实现圆周远动，
<style>
.f{
position: relative;
width: 500px;
height: 500px;
}
.f>div{
position: absolute;
border-radius: 50%;
}
.z1{
width: 500px;
height: 500px;
border: 1px solid red;
}
.z2{
width: 300px;
height: 300px;
top: 100px;
left: 100px;
border: 1px solid sandybrown;
}
.z3{
width: 100px;
height: 100px;
top: 200px;
left: 200px;
border: 1px solid darkcyan;
}
.z4{
width: 100px;
height: 100px;
left: 0px;
top: 200px;
background-color: thistle;
}
.z5{
width: 100px;
height: 100px;
top: 200px;
left: 100px;
background-color: cornflowerblue;
}
</style>
<body>
<div class="f">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
<div id="z4" class="z4"></div>
<div id="z5" class="z5"></div>
</div>
<button id="button" onclick="kais()">点击开始</button>
<button onclick="kais2()">点击开始</button>
</body>
<script>
// r表示运动轨迹，x0和y0表示圆心坐标
let r=200,x0=250,y0=250
// 获取最外面的球
let z4 = document.getElementById("z4")
// 定义x，y表示小球的坐标
let x=50,y=50
// 获取第二个球，并设置坐标值
let z5 = document.getElementById("z5")
let x2 = 150,y2=50
let r2 = 100
function kais(){
// 创建一个定时器
let sby = setInterval(()=>{
x++
y=-Math.sqrt(Math.pow(r,2) - Math.pow(x-x0,2)) +y0
z4.style.top = y-50 +'px'
z4.style.left = x-50 + 'px'
if(x==450 && y==250){
// 结束上半圆的定时器
clearInterval(sby)
let xby = setInterval(()=>{
x--,
y=Math.sqrt(Math.pow(r,2) - Math.pow(x-x0,2)) +y0
z4.style.top = y-50 +'px'
z4.style.left = x-50 + 'px'
if(x==50 && y==250){
// 结束下半圆
clearInterval(xby)
// 重新启动上半圆
kais() //递归调用
}
},1)
}
},1)
}
function kais2(){
// 创建另一个定时器
let sby2 = setInterval(()=>{
x2++
y2=-Math.sqrt(Math.pow(r2,2) - Math.pow(x2-x0,2)) +y0
z5.style.top = y2-50 +'px'
z5.style.left = x2-50 + 'px'
if(x2==350 && y2==250){
// 结束上半圆的定时器
clearInterval(sby2)
let xby2 = setInterval(()=>{
x2--
y2=Math.sqrt(Math.pow(r2,2) - Math.pow(x2-x0,2)) +y0
z5.style.top = y2-50 +'px'
z5.style.left = x2-50 + 'px'
if(x2==150 && y2==250){
// 结束下半圆
clearInterval(xby2)
// 重新启动上半圆
kais2()
}
},1)
}
},1)
}
</script>
624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
