资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/一个简单的动态页面（我的第一个博客）

一个简单的动态页面（我的第一个博客）

番茄西红柿 / 1412人阅读

摘要：今天是我第一次写博客，因为没经验嘛，我就随便写写，我也希望自己以后能坚持写下去，不为别的，就为了自己能够更好地学习编程，能够追随行业大牛的脚步，从此赢取白富美，走上人生巅峰额，理想远大呵好吧，步入正题，因为目前在学加了一些

2018-11-10

今天是我第一次写博客，因为没经验嘛，我就随便写写，我也希望自己以后能坚持写下去，不为别的，就为了自己能够更好地学习编程，能够追随行业大牛的脚步，从此赢取白富美，走上人生巅峰（额，理想远大呵！）

 

好吧，步入正题，因为目前在学java,加了一些培训机构的群，跟着做了一个小项目，就是做个页面，当鼠标悬浮于图片之上的时候，图片会实现一个放大旋转的效果，经简单的，具体演示看下图：

 

 

我觉得这个项目的难点有两点：

  1. 背景上叠加的六边形
  2. 鼠标放置图片上，图片显示旋转放大效果

一，首先讲一下如何做背景六边形

　　这个六边形其实是在li标签中，放置两个div标签，并且都是用rgba设置成黑色半透明，在正常情况下我们都知道，一个li标签里放两个与li标签一样大的div标签，肯定会放不下，这样，有一个div会被挤出去，如图所示

为了把两个div都放入li中，就需要让另一个div飘起来，覆盖在上面，这里就需要介绍一下绝对位置 ，

 

 

</>复制代码 
  1. position:absolute;
  2. left: 0;
  3. top: 0;

然后在div的父标签li中调用相对位置，将飘在外边的的div拉回去，

</>复制代码 
  1. position:relative;

这样，我们就可以使用css3的transform属性来旋转两个div，这样就可以得到一个六边形

 

二，鼠标放置图片上，图片显示旋转放大效果

要实现这个功能，要用到css中的hover选择器，用法如下

选择鼠标指针浮动在其上的元素，并设置其样式：

</>复制代码 
  1. image:hover
  2. { 
  3. transform：scale（1.4） rotate（360deg）;
  4. }

当然了，如果仅仅这样就结束了，你是看不出效果的，因为画面切换太快了，所以再此要用到css3 过渡属性transition，让css效果转换，持续1秒

</>复制代码 
  1. transition-duration:1s

就这些吧，再附个源码（有些改动）

</>复制代码 
  1. DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>多边形旋转放大title>
  6. head>
  7. <body>
  8.     <div class="box">
  9.         <ul>
  10.             <li><img src="images/1.png">li>
  11.             <li><img src="images/2.png">li>
  12.             <li><img src="images/3.png">li>
  13.             <li><img src="images/4.png">li>
  14.             <li><img src="images/5.png">li>
  15.             <li class="cols2"><img src="images/6.png">li>
  16.             <li><img src="images/7.png">li>
  17.             <li><img src="images/8.png">li>
  18.             <li><img src="images/9.png">li>
  19.             <li><img src="images/10.png">li>
  20.             <li><img src="images/11.png">li>
  21.             <li><img src="images/12.png">li>
  22.             <li><img src="images/13.png">li>
  23.             <li><img src="images/14.png">li>
  24.         ul>
  25.     div>
  26. body>
  27. <style type="text/css">
  28.     body{
  29.         margin: 0;
  30.         background-image: url("images/bodyBg.jpg");
  31.     }
  32.     .box{
  33.         background-color: #d09324;
  34.         width:1000px;
  35.         height: 550px;
  36.         margin:100px auto;
  37.         background-image: url("images/bodyBg.jpg");
  38.     }
  39.     ul{
  40.         margin:0;
  41.         padding:18px;
  42.         list-style: none;
  43.     }
  44.     li{
  45.         position:relative;
  46.         background-color:rgba(0,0,0,0.5);
  47.         height: 105px;
  48.         width: 180px;
  49.         float: left;
  50.         margin:30px 5px;
  51.     }
  52.     li:before, li:after{
  53.         content: "";
  54.         background-color:rgba(0,0,0,0.5);
  55.         height: 100px;
  56.         width: 180px;
  57.         position:absolute;
  58.         left: 0;
  59.         top: 0;    
  60.     }
  61.     li:before{
  62.         transform:rotate(60deg);
  63.     }
  64.     li:after{
  65.         
  66.         transform:rotate(-60deg);
  67.     }
  68.     .cols2{
  69.         margin-left:100px;
  70.     }
  71.     img{
  72.         position:absolute;
  73.         top:0;
  74.         left:0;
  75.         right:0;
  76.         bottom:0;
  77.         margin:auto;
  78.         z-index: 9;
  79.         transition-duration:1s;
  80.     }
  81.     .box img:hover {
  82.     transform:scale(1.4) rotate(360deg);
  83.     
  84. }
  85. style>
  86. html>

 

 

</>复制代码

 

 

云服务器 GPU云服务器 js+调用另一个页面的数据 js 调用另一个页面的数据 js怎么获取另一个页面的数据 简单编写一个html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1566.html

相关文章

  • 一起来学SpringBoot | 第四篇：整合Thymeleaf模板

    摘要：在使用上述模板，默认从下加载。介绍是现代化服务器端的模板引擎，不同与其它几种模板的是的语法更加接近，并且具有很高的扩展性。特点支持无网络环境下运行，由于它支持原型，然后在标签里增加额外的属性来达到模板数据的展示方式。 SpringBoot 是为了简化 Spring 应用的创建、运行、调试、部署等一系列问题而诞生的产物，自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置，...

    TZLLOG 评论0 收藏0

  • 解决 Github Pages 禁止百度爬虫的方法与可行性分析

    摘要：可行性分析是通过来判定百度爬虫并返回的。然而并没有卵用参考资料如何解决百度爬虫无法爬取搭建在上的个人博客的问题 本文最初发布于我的个人博客：咀嚼之味 我写技术博客有两个原因：一是总结自己近日的研究成果，二是将这些成果分享给大家。所以就我个人来说，还是比较希望写出来的文章有更多的人能够看到的。我最近注意到我的博客的流量大多来自于谷歌，而几乎没有来源于百度的。而本文就旨在提出这个...

    Yuanf 评论0 收藏0

  • [译] 如何恰当地学习 JavaScript

    摘要：原文链接恰当地学习适合第一次编程和非的程序员持续时间到周前提无需编程经验继续下面的课程。如果你没有足够的时间在周内完成全部的章节，学习时间尽力不要超过周。你还不是一个绝地武士，必须持续使用你最新学到的知识和技能，尽可能地经常持续学习和提高。 原文链接：How to Learn JavaScript Properly 恰当地学习 JavaScript （适合第一次编程和非 JavaSc...

    Jason 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<