CSS3特效,跳动的心

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:3574

css3特效
{}
为什么80%的码农都做不了架构师？>>> \n \n ...

<a style="color:#A00;font-weight:bold;" href="https://my.oschina.net/u/2663968/blog/3051541">为什么80%的码农都做不了架构师？>>> </a> hot3.png

注意引入jquery

<!DOCTYPE html>  
<html lang="en">  
<head>  
   <meta charset="UTF-8">  
   <title>Document</title>  
   <style type="text/css">

  
      .box{  
         width: 300px;  
         height: 300px;  
         background-color: #eee;  
         border: 1px solid #000;  
         position: relative;  
         left: 40%;  
         top: 0;  
      }  
      .zhengfang{  
         width: 100px;  
         height: 100px;  
         background-color: red;  
         position: absolute;  
         left: 100px;  
         top: 125px;  
         transform: rotate(45deg);  
         z-index: 100;  
      }  
      .yuan1{  
         width: 100px;  
         height: 100px;  
         border-radius: 50%;  
         position: absolute;  
         left: 62px;  
         top: 87px;  
         background-color: red;  
      }  
      .yuan2{  
         width: 100px;  
         height: 100px;  
         border-radius: 50%;  
         position: absolute;  
         left: 138px;  
         top: 87px;  
         background-color: red;  
      }

      .dong{-webkit-animation:xin 1s ease 0s infinite alternate;}

      @-webkit-keyframes xin{  
         from{  
            width: 100px;  
            height: 100px;  
            box-shadow: 20px 20px 30px 5px yellow;  
         }  
         to{  
            width: 125px;  
            height: 125px;  
            box-shadow: 20px 20px 40px 5px #FFBBFF;

         }  
      }  
   </style>  
</head>  
<body>  
   <a href="" class="yige"></a>  
   <div class="box">  
      <div class="yuan1"></div>  
      <div class="yuan2"></div>  
      <div class="zhengfang"></div>  
   </div>  
</body>  
</html>  
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">  
   $('.box').mouseover(function(){  
      $('.yuan1,.yuan2,.zhengfang').addClass("dong")  
   });  
   $('.box').mouseout(function(){  
      $('.yuan1,.yuan2,.zhengfang').removeClass("dong")  
   })  
</script>

<ins class="adsbygoogle"></ins>

转载于:https://my.oschina.net/ndweb/blog/674519

原文地址：https://blog.csdn.net/weixin_33835103/article/details/91694422?ops_request_misc=&request_id=86e809fea7e5438eb011285d686a4b82&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-15-91694422-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/8e5f0819adbd4cd4a75f5607e4beb59d

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复