介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>纯css画一下心& lt;/title>
& lt; style>
身体{
高度:100%;
保证金:0;
}
.demo {
宽度:1 px;
身高:1 px;
保证金:300 px的汽车;
位置:相对;
动画:tiaodong。8线性无限;
}
{后.demo:之前,.demo::
内容:& # 39;& # 39;;
位置:绝对的;
宽度:80 px;
身高:120 px;
背景颜色:红色;
border - radius: 50 px 50 px 0 0;
}
{后.demo::
左:28 px;
变换:旋转(45度);
}
{前.demo::
变换:旋转(-45度);
不必:5 px 5 px 10 px灰色;
}
@keyframes tiaodong {
0% {
变换:规模(1);
}
50% {
变换:规模(1.05);
}
100% {
变换:规模(1);
}
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癲emo"祝辞& lt;/div>
& lt;/body>
& lt;/html>
小编给大家分享一下怎么用纯css画一个跳动的心,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
先给大家看效果图:
实现原理:
1。可以把这个心分为两部分,两个长方形;
分别设置border - radius;
让两个图形重合后,分别设置变换:旋转(),设置的旋转()值要相反,一个正值,一个负值;
在设置其中一个的左值就成了
为了看起来有立体感,可以设置左边的不必阴影;
再配合@keyframes,变换属性,实现跳动效果。
代码实例:
用的是之前和之后伪元素实现的,没有考虑兼容性,在IE 10之前就显示不出来了。
可以用跨度元素替换掉之前和之后解决掉。
需要加上:-ms-transform。
若是用跨元素画的话,需要右边的块设置z - index属性。
看完了这篇文章,相信你对怎么用纯css画一个跳动心有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
