HTML实战animation 实现闪烁效果

最新推荐文章于 2023-04-17 11:12:58 发布

Playful_Elbow

最新推荐文章于 2023-04-17 11:12:58 发布

阅读量660

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/Playful_Elbow/article/details/124347022

版权

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8" />
   <title>Document</title>
   <style type="text/css">
       .cont{
           width: 130px;
           height: 110px;
           text-align: center;
           background-color: #6CBE5D;
       }
       .wenzi{
           width: 110px;
           margin: 0 auto;
           text-align: center;
           font-weight: bold;
           color: #fff;
           margin-top: 10px;
       }
       #img{
           width: 70px;
           animation: action 1s linear infinite;
       }
          @keyframes action{
        25%{opacity:0.5}
         50%{opacity:0.1}
         75%{
              opacity:0.5
         }
         100%{opacity:0.9}
      }

   </style>

</head>
<body>
   <div class="cont">
       <img id="img" src="res/htmlLX/xiaolaba.png">
       <div class="wenzi">传媒资讯</div>
   </div>
</body>
</html>