css3跳动红心
来源:互联网 发布:java 获取每个月一号 编辑:程序博客网 时间:2024/04/27 15:37
原理:利用一个正方形,在他的之前之后的伪类里分别添加一个圆形。通过调整两个圆的位置,来凑成一个爱心。
<div class="heart"></div>
.heart{
width:20px;
height:20px;
position:relative;
background-color:#f00;
}
.heart:before,
.heart:after{
content:"";
width:20px;
height:20px;
background-color:#f00;
position:absolute;
border-radius:100px;
}
.heart:before{
top:0px;
left:-100px;
}
.heart:after{
top:-100px;
left:0px;
然后把这个形状旋转45度,加一个阴影的效果;如果你想要心跳的的感觉就加一个动画。
.heart{
filter:drop-shadow(0px 0px 20px #f00); //css3新属性.只有ie13和安卓4.4才能兼容。和box-shadow差不多的效果也是加阴影的。只不过box-shadow能加内阴影。兼容性更好一点。
transform:rotate(45deg);
animate:test 1s linear infinite;
}
@keyframes test{ //因为这个属性具有兼容性的问题,所以你还需要写一样的,只有这个头部改变的3个@-webkit-keyframes test,@-moz-keyframes test @-ms-keyframes test
0%{transform:rotate(45deg) scale(0.8,0.8);opacity=1; }
25%{transform:rotate(45deg) scale(1,1);opacity=0.8; }
100%{transform:rotate(45deg) scale(0.8,0.8);opacity=1; }
}
- css3跳动红心
- 生成跳动的红心gif图片.m
- css3写倒着跳动的音符
- CSS3写跳动的音频(柱子)
- css3写导入跳动的音乐
- 【CSS3】动画之跳动的心
- css3实现动画-跳动的心
- css3画一个跳动的心
- 一颗跳动的心(css3)
- css3 绘图 (跳动的心 和太极图)
- CSS3使用animation实现一个类音量跳动加载图标
- CSS3 calc实现滚动条出现页面不跳动
- 用css3动画来实现物体上下跳动的效果
- CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动
- 南方都市报:红心照耀MSN
- 用Mathematica画红心
- 猜红心小游戏
- CSS写大叉和红心
- Maven安装与配置,整合Eclipse
- jsp页面初始化日期格式
- (转)Android IntentService完全解析 当Service遇到Handler
- 用户登录记住密码
- 24点游戏(C语言)
- css3跳动红心
- square869120Contest #4 E
- BOS开发部分问题解决办法
- 【2017/4/12】centos6.5下静默安装oracle11g
- 使用selenium+BeautifulSoup+正则表达式下载公众号我要whatyouneed文章里的音乐
- 文章标题
- 在Amazon EC2中挂载EBS作为永久存储
- java的System.getProperty()方法可以获取的值
- 给openwrt增加sftp,方便传输文件 并编译进固件