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

avwu 發布于2019-08-28 17:56 / 2496人閱讀

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

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

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

.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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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