移动端touch拖拽，拖动，改变animate动画事件

最新推荐文章于 2024-05-15 17:05:01 发布

q雨中漫步q

最新推荐文章于 2024-05-15 17:05:01 发布

阅读量2.3k

点赞数

分类专栏： JS 文章标签： touch拖拽 JS touch拖拽 animate

本文链接：https://blog.csdn.net/qq_39918584/article/details/82831269

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1,user-scalable=no,width=device-width,initial-scale=1"/>
<title>拖拽</title>
</head>
<style>

*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
ul,li{
list-style: none;
}
.warpe{
width: 100%;
height: 100%;
}
.img{
width: 100%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}.img>ul{
width: 40%;
height: 40%;
position: relative;
border: 1px solid #0099FF;
transform-style: preserve-3d;
perspective: 200px;
}.img>ul>li{
text-align: center;
width: 100%;
height: 100%;
position: absolute;
font-size:100px;
font-weight: 900;
opacity: 0;
}
.imgopcity{
	opacity: 1 !important;
}
@keyframes myout
{
0%{opacity: 0;}
30%{opacity: 0.1;}
80%{opacity: 0.7;}
100%{opacity: 1;}
}
@keyframes myouta
{
0%{}
100%{opacity: 0;}
}
.img>ul>li:nth-of-type(1){
color: #008000;
}
.img>ul>li:nth-of-type(2){
color: #FF664D;
}
.img>ul>li:nth-of-type(3){
color: #4563BC;
}
.img>ul>li>p{
	text-shadow:2px 1px 25px cyan;
}
.tuo{
width: 100%;
height: 50%;
}.tuo>ul{
    width: 100%;
    height: 100%;
}.tuo>ul>li{
	width: 100%;
    height: 100%;
 color: #fff;
 position: relative;
}.tuo&

最低0.47元/天解锁文章

q雨中漫步q

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端touch拖拽，拖动，改变animate动画事件

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta name="viewport" content="maximum-scale=1,user-scalable=no,width=device-width,initial-scale=1"/&gt;&
复制链接

扫一扫