简单css --七夕了，你还不去表白

avwu 发布于2019-08-28 17:56 / 2478人阅读

摘要：听说明天七夕了我什么都不知道，牛郎都跟他家牛在一起了。单身狗表示。。。前一段时间看过用花爱心的，吃完饭我也做一下尝试。一个，一个伪类，旋转合体效果图效果链接好嘞，找人表白去

听说明天七夕了（我什么都不知道，牛郎都跟他家牛在一起了）。

单身狗表示。。。写代码吧。

.heart{
    width: 150px;
    height: 100px;
    background-color: #E76464;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    border-top-left-radius: 50px 50px;
    border-bottom-left-radius: 50px 50px;
    position: relative;
    margin-top: 200px;
}
.heart::after{
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    content: " ";
    display: block;
    position: absolute;
    width: 150px;
    height: 100px;
    background-color: #E76464;
    border-top-right-radius: 50px 50px;
    border-bottom-right-radius: 50px 50px;
    top: -25px;
    right: -25px;
}

前一段时间看过用css花爱心的，吃完饭我也做一下尝试。
一个div，一个伪类，旋转合体~

效果图：

效果链接>>

好嘞，找人表白去~

云服务器 GPU云服务器 css简单简单css css引入css css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110905.html

H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

Jingbin_ 2019-08-29 16:15 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

mayaohua 2019-08-02 11:08 评论0 收藏0
简单几步用纯CSS3实现3D翻转效果

摘要：作为前端开发人员的必修课，翻转能带我们完成许多基本动效，本期我们将用实现翻转效果第一步非常简单，我们简单画个演示方块，为其添加和属性本示例均使用语法我们看一看这时候的效果这里需要注意的是属性要写在上而不是上，如果只在上写，则鼠标移出时并没有作为前端开发人员的必修课，CSS3翻转能带我们完成许多基本动效，本期我们将用CSS3实现hover翻转效果~ 第一步非常简单，我们简单画1个演示方块，为其...

zhoutk 2019-04-23 11:43 评论0 收藏0
最简单的px转rem预处理方法

摘要：如果你使用作为你的预处理的工具，那么是你使用最简单处理转工具，使用方法如此简单首先安装工具然后只要在你的文件引用就可以里工具将编译成并预处理将转换成上面内容输出为选择使用和设置初始值默认你可以设置它。 showImg(https://segmentfault.com/img/remote/1460000004847061); showImg(https://segmentfault.c...

Cristic 2019-08-30 12:57 评论0 收藏0
CSS动画优雅降级的简单总结

摘要：转载自动画相关属性兼容性兼容性兼容性可以看到动画在这里主要讨论及以下完全不支持，由于只支持非优雅降级初始化元素动画前样式及加入动画现代浏览器下移开元素下移开元素透明元素，是元素不透明主要功臣自然是因为不支持自然会忽略掉，所以也在转载自：http://waynecz.github.io/2016... CSS动画相关属性 transition：兼容性showImg(https://...

QiShare 2019-08-23 17:07 评论0 收藏0
CSS动画优雅降级的简单总结

摘要：转载自动画相关属性兼容性兼容性兼容性可以看到动画在这里主要讨论及以下完全不支持，由于只支持非优雅降级初始化元素动画前样式及加入动画现代浏览器下移开元素下移开元素透明元素，是元素不透明主要功臣自然是因为不支持自然会忽略掉，所以也在转载自：http://waynecz.github.io/2016... CSS动画相关属性 transition：兼容性showImg(https://...

archieyang 2019-08-29 18:41 评论0 收藏0