CSS3 奶酪图标 - 踏得网

CSS Cheese Icon

css3, food, icon

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1138
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #87CEFA;
    color: #fff;
    font-family: 'Helvetica', sans-serif;
}
.heading {
    color: #fff;
    font-size: 20px;
    font-weight: 100;
    margin-top: 50px;
    text-align: center;
}
.cheese {
    width: 75px;
    height: 75px;
    background: linear-gradient(to bottom, #f7d576 0%, #f9cb42 100%);
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, .1);
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.uno {
    width: 25px;
    height: 25px;
    position: absolute;
    left: 20px;
    bottom: 20px;
}
.dos {
    width: 15px;
    height: 15px;
    position: absolute;
    right: 10px;
    top: 5px;
}
.tres {
    width: 10px;
    height: 10px;
    position: absolute;
    right: 5px;
    bottom: 20px;
}
.cuatro {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 5px;
    top: 5px;
}
.cinco {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 15px;
    bottom: 5px;
}
.hole {
    background: linear-gradient(to bottom, #FEAB37 0%, #F9CB42 80%);
    border-radius: 100%;
}

HTML

CSS Cheese Icon

css3, food, icon

编辑器支持Emmet

快捷键

CSS Cheese Icon

css3, food, icon

CSS3 SVG 老鹰动画图标

CSS3 一款中间带图标的响应式分隔线

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：