Question

我有一个看起来像心脏的div动画，并且我想在动画结束时在心脏div旁边放一些文字。我尝试将文本放在div中并将其放在心脏旁边，但是心脏的不可见部分一直在推动它，或者有时带有文本的div根本看不到。一些帮助将不胜感激。这是代码：

  body {
  overflow: ;
}

#heart {
  position: relative;
  width: 1000px;
  height: 900px;
  left: 300px;
  top: 200px;
  color: blue;
  z-index: 2;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 5000px 5000px 0 0;
  border-radius: 5000px 5000px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
  z-index: 2;
}

#heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  z-index: 2;
}

@keyframes example {
  0% {
    position: absolute;
    z-index: 2;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }
  50% {
    left: 0;
    z-index: 2;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
  100% {
    z-index: 2;
  }
  #lol {
    position: absolute;
    right: 100px;
    top: 200px;
    font-family: Quicksand;
    color: black;
  }

<html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />

<body>
  <div id="heart"></div>
  <div id="lol">#Forever Alone</div>

Answer 1

你可能错过了{after。也就是说，

with open("secrets.yml") as f:
    content = f.read()
# from secrets.yml import CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_SECRET
secret = yaml.load(content)
##################################################################################################
# authorize tweepy with CONSUMER_KEY and CONSUMER_SECRET
auth = tweepy.OAuthHandler(secret["CONSUMER_KEY"], secret["CONSUMER_SECRET"])
auth.secure = True
# read in ACCESS_TOKEN and ACCESS_SECRET variables to tweepy
auth.set_access_token(secret["ACCESS_TOKEN"], secret["ACCESS_SECRET"])

应该是

100%{
    z-index:2;
}
#lol {

希望它有所帮助！

Answer 2

奇怪的格式化是因为你需要在声明你的@keyframes之前添加另一个结束括号（就在#lol之前）。

add_action( 'plugins_loaded', 'check_requirements_for_my_plugin' );

function check_requirements_for_my_plugin() {
    // Do whatever checking needed here
    if ( ! $requirements_met ) {
        add_action( 'admin_notices', 'show_requirements_notice_for_my_plugin' );
        return; // Exit your function
    }
    // Register all other hooks here since you know requirements are
    // met if you reach this point
    add_action( 'admin_init', 'maybe_update_my_plugin' );
}

function show_requirements_notice_for_my_plugin() {
    // I'd expand this to add a list of needed requirements
    echo '<div class="notice notice-error">'
        . "My-Plugin functionality is disabled because the requirements are not met."
        . '</div>';
}

function maybe_update_my_plugin() {
    // Check to see if update/installation tasks need to be performed
}

div被推到或没有被其他div出现

2 个答案: