js实现拖动方块到另一个目标上变化效果代码
代码语言:html
所属分类:拖放
代码描述:js实现拖动方块到另一个目标上变化效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> container{position: relative;} .rectangle-1{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #4CAF50; width: 180px; height: 150px; border-radius: 5px; transition: 0.3s all ease; color: #fff; text-align: center; line-height: 150px; font-size: 25px;} .rectangle-1.collide{background: #EF5350;} .rectangle-1:after{content:":-)"; position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%);} .rectangle-1.collide:after{content:":-("; } .rectangle-2{position: absolute; background: #F5B041; width: 100px; height: 100px; border-radius: 5px; z-index: 10; cursor: move; transition: 0.5s box-shadow ease, 0.5s transform ease; transform: translate(0, 0);.........完整代码请登录后点击上方下载按钮下载查看
网友评论0