Question

我正在投资组合网站上工作，我需要一些功能。

在我的“关于”页面上，每边的两条线连接在一起。我想要做的是在页面中心形成圆圈，当这两条线相遇时。相反，它发生的是从左上角开始，然后到中心。

你们能告诉我怎么做吗？

看看这个家伙如何从中心分配动画？我想要一个类似的效果。

$(document).ready(function() {
  $("#main-links li").on('mouseenter', function() {

    $(this).animate({
      borderBottomColor: "rgb(0, 154, 205)"
    }, "200");
  });

  $("#main-links li").on('mouseleave', function() {

    $(this).animate({
      borderBottomColor: "rgb(238, 0, 0)"
    }, "200");
  });

  $("hr").delay(800).animate({
    width: "50%"
  }, {
    easing: "swing",
    duration: 3200
  });

  $("#photo").delay(4000).animate({
    width: "180px",
    height: "180px"
  });

  $("#relative").delay(4000).animate({
    right: "97.5px"
  });

});

    body {
      margin: 0;
    }
    #nav-bar {
      width: 100%;
      height: 50px;
      background-color: rgb(40, 40, 40);
      border-bottom-style: solid;
      border-bottom-color: rgb(238, 0, 0);
      border-bottom-width: 7.5px;
      padding-top: 14px
    }
    #logo {
      position: relative;
      bottom: 5px;
      font-size: 30px;
      padding-left: 8px;
      float: left;
      font-family: bebas;
    }
    #word-1 {
      color: rgb(0, 154, 205);
    }
    #word-2 {
      color: rgb(255, 250, 250);
    }
    ul#main-links {
      list-style: none;
      margin: 0;
      padding-right: 50px;
      float: right;
      height: 100%;
      border-bottom: 7.5px solid transparent;
      display: block;
      font-size: 0;
    }
    ul#main-links li {
      display: inline-block;
      text-align: center;
      border-bottom-style: solid;
      border-bottom-width: 7.5px;
      border-bottom-color: rgb(238, 0, 0);
      color: white;
      font-family: arcon;
      font-size: 18px;
      height: 100%;
      width: 90px;
      position: relative;
      z-index: 2;
    }
    a:link {
      text-decoration: none;
    }
    a:visited {
      text-decoration: none;
      color: white;
    }
    a:active {
      text-decoration: none;
      color: white;
    }
    a#logo-link {
      text-decoration: none;
    }
    a#logo-link:visited {
      text-decoration: none;
      color: inherit;
    }
    a#logo-link:active {
      text-decoration: none;
      color: inherit;
    }
    ul#main-links > a > li > span.word-position {
      position: relative;
      top: 5px;
    }
    #main-content {
      background-color: rgb(131, 111, 255);
      width: 100%;
      height: 80%;
    }
    #background {} h1#page-header {
      margin: 0;
      font-family: code;
      font-size: 45px;
      text-align: center;
      padding: 5px 0px;
    }
    /* ABOUT */
    #pic-container {
      width: 100%;
      height: 180px;
      text-align: center;
      padding-top: 10px;
    }
    #relative {
      position: relative;
      display: inline-block;
      right: 97.5px;
    }
    #photo {
      background-color: royalblue;
      position: absolute;
      width: 0px;
      height: 0px;
      border-radius: 100px;
      border-style: solid;
      border-color: beige;
      border-width: 7.5px;
    }
    hr {
      position: relative;
      top: 97.5px;
      margin: 0;
      border-style: solid;
      border-color: black;
      overflow: hidden;
      height 2px;
      background-color: black;
    }
    .hidari {
      float: left;
    }
    .migi {
      float: right;
    }
    .clear {
      clear: both;
    }
    /*---------------------------------------------------------------*/
    /* CONTACT */
    #contact-info {
      margin-left: auto;
      margin-right: auto;
      width: 80%;
      height: 80%;
    }
    #contact-info td {
      margin-left: auto;
      margin-right: auto;
      width: 50%;
    }
    #contact-info td > p {
      text-align: justify;
      font-family: lato;
      width: 80%;
    }
    .spacer {
      padding: 10px 0px;
    }
    #message-div {
      height: 150px;
    }
    input[type="text"] {
      width: 100%;
      height: 27px;
      padding-left: 5px;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 15px;
    }
    input[type="text"]:hover,
    #recipient-message:hover {
      border-width: 1.5px;
      border-style: solid;
      border-color: rgb(152, 245, 255);
    }
    input[type="button"] {
      float: right;
      margin-top: 7.5px;
      background-color: rgb(72, 118, 215);
      border-color: rgb(72, 118, 215);
      border-radius: 5px;
      font-size: 15px;
      color: rgb(230, 230, 255);
      font-family: Tahoma;
    }
    label {
      font-family: lato;
      font-size: 18px;
    }
    #recipient-message {
      width: 100%;
      height: 100%;
      resize: none;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12.5px;
    }
    .form-confirmation {
      width: 80%;
      border-style: solid;
      border-width: 2.5px;
      border-radius: 5px;
      border-color: rgb(0, 0, 0);
    }
    .invalid-field {
      box-shadow: 0 0 23px red;
      -webkit-box-shadow: 0 0 23px red;
      -moz-box-shadow: 0 0 23px red;
    }
    #success {
      background-color: rgb(0, 210, 0);
      color: rgb(245, 255, 250);
    }
    #failure {
      background-color: rgb(255, 48, 48);
      color: rgb(137, 0, 0);
    }
    .form-confirmation > p {
      text-align: center;
      font-family: codee;
      font-size: 18px;
    }
    #footer {
      width: 100%;
      height: 10%;
      background-color: black;
    }
    #footer > p#footer-text {
      margin: 0;
      text-align: center;
      font-family: arial;
      color: rgb(169, 169, 169);
      padding-top: 20px;
      width: 100%;
    }
    @font-face {
      font-family: arcon;
      src: url(Arcon-Regular.otf);
    }
    @font-face {
      font-family: bebas;
      src: url(BEBAS___.ttf);
    }
    @font-face {
      font-family: bubblegum;
      src: url(BubblegumSans-Regular.otf);
    }
    @font-face {
      font-family: code;
      src: url(Days.otf);
    }
    @font-face {
      font-family: lato;
      src: url(Lato-Regular.ttf);
    }
    @font-face {
      font-family: codee;
      src: url(CODE_Bold.otf);
    }
    .clear {
      clear: both;
    }

HTML

<html>

<head>
  <title>About | Potential Beginning</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
    libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>

<body>
  <div id="container">
    <div id="nav-bar">
      <div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a>
      </div>
      <ul id="main-links">
        <a href="about.html">
          <li><span class="word-position">About</span>
          </li>
        </a>
        <a href="work.html">
          <li><span class="word-position">Work</span>
          </li>
        </a>
        <a class href="contact.php">
          <li><span class="word-position">Contact</span>
          </li>
        </a>
      </ul>
    </div>
    <div id="main-content">
      <div id="pic-container">
        <div id="relative">
          <div id="photo"></div>
        </div>
        <hr class="hidari" />


        <hr class="migi" />
      </div>

      <h1 id="page-header">About Me</h1>
    </div>
    <span class="clear"></span>
    <div id="footer">

      <p id="footer-text">

      </p>
    </div>
  </div>
</body>
</html>

如果您需要更多信息，请与我们联系。

Answer 1

为了使#photo看起来可以从其中心设置动画，您还可以为top和left属性设置动画。您需要将top和left减去 height和width更改的一半：

$("#photo").delay(4000).animate({
    width: "180px",
    height: "180px",
    left: "-=90px",
    top:"-=90px"
});

这是一个模拟效果的工作小提琴：https://jsfiddle.net/rthybguf/

使用jQuery动画从中心创建更大的圆圈

1 个答案: