CSS 画一个心
效果图:
实现原理:
可以把这个心分为两部分,两个长方形,分别设置 border-radius,transform: rotate() 。
设置属性之后
再次添加一个,设置相反的 rotate
设置其中一个的 left 值 就成了
为了看起来有立体感,可以设置左边的 box-shadow 。
CSS
body{
height: 100%;
margin:;
}
div{
width: 1px;
height: 1px;
margin: 300px auto;
position: relative;
animation: tiaodong .8s linear infinite;
}
div::before,div::after{
content: '';
position: absolute;
width: 80px;
height: 120px;
background-color: red;
border-radius: 50px 50px 0 0;
}
div::after{
left: 28px;
transform: rotate(45deg);
}
div::before{
transform: rotate(-45deg);
box-shadow: -5px -5px 10px grey;
}
@keyframes tiaodong{
0%{
transform: scale(1);
}
50%{
transform: scale(1.05);
}
100%{
transform: scale(1);
}
}
HTML
<div></div>
用的是 after 和 before 伪元素实现的,没有考虑兼容性,在 IE 10 之前就显示不出来了。
可以用 span 元素替换掉 after 和 before 解决掉。
需要加上: -ms-transform 。
若是用 span 元素画的话,需要右边的块设置 z-index 属性。
遇到的问题:
虽然在 IE 下画出来心了,但是动画却做不出来。百度出的方法,并不能解决。暂时搁置
求指点迷津QAQ
CSS 画一个心的更多相关文章
- 用C语言画一个心
用C语言图形库画一个心 --环家伟 这次我教大家用代码画一个心,这样你们就可以送给你们的女(男)朋友了.没找到对象的也可以用来表白啊. 1.首先,我去百度找了心形线的函数,如下: 2. 联系高中的数 ...
- 使用css画一个箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- css画一个提示框
用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- div+css画一个小猪佩奇
用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...
- Effective前端3:用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- 用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- Effective前端1---chapter 2 用CSS画一个三角形
1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...
随机推荐
- java在编译期和运行期都做了什么
Java对象内存存储,引用传递,值传递详细图解 java对象在内存中的分配 编译过程: 编译器把一种语言规范转化为另一种语言规范的这个过程需要哪些步骤?回答这个问题需要参照<编译原理>,总 ...
- 查看服务器CPU的个数、CPU的核数、多核超线程数、机器硬件型号
这里有几个概念: 1.一台物理机的物理CPU的个数 2.一个CPU上的核数 3.一个核上面支持的线程数 有下面的计算公式: # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 ...
- Using Time Profiler in Instruments
要用 release 版本来profile 概述 time profile 是使用采样的方法来统计,而不是记录每一个方法调用的起始和结束,采样间隔是 1 ms.  在上图中,main 函数被采样了 ...
- JavaScript父子页面之间的相互调用
父页面: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>< ...
- ASP.NET 下使用特定身份完成windows服务的功能操作
今天部署项目的发现一个问题: 在本地Win7系统下利用Web页面完成Windows服务的功能操作(启动.停止.安装.卸载)都是正常的,而部署到Server2008系统下,再使用Web页面完成windo ...
- django框架--路由系统
目录 一.路由系统理解 二.路由系统功能划分 三.路由表创建 创建工具 二级路由 路由别名 动态路由及重定向 四.自定义错误页面 五.图示路由系统在框架中的定位 六.路由系统的进阶想法 一.路由系统理 ...
- (转) Linux(Centos7)yum安装最新mysql
原文:http://blog.csdn.net/gebitan505/article/details/54613549 环境 CentOS 7.1 (64-bit system) MySQL 5.6. ...
- LogCat里的错误提示 FATAL EXCEPTION: main
程序一运行闪退. 原因为包冲突,将冲突的包删除即可.
- protocol buffers的编码原理
protocol buffers使用二进制传输格式传递消息,因此相比于xml,json来说要轻便很多. 示例:假设定义了一个Message message Test1 { required int32 ...
- 关于Sqlite的一个demo
直接上代码: class DBHelperSqlite { ILog logger = LogManager.GetLogger(System.Reflection.MethodBase.GetC ...