今天做一个用户头像上传的页面,在本地选择一个图片,用户调整位置后保存,tx qq 的头像做的不错
立即学习“前端免费学习笔记(深入)”;
设计让我也做一个这样的效果,没见过,于是百度,丫的,竟然没搜到 ,好吧自由自己来,开始想用 canvas做,想想 挺麻烦的,于是灵感一来,想到了!!
代码如下:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> html, body { width: 100%; height: 100%; overflow: hidden; } * { margin: 0; padding: 0; } .su { position: relative; width: 300px; height: 300px; border: 1px solid red; margin: 0 auto; overflow: hidden; } .lk { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 200px solid rgba(0,0,0,0.4); top: 50%; margin-top: -250px; left: 50%; margin-left: -250px; } </style> </head> <body> <div class="su"> <div class="lk"></div> </div> </body></html>
立即学习“前端免费学习笔记(深入)”;
新手,有意见尽管提! 233333333
立即学习“前端免费学习笔记(深入)”;
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号