html中图片旋转_颜值与技术并存!小姐姐用 HTML + CSS 画油画!

    Gitbub上有这样一个颜值与技术并存的项目。请看项目主页:

3d214e334379332fb5c7a4aa8459a3f7.png

        在主打直男社交的Github上,这样的颜值是不是堪称逆天了!

 然鹅,这还不算玩,你要是知道这位小姐姐做了些啥,一定会更加惊呆了!

    她!居!然!用 !HTML + CSS 画!油!画!

    这位小姐姐的名字叫 Diana Smith ,是一位前端开发人员,精通React / Vue / jQuery/JavaScript等技术 ,同时还是一位CSS 高手!

    而她在 GitHub 上星数最高的一个项目,就是用 HTML/CSS 创作了仿油画作品。

    话不多说,我们一起来欣赏一下她的作品:

cdb722fb0043c84f558fc5fe07c7ca53.png

d10d7c4b0f1bfab95c6e5cf95011f686.png

c89921bede9301269c03b4d106553502.png

8e085d2f7b230b8da5b3af8b2bc3e424.png

     画如其人啊!画如其人啊有没有!

    而且,这些图片居然不是用Photoshop之类的UI神器做得哦, 完全就是依靠 CSS 和 HTML手动输入,仅仅使用 Atom 文本编辑器和 Chrome 开发者工具。

    网页三兄弟 HTML、CSS、JavaScript 我相信大家都不陌生,但是居然还能玩出这样的花来呢?

    小姐姐的个人博客中分享了一篇文章,其中有一个观点是:“当你只拥有一把 CSS 锤子时,世界就像是 CSS 钉子。”小姐姐就是用CSS这把锤子,叮叮当当的把这些油画效果的图片给锤出来了~!

    所以,不要觉得HTML、CSS、JavaScript这三兄弟,这么简单,你真的了解他们吗??你知道他们使用过程中的一些奇淫巧技么?

HTML、CSS、JavaScript都是啥?

    对于全世界所有的网站而言无不例外都会使用了 HTML + CSS +JavaScript这三兄弟。

d19500613c26e740c2ca4e6e24c56a36.png

    这三兄弟分别是干嘛的呢?

    1. HTML

    以前网页都是非常单纯的资讯呈现,所以有一些聪明的工程师想到,只要在电脑上装了一个浏览器,然后制定一个标准,让浏览器能正确呈现网页就好了。

    这个标准就是 HTML,HTML 用 tag 的方式告诉浏览器资讯该如何呈现,举例:浏览器读到 image 这个 tag 就知道要在网页上摆一张图片,读到 button 就知道要在网页上放一颗按钮。

    如此一来,我只要制定一系列常用的tag (例如

,

,

,,等等),就能让浏览器呈现图文并茂的网页。

2. CSS

    有了 HTML 后,大家还是不满意,因为单纯用 HTML 语言描述出来的网页很丑,工程师想出了一个方法,就是制定一种描述网页外观的语言,再让它变成一种标准,这样浏览器也就会知道如何美化网页了。

    这个语言就是 CSS。CSS 提供很多很厉害的效果和描述外观的属性,例如让图片变模糊、变亮、旋转,或者改变字体的颜色。

    从 1997 年 CSS 1.0 发布到如今,从最开始只支持简单的文字排版到如今已经可以做出酷炫的 3D 动画,CSS 已经走过了 22 个年头。

    随着互联网的发展,人们对网页的要求已经是从只要展示图文就好变成了各种交互跟视觉效果都需要有着更多的体验要求。CSS 为此也是不断的更新着。

3. JavaScript

    但很多情况下仅凭 HTML + CSS 还是不够的。光是呈现画面总少了点趣味,我们希望网站能和使用者有互动,JavaScript 就是用来实现这些互动行为的办成语言。

    Javascript 能监听网页上的各种操作行为,例如移动鼠标、点击按钮、网页缩放、输入文字等等。

    总结一下:

  • HTML 建立搭建网页的主结构

  • CSS 负责网页的美化与优化

  • JavaScript 负责描述网页如何与使用者互动

    但光学会这三样东西,仍然无法满足工程师开发上的需要,为了开发的效率,所有的开发语言生态系都一定会衍生出各种框架和。

    常见的 JavaScript 框架有Vue.js、AngularJS、ReactJS、jQuery 等等,各有喜好者,但目的都是为了简化开发复杂度,把前后端分开,提高重复使用性,可维护性。

后话:前端好学吗?未来又怎样?

    很多人都说前端简单,其实前端确实容易上手,而且前端的学习反馈非常直接,很快就能见效,让人很快就成就感满满。

    在掌握 HTML + CSS + JavaScript,并了解一些后端知识后,就能说是一个合格的前端工程师了,要进一步进阶,就要了解业务,对于业务的需求和架构设计有真正的理解和设计;而行业内最稀缺的前端大牛,则超过了一般前端的范畴,更接近于“以前端开发为主的全栈工程师”。

    在 20 年前,前端的概念其实还不常见,就连程序员这个大领域也没有过多的细分,基本上都是一个人或者几个人一起完成一个项目。

    随着行业的变化和互联网的发展,情况和之前大不相同了。2010 年开始,企业需要更多在某一领域更专业、更垂直的开发者,也就造成了现在的前后端分离。

    而现在情况又有所变化,用 Node.js、Meteor.js 这类运行环境来说,他们的出现让前端工程师也开始进行服务器开发,逐渐又在向全栈靠拢。

    前不久有个观点很有意思,说是到了云时代,一家企业只要招几个前端工程师就可以了。

    所以不管是前端还是后端,只要你有能力、有热情,都是稀缺的人才,都会有光明的前景!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML上传图片并将其存储到数据库需要使用服务器端脚本来实现。以下是一般的步骤: 1. 在HTML表单添加一个input元素,type属性为“file”,用于选择文件: ``` <form method="post" enctype="multipart/form-data"> <input type="file" name="image"> <input type="submit" value="Upload"> </form> ``` 2. 在服务器端接收表单数据并将图片存储到数据库。在这里我们假设使用PHP作为服务器端脚本。 首先需要连接到数据库: ``` $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; $conn = mysqli_connect($servername, $username, $password, $dbname); if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } ``` 然后获取上传的文件并将其存储到服务器上的一个目录: ``` $target_dir = "uploads/"; $target_file = $target_dir . basename($_FILES["image"]["name"]); move_uploaded_file($_FILES["image"]["tmp_name"], $target_file); ``` 最后将图片的路径存储到数据库: ``` $sql = "INSERT INTO images (image_path) VALUES ('$target_file')"; $result = mysqli_query($conn, $sql); ``` 完整的PHP代码如下所示: ``` <?php $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; $conn = mysqli_connect($servername, $username, $password, $dbname); if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } if(isset($_FILES["image"])){ $target_dir = "uploads/"; $target_file = $target_dir . basename($_FILES["image"]["name"]); move_uploaded_file($_FILES["image"]["tmp_name"], $target_file); $sql = "INSERT INTO images (image_path) VALUES ('$target_file')"; $result = mysqli_query($conn, $sql); } ?> <form method="post" enctype="multipart/form-data"> <input type="file" name="image"> <input type="submit" value="Upload"> </form> ``` 注意,上述代码仅供参考,实际应用需要对上传文件的类型和大小进行验证和限制,并且需要防止SQL注入等安全问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值