css3自定义拖拽 |登录界面appcss

/* 定义拖拽元素 */
.drag {
width: 100px;
height: 100px;
background: #ff0000;
cursor: move;
}
/* 定义拖拽状态 */
.drag:active, .drag:focus {
opacity: 0.5;
}
/* 定义拖拽过程中的动画 */
.drag:active {
transform: scale(1.05);
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

上面的代码是一个简单的CSS3自定义拖拽的实现示例。在这里，大家首先定义了一个.drag元素，并设置了其宽度、高度和背景颜色。接着，大家给拖拽元素设置了一个move鼠标指针，以便让用户知道该元素可以被拖动。

在拖拽状态下，大家通过设置拖拽元素的opacity为0.5来改变元素的外观。此外，大家还定义了一个拖拽过程中的动画效果，通过设置transform为scale(1.05)和box-shadow来使元素在拖拽过程中更加生动。

通过CSS3自定义拖拽，大家可以为用户带来更加友好、生动的交互体验，同时也能为页面增加一定的美感。