CSS3 Safari 浏览器标识悬停动效

苹果Safari浏览器指南针样式的图标

compass

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: radial-gradient(#e74c3c, #cf000f);
    font-family: "helvetica neue";
}
.wrapper {
    width: 200px;
    /*border:1px solid red;*/
    
    height: 200px;
    margin: 0 auto;
    margin-top: 10%;
    position: relative;
}
.compass {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    background: radial-gradient(#00c1ab, #0a6fd9);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid #eee;
    border-style: dotted;
    box-shadow: 0 0 0 5px #4c77be, 0 0 0 10px #eee;
}
.needleHolder {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 2s;
    -webkit-transform: rotate(45deg);
}
.needleHolder:hover {
    -webkit-transform: rotate(360deg);
}
.north {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 100px solid #d91e18;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.north::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 100px solid #962a1b;
    border-right: 18px solid transparent;
}
.north::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 100px solid #cf000f;
    border-right: 6px solid transparent;
}
.south {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 100px solid #eee;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}
.south::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -100px;
    border-top: 100px solid #95a5a6;
    border-right: 18px solid transparent;
}
.south::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -100px;
    border-top: 100px solid #dadfe1;
    border-right: 6px solid transparent;
}
h2 {
    text-align: center;
    color: #eee;
    margin-top: 5%;
}

HTML

苹果Safari浏览器指南针样式的图标

compass

编辑器支持Emmet

快捷键

苹果Safari浏览器指南针样式的图标

compass

HTML5 CSS3指南针（罗盘）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：