CSS3を使用して光の下でテキストアニメーションを作成する方法-CSSチュートリアル-php.cn

CSS3を使用して光の下でテキストアニメーションを作成する方法

php中世界最好的语言

リリース： 2017-11-25 10:10:58

オリジナル

2823 人が閲覧しました

場合によっては、このような特殊効果を加えて光で照らし、テキストアニメーションを表示する必要があるので、今日は光で表示されるテキストアニメーションのソースコードをお届けします

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS3 实现灯光照射显示文字动画</title>
<meta name="keywords" content=" CSS3 实现灯光照射显示文字动画" />
<meta name="description" content=" CSS3 实现灯光照射显示文字动画" />
 
 
      <link rel="stylesheet" href="css/style.css">
 
 
</head>
 
<body>
  <div>
  <div>
    <p>5iweb.com.cn</p>
  </div>
  <div class="noor one"></div>
  <div class="noor two"></div>
</div>
 
 
</body>
</html>
Css部分：
body {background: #000;}
 
.content {position: relative;width: 750px;margin: 0 auto;}
 
p {margin: 0;padding: 0;font-size: 90px; }
 
.klam {
  position: absolute;
  top: 40px;
  left: 100px;
  color: #000;
  z-index: 1;
  animation: shadow 5.0s ease-in-out infinite;
}
 
.noor {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 140px;
    height: 140px;
    opacity: 0.8;
    border-radius: 100px;
    z-index: 0;
    background:
      -webkit-radial-gradient(center, ellipse cover, #fff 0%, rgba(255, 255, 255, 0.2) 100%);
     box-shadow: 0px 0px 50px #fff;
    animation: noor 5.0s ease-in-out infinite;
}
 
.two {z-index: 2;opacity: 0.8;}
 
@-webkit-keyframes noor {
    0% {left: 45px;}
    50% {left: 335px;}
    75%{left:500px;}
    100% {left: 45px;}
}
 
@-webkit-keyframes shadow {
  0% {text-shadow: -9px 1px 4px #000;}
  50% {text-shadow: 9px 1px 4px #000; }
  100% {text-shadow: -9px 1px 4px #000;}   
}

ログイン後にコピー

以上です。さらにエキサイティングなコンテンツをお求めの場合は、お支払いください。 php 中国語 Web サイトの他の関連記事にも注目してください。

CSS3 の適応型全画面フォーカス画像切り替えの特殊効果を作成する方法

CSS3 でよく使用されるいくつかのセレクター

CSS3 の新しい背景属性とは何ですか

以上がCSS3を使用して光の下でテキストアニメーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。