为什么80%的码农都做不了架构师？>>>   

注意引入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>

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

CSS3特效,跳动的心相关推荐

  1. Css3 会跳动的心

    开发工具与关键技术:DW scale()缩放 撰写时间:2019年2月9日 先做一个简单的?图,再利用Css3的动画scale()函数让元素根据中心原点对对象进行缩放,这样就可以实现一颗会跳动的心了. ...

  2. 用CSS3咋写“跳动的心”？

    CSS3写跳动的心需要哪些样式(属性)? 1.动画样式: 触发式动画:①触发条件: :hover :checked :active②动画的参数: transition-duration:5s;--时间 ...

  3. Java CSS3：（七）CSS3 中常用的样式（跳动的心）

    CSS3 中常用的样式-跳动的心 做一个跳动的心 做一个跳动的心 <!DOCTYPE html> <html><head><meta charset=&quo ...

  4. css3爱心跳动动画js特效代码

    下载地址 css3爱心跳动动画特效代码 dd:

  5. CSS3绘制跳动的橙子动画js特效

    下载地址 CSS3绘制跳动的橙子动画特效,两个跳动的橙子和切了一半滴着橙汗的橙子. dd:

  6. 分享8款最新超酷HTML5/CSS3特效及源码

    这次我们整理了8款最新的HTML5/CSS3特效及源码,这些特效包括HTML5文字特效.HTML5焦点图特效.CSS3/HTML5进度条特效等类型,一起来看看吧. 1.CSS3/jQuery全屏立体焦 ...

  7. 8款最新超酷HTML5/CSS3特效及源码

    这次我们整理了8款最新的HTML5/CSS3特效及源码,这些特效包括HTML5文字特效.HTML5焦点图特效.CSS3/HTML5进度条特效等类型,一起来看看吧. 1.CSS3/jQuery全屏立体焦 ...

  8. CSS3特效之转化（transform）和过渡（transition）

    CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...

  9. css3轮播不用jpuery_15款效果很酷的最新jQuery/CSS3特效

    很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换 一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...

  10. css 跳动的心_如何用纯CSS为您的情人打造一颗跳动的心

    css 跳动的心 Each year on February 14th, many people exchange cards, candies, gifts or flowers with thei ...

最新文章

  1. Spring Cloud -Zuul
  2. springboot 替换tomcat_Spring Boot实战 之 解剖HelloWorld原型应用
  3. 如何看待今年考研分数线大涨
  4. OpenCV简单的几何绘图的实例(附完整代码)
  5. 第一章--计算机系统知识
  6. 这个时代，给了我们年轻人太多
  7. 一个路由器两个网段互通_如何判断两个IP地址是否在同一个网段？什么是子网掩码？...
  8. 十二. python面向对象主动调用其他类
  9. 用vsftp建立个人ftp站点
  10. webapi 重复提交问题
  11. PS滤镜插件工具箱Mac版：Nik Collection 4
  12. 数据库连接参数设置，用户登录，密码修改，权限设置，金蝶KIS旗舰版安卓盘点机PDA
  13. 快手视频以及评论获取
  14. c语言随机抽奖小程序,基于C#实现简单的随机抽奖小程序
  15. 人民币金额大写转小写
  16. 全新版大学英语综合教程第二册学习笔记（原文及全文翻译）——5A - True Height（真正的高度）
  17. 华硕主板怎么进入bios
  18. ajax无法载入datagrid,easyui datagrid加载超时
  19. ubuntu桌面出现问题，重启x桌面方法
  20. ceph存储 pg归置组处于stuck以及degraded状态解决方案

热门文章

  1. Android 四大组件学习之Server一
  2. 中职高考计算机试题及答案,中职高考计算机试题及答案
  3. cut最后几位 shell_shell中字符串截取命令：cut，printf，awk，sed
  4. P-Associated-URI
  5. java.lang.UnsupportedClassVersionError : Unsupported major.minor version 52.0
  6. js怎么实现数组里的数据相加_C++如何实现大整数相加
  7. jdbc连接mysql数据库 工作流程_jdbc连接数据库流程图
  8. C语言数字3转变字符 3 程序,C语言重点知识点
  9. go build不从本地gopath获取_Go语言实战打包和工具链
  10. C语言中使输入的字符串反序输出,C语言： 写一函数，使输入的一个字符串按反序存放，在主函数中输入和输出字符串。...