用css实现爱心❤

作者: 陌上桑_浅 | 来源:发表于2019-07-08 18:05 被阅读0次

用css实现爱心❤
html5的video全屏作为背景的方法
微信小程序自定义炫酷的loading加载动画
2018-09-03用CSS实现表格样式
一行代码实现太极图(阴阳八卦)
CSS深入浅出-学习思路
css3的一些简单效果笔记
自己练习的css动画（单标签）
CSS太极和动画
css3实现图片横向无缝滚动的效果

html代码

<div class="heart"></div>

css

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

效果

图片.png

用css实现爱心❤
html代码 css 效果
html5的video全屏作为背景的方法
直接用css来实现代码如下：
微信小程序自定义炫酷的loading加载动画
1、实现效果 2.实现原理 animation+纯css写爱心，五角星等 3.完整代码 loading动画持续更新...
2018-09-03用CSS实现表格样式
用CSS实现的表格样式：代码奉上：效果：
一行代码实现太极图(阴阳八卦)
用CSS实现太极图之前有看别人用CSS实现太极图，写了老长的代码。不过第一次见的时候，还是觉得挺好玩的。CSS如...
CSS深入浅出-学习思路
CSS历史在CSS还没诞生之前，html实现样式效果是用自己的标签实现的，比如
css3的一些简单效果笔记
1 用css实现一段弧形主要是利用border-radius的一个方向 2 用css实现一段半圆 3弧形 4椭圆...
自己练习的css动画（单标签）
筷子css 鸡蛋css 勺子css 爱心css 气泡css 缺四角css 缺圆角css 梯形css 圆盘css 平...
CSS太极和动画
今天完成一个css太极八卦的css效果，用一个div实现css动画效果，并用before和after伪类来实现。 ...
css3实现图片横向无缝滚动的效果
之前实现无缝滚动大多结合js，如今有了css3，就简单多了。HTML: CSS: 另外一个例子：用CSS3实现无...