前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >博客园美化的第二天(动态设置,以及结合ps制作)

博客园美化的第二天(动态设置,以及结合ps制作)

作者头像
小小咸鱼YwY
发布2019-07-24 15:54:31
9580
发布2019-07-24 15:54:31
举报
文章被收录于专栏:python-爬虫python-爬虫

博客园美化的第二天(动态设置,以及结合ps制作)

首先要根据鼠标进过对于图片之后的动画进行PS制作动图

原图(很多图片PS合成的,加点画笔链接)

动画1(循环一次,中途机器人亮下眼睛)

动画2(无限次循环)

动画3 (最终稿)

样式设置

代码语言:javascript
复制
#Header1_HeaderTitle{
background: url(http://images.cnblogs.com/cnblogs_com/pythonywy/1455150/o_biaotiend.png);
background-size:100% 100%;
padding: 0 40px 50px 0;#为了调整标题和背景距离的合理
 }
#Header1_HeaderTitle:hover{
background: url(http://images.cnblogs.com/cnblogs_com/pythonywy/1455150/o_333333.gif);
background-size:100% 100%;
padding: 0 40px 50px 0;
 }
#关于博客园中 插入背景图片url不同于其他的不需要加""加了反而会加载不出来,而且博客园中不会在意缩进

加深理解一些格式设置

代码语言:javascript
复制
padding,后面填写的大小可以用固定距离来先,也可以用%来写
hover为,鼠标经过时候发生变化例如#Header1_HeaderTitle:hover
关于 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
      其中值对于 水平位置 垂直距离 模糊距离 阴影颜色
width和height也可以用%来写数值
#另外博客园比较特别:背景图片的URL不加”“

制作后的效果

中途修改的图片

`后续先不看前端了和尝试前端了,开始更加熟系python啦

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-05-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 博客园美化的第二天(动态设置,以及结合ps制作)
    • 首先要根据鼠标进过对于图片之后的动画进行PS制作动图
      • 原图(很多图片PS合成的,加点画笔链接)
      • 动画1(循环一次,中途机器人亮下眼睛)
      • 动画2(无限次循环)
      • 动画3 (最终稿)
    • 样式设置
      • 加深理解一些格式设置
      • 制作后的效果
      • 中途修改的图片
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档