摘要:聽說明天七夕了我什么都不知道,牛郎都跟他家牛在一起了。單身狗表示。。。前一段時間看過用花愛心的,吃完飯我也做一下嘗試。一個,一個偽類,旋轉合體效果圖效果鏈接好嘞,找人表白去
聽說明天七夕了(我什么都不知道,牛郎都跟他家牛在一起了)。
單身狗表示。。。寫代碼吧。
</>復制代碼
.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,一個偽類,旋轉合體~
效果圖:
效果鏈接>>
好嘞,找人表白去~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/110905.html
摘要:作為前端開發人員的必修課,翻轉能帶我們完成許多基本動效,本期我們將用實現翻轉效果第一步非常簡單,我們簡單畫個演示方塊,為其添加和屬性本示例均使用語法我們看一看這時候的效果這里需要注意的是屬性要寫在上而不是上,如果只在上寫,則鼠標移出時并沒有作為前端開發人員的必修課,CSS3翻轉能帶我們完成許多基本動效,本期我們將用CSS3實現hover翻轉效果~ 第一步非常簡單,我們簡單畫1個演示方塊,為其...
摘要:如果你使用作為你的預處理的工具,那么是你使用最簡單處理轉工具,使用方法如此簡單首先安裝工具然后只要在你的文件引用就可以里工具將編譯成并預處理將轉換成上面內容輸出為選擇使用和設置初始值默認你可以設置它。 showImg(https://segmentfault.com/img/remote/1460000004847061); showImg(https://segmentfault.c...
摘要:轉載自動畫相關屬性兼容性兼容性兼容性可以看到動畫在這里主要討論及以下完全不支持,由于只支持非優雅降級初始化元素動畫前樣式及加入動畫現代瀏覽器下移開元素下移開元素透明元素,是元素不透明主要功臣自然是因為不支持自然會忽略掉,所以也在 轉載自:http://waynecz.github.io/2016... CSS動畫相關屬性 transition:兼容性??showImg(https://...
摘要:轉載自動畫相關屬性兼容性兼容性兼容性可以看到動畫在這里主要討論及以下完全不支持,由于只支持非優雅降級初始化元素動畫前樣式及加入動畫現代瀏覽器下移開元素下移開元素透明元素,是元素不透明主要功臣自然是因為不支持自然會忽略掉,所以也在 轉載自:http://waynecz.github.io/2016... CSS動畫相關屬性 transition:兼容性??showImg(https://...
閱讀 3436·2023-04-25 18:14
閱讀 1534·2021-11-24 09:38
閱讀 3247·2021-09-22 14:59
閱讀 3065·2021-08-09 13:43
閱讀 2570·2019-08-30 15:54
閱讀 567·2019-08-30 13:06
閱讀 1550·2019-08-30 12:52
閱讀 2724·2019-08-30 11:13