簡單css --七夕了，你還不去表白

avwu 發(fā)布于2019-08-28 17:56 / 2500人閱讀

摘要：聽說明天七夕了我什么都不知道，牛郎都跟他家牛在一起了。單身狗表示。。。前一段時(shí)間看過用花愛心的，吃完飯我也做一下嘗試。一個(gè)，一個(gè)偽類，旋轉(zhuǎn)合體效果圖效果鏈接好嘞，找人表白去

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

單身狗表示。。。寫代碼吧。

.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;
}

前一段時(shí)間看過用css花愛心的，吃完飯我也做一下嘗試。
一個(gè)div，一個(gè)偽類，旋轉(zhuǎn)合體~

效果圖：

效果鏈接>>

好嘞，找人表白去~

云服務(wù)器 GPU云服務(wù)器 css簡單簡單css css引入css css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110905.html

相關(guān)文章

H5多列布局

摘要：多列布局基本概念多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)，可以有效地對頁面的布局字體顏色背景和其它效果實(shí)現(xiàn)更加精確的控制。多列布局基本概念 1、多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數(shù)量 /*列數(shù)*/ -webkit-column-count: 3; /*分割線*/ -webkit...

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

摘要：多列布局基本概念多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)，可以有效地對頁面的布局字體顏色背景和其它效果實(shí)現(xiàn)更加精確的控制。多列布局基本概念 1、多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數(shù)量 /*列數(shù)*/ -webkit-column-count: 3; /*分割線*/ -webkit...

mayaohua 2019-08-02 11:08 評論0 收藏0
簡單幾步用純CSS3實(shí)現(xiàn)3D翻轉(zhuǎn)效果

摘要：作為前端開發(fā)人員的必修課，翻轉(zhuǎn)能帶我們完成許多基本動效，本期我們將用實(shí)現(xiàn)翻轉(zhuǎn)效果第一步非常簡單，我們簡單畫個(gè)演示方塊，為其添加和屬性本示例均使用語法我們看一看這時(shí)候的效果這里需要注意的是屬性要寫在上而不是上，如果只在上寫，則鼠標(biāo)移出時(shí)并沒有作為前端開發(fā)人員的必修課，CSS3翻轉(zhuǎn)能帶我們完成許多基本動效，本期我們將用CSS3實(shí)現(xiàn)hover翻轉(zhuǎn)效果~ 第一步非常簡單，我們簡單畫1個(gè)演示方塊，為其...

zhoutk 2019-04-23 11:43 評論0 收藏0
最簡單的px轉(zhuǎn)rem預(yù)處理方法

摘要：如果你使用作為你的預(yù)處理的工具，那么是你使用最簡單處理轉(zhuǎn)工具，使用方法如此簡單首先安裝工具然后只要在你的文件引用就可以里工具將編譯成并預(yù)處理將轉(zhuǎn)換成上面內(nèi)容輸出為選擇使用和設(shè)置初始值默認(rèn)你可以設(shè)置它。 showImg(https://segmentfault.com/img/remote/1460000004847061); showImg(https://segmentfault.c...

Cristic 2019-08-30 12:57 評論0 收藏0
CSS動畫優(yōu)雅降級的簡單總結(jié)

摘要：轉(zhuǎn)載自動畫相關(guān)屬性兼容性兼容性兼容性可以看到動畫在這里主要討論及以下完全不支持，由于只支持非優(yōu)雅降級初始化元素動畫前樣式及加入動畫現(xiàn)代瀏覽器下移開元素下移開元素透明元素，是元素不透明主要功臣自然是因?yàn)椴恢С肿匀粫雎缘?，所以也? 轉(zhuǎn)載自：http://waynecz.github.io/2016... CSS動畫相關(guān)屬性 transition：兼容性??showImg(https://...

QiShare 2019-08-23 17:07 評論0 收藏0
CSS動畫優(yōu)雅降級的簡單總結(jié)

摘要：轉(zhuǎn)載自動畫相關(guān)屬性兼容性兼容性兼容性可以看到動畫在這里主要討論及以下完全不支持，由于只支持非優(yōu)雅降級初始化元素動畫前樣式及加入動畫現(xiàn)代瀏覽器下移開元素下移開元素透明元素，是元素不透明主要功臣自然是因?yàn)椴恢С肿匀粫雎缘?，所以也? 轉(zhuǎn)載自：http://waynecz.github.io/2016... CSS動畫相關(guān)屬性 transition：兼容性??showImg(https://...

archieyang 2019-08-29 18:41 評論0 收藏0