javascript - HTML CSS 中的动画
问题描述
嘿伙计们,我正在制作一个 html css 动画。我试图做我想做的动画,但没有成功这是我的代码
var count=0;
var rotation = 0;
jQuery.fn.rotate = function(degrees) {
$(this).css({'transform' : 'rotate('+ degrees +'deg)'});
return $(this);
};
function append(){
$("div").append("<img class=rot id=btn4 src =222.jpg />");
$("div").append("<img class=rot id=btn5 src =music-note.jpeg />")
$("div").append("<img class=rot id=btn6 src =3.jpg />")
$("div").append("<img class=rot id=btn7 src =45.jpg />")
}
function rot(x){
$("#btn").animate(
{ deg: x},
{
duration: 400,
step: function(now) {
$(this).css({ transform: 'rotate(' + now + 'deg)' });
}
}
);
}
function rot1(x){
$(".rot").animate(
{ deg: x},
{
duration: 30,
step: function(now) {
$(this).css({ transform: 'rotate(' + now + 'deg)' });
}
}
);
}
function rem(){
$('#btn1').remove();
$('#btn2').remove();
$('#btn3').remove();
$('#btn8').remove();
}
function append1(){
$('#btn4').remove();
$('#btn5').remove();
$('#btn6').remove();
$('#btn7').remove();
$("div").append("<img class=remove id=btn1 src=456.jpg />");
$("div").append("<img class=remove id=btn2 src=78.jpg />");
$("div").append("<img class=remove id=btn3 src=9.jpg />");
$("div").append("<img class=remove id=btn8 src=download.jpg />");
}
function play(){
if(count==0){
rot(135);
myMove(500,10);
rem();
//$("p").remove(".test");
append();
rot1(360);
myMove3(500,0.05);
//$("#btn").animate({top:"+=40"}, 0.000005);
count++;
}
else if(count==1){
rot(-360);
$("#btn").animate({top: "-=20"}, 0.000005);
append1();
myMove1(500,5);
myMove2(450,5);
count=0;
}
}
//Mymove(500,)
function myMove(x,y) {
var elem = document.getElementById("btn");
var pos = x;
var id = setInterval(frame, y);
function frame() {
if (pos == 520) {
clearInterval(id);
} else {
pos++;
elem.style.top= pos + "px";
// elem.style.left = pos + "px";
}
}
}
function myMove1(x,y) {
var elem = document.getElementById("btn");
var pos = x;
var id = setInterval(frame, y);
function frame() {
if (pos == 450) {
clearInterval(id);
} else {
pos--;
elem.style.top = pos + "px";
// elem.style.left = pos + "px";
}
}
}
function myMove2(x,y) {
var elem = document.getElementById("btn");
var pos = x;
var id = setInterval(frame, y);
function frame() {
if (pos == 500) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
// elem.style.left = pos + "px";
}
}
}
function myMove3(x,y) {
var elem1 = document.getElementById("btn4");
var elem2=document.getElementById("btn5");
var elem3=document.getElementById("btn6");
var elem4= document.getElementById("btn7");
var pos = x;
var id = setInterval(frame, y);
function frame() {
if (pos ==450) {
clearInterval(id);
} else {
pos--;
elem1.style.top= pos + "px";
elem2.style.top= pos + "px";
elem3.style.top= pos + "px";
elem4.style.top= pos + "px";
// elem.style.left = pos + "px";
}
}
}
#btn{
position: absolute;
bottom: 81px;
right:620px;
width:7%;
}
#btn1{
position: absolute;
bottom: 0px;
right:400px;
width:10%;
}
#btn2{
position: absolute;
bottom: 10px;
right:300px;
width:8%;
}
#btn3{
position: absolute;
bottom: 30px;
right:820px;
width:5%;
}
#btn4{
position: absolute;
top: 500px;
right:500px;
width:4%;
}
#btn5{
position: absolute;
top: 510px;
right:350px;
width:5%;
}
#btn6{
position: absolute;
top: 495px;
right:820px;
width:5%;
}
#btn7{
position: absolute;
top: 510px;
right:970px;
width:5%;
}
#btn8{
position: absolute;
bottom: 25px;
right:950px;
width:5%;
}
#line{
position: absolute;
bottom: 5px;
right:530px;
width:20%;
}
input:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
我尝试旋转,但看起来并不专业,而且我想要中间有曲线的页脚,这也是一个我找不到方法的问题
另外还有移动也可以动画,这也给我带来了问题
这是我想要的视频即时分享请帮助我尝试但没有解决方案。
解决方案
尝试将您的 JavaScript 放在具有 JQuery src 的脚本标记中,看看是否有帮助。
推荐阅读
- websocket - 如果 WebSocket 帧数据中 PAYLOAD_LENGTH 为 126,如何计算 EXTENDED_PAYLOAD_LENGTH?
- sql - Redshift sql根据某个记录之前的时间戳识别记录
- python - 使用 Beautiful Soup Python 在 HTML 代码的“img”标签内打印“id”值
- python - 从烧瓶中的html模板订购查询数据
- ssl-certificate - Roundcube SSL 连接 IMAP 错误:登录失败。我的证书 ssl 有问题?
- heroku - Heroku Redis 内存使用高峰
- haskell - “Haskell 中的 99 个问题”中的编码函数出现递归错误
- python - jupyter notebook 内核错误 2,指向旧目录
- gitlab - 在不使用私有令牌的情况下,在 Gitlab 中获取项目中所有文件和文件夹列表的最佳方法是什么?
- svelte - 渲染一个预编译的 svelte 组件