圆角这东西越看越好看，怪不得小米logo这么贵制作，给人一种舒适与安全的感觉

html 源码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>lzy</title><link rel="stylesheet" type="text/css" href="css/手机相册logo.css"/></head><body><div class="he"><div class="xiao-1"></div><div class="xiao-2"><div class="xiao-2-1"></div></div></div><div class="he-2"><div class="he-2-1"></div><div class="he-2-1"><div class="he-2-1-1"></div></div></div><div class="he-3"><div class="he-3-1"></div><div class="he-3-2"></div><div class="he-3-3"></div></div><div class="he-4"><div class="he-4-1"></div><div class="he-4-2"></div><div class="he-4-3"></div></div><div class="he-5"><div class="he-5-1"><div class="he-5-1-1"></div><div class="he-5-1-2"><div class="he-5-1-2-1"></div></div></div><div class="he-5-2"></div></div><div class="he-6"><div class="he-6-1"></div><div class="he-6-2"></div></div></body>
</html>

css 源码

*{margin: 0;padding: 0;
}body{display: flex;justify-content: space-around;align-items: center;height: 100vh;flex-wrap: wrap;background: #dadada;
}.he{width: 200px;height: 200px;box-sizing: border-box;border-radius: 50px;background-color: #ff2f2f;overflow: hidden;
}.xiao-1{width: 30px;height: 30px;box-sizing: border-box;background-color: #ffe24f;border-radius: 50%;position: relative;top: 40px;left: 40px;}.xiao-2{width: 200px;height: 200px;box-sizing: border-box;background: linear-gradient(rgba(255, 255, 255, 0.6),rgba(255, 47, 47,0.8));display: flex;justify-content: center;align-items: center;border-radius: 50%;position: relative;top: 60px;left: 60px;
}.xiao-2-1{width: 120px;height: 120px;box-sizing: border-box;background: linear-gradient(rgba(255, 255, 255, 0.4),rgba(255, 47, 47,0.8));border-radius: 50%;
}.he-2{width: 200px;height: 200px;box-sizing: border-box;border-radius: 50px;background-color: #b0b0b0;overflow: hidden;position: relative;display: flex;justify-content: center;align-items: center;
}.he-2-1{position: absolute;width: 100px;height: 100px;box-sizing: border-box;background-color: #fff;border-radius: 10px;
}.he-2-1:nth-child(2){transform: rotate(45deg);display: flex;justify-content: center;align-items: center;
}.he-2-1-1{width: 30px;height: 30px;box-sizing: border-box;background-color: #b0b0b0;border-radius: 50%;
}.he-3{width: 200px;height: 200px;box-sizing: border-box;background-color: #007bff;border-radius: 50px;overflow: hidden;position: relative;display: flex;justify-content: center;align-items: center;
}.he-3-1{width: 80px;height: 80px;box-sizing: border-box;border-radius: 50%;background: rgba(255,255,255,0.7);position: absolute;left: 50px;z-index: 2;
}
.he-3-2{width: 60px;height: 60px;box-sizing: border-box;border-radius: 50%;background: rgba(255,255,255);position: absolute;left: 90px;top: 75px;z-index: 3;
}.he-3-3{width: 40px;height: 40px;box-sizing: border-box;background-color: #ffe24f;border-radius: 50%;position: absolute;top: 60px;left: 100px;z-index: 1;
}.he-4{width: 200px;height: 200px;box-sizing: border-box;background-color:  #6ee89f;border-radius: 50px;overflow: hidden;position: relative;display: flex;justify-content: center;align-items: center;
}.he-4-1{width: 60px;height: 90px;box-sizing: border-box;background: rgba(255,255,255,0.7);transform: skewY(10deg);border-radius: 5px 0 0 5px;
}.he-4-2{width: 60px;height: 90px;box-sizing: border-box;background: rgba(255,255,255,0.7);transform: skewY(-10deg);border-radius: 0px 5px 5px 0px;
}.he-4-3{position: absolute;width: 40px;height: 90px;box-sizing: border-box;background: rgba(255,255,255);transform: skewY(-25deg);border-radius: 0px 5px 5px 0px;left: 100px;top: 50px;
}
.he-5{width: 200px;height: 200px;box-sizing: border-box;background-color: #ffffff;border-radius: 50px;overflow: hidden;position: relative;display: flex;justify-content: center;align-items: center;
}.he-5-1{width: 120px;height: 90px;box-sizing: border-box;background: #dedede;border-radius: 10px;z-index: 3;display: flex;justify-content: center;align-items: center;
}.he-5-2{width: 50px;height: 20px;box-sizing: border-box;position: absolute;background: #aaaaaa;top: 48px;z-index: 1;
}.he-5-1-1{width: 10px;height: 10px;box-sizing: border-box;background-color: #fff;border-radius: 50%;position: absolute;top: 60px;left: 45px;
}.he-5-1-2{width: 50px;height: 50px;border-radius: 50%;position: absolute;background-color: #000012;display: flex;justify-content: center;align-items: center;
}.he-5-1-2-1{width: 30px;height: 30px;box-sizing: border-box;border-radius: 50%;background-color: #666;
}.he-6{width: 200px;height: 200px;box-sizing: border-box;background-color:  #6ee89f;border-radius: 50px;overflow: hidden;position: relative;display: flex;justify-content: center;align-items: center;
}.he-6-1{position: absolute;width: 100px;height: 90px;box-sizing: border-box;background: #fff;border-radius: 20px 20px 20px 0;top: 65px;left: 40px;
}
.he-6-2{position: absolute;width: 100px;height: 90px;box-sizing: border-box;background: #fff;border-radius: 20px 20px 0px 20px;top: 40px;left: 70px;opacity: 0.8;
}

【css实现 oppo 图标】相关推荐

css中的代码图标,认识CSS中字体图标(示例代码)
前端之HTML,CSS(十一) 字体图标使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...
css 字体字体图标_CSS基础知识：了解字体
css 字体字体图标 In this tutorial, we'll be learning about working with fonts in CSS! 在本教程中,我们将学习有关在CSS中使用 ...
react CSS实现箭头图标
参考链接: css3实现小箭头,各种图形 https://blog.csdn.net/tangtang5963/article/details/51490107 针对于三角形图标,以前的做法基本上是以 ...
html上下箭头动态效果,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果...
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
CSS绘制三角形图标
CSS绘制三角形图标目录 1CSS绘制三解形图标原理 2 页面效果 3 HTML结构 4 CSS样式 1CSS绘制三解形图标原理对内容容器进行相对定位,对内容容器的伪元素:before和:after ...
css 让图标上下跳,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
css动画--使用图标进行顺时针与逆时针转圈
css动画–使用图标进行顺时针与逆时针转圈说明:上面顺时针,下面图逆时针代码如下: <template><div style="width:1300px;height: ...
css加号图标_一步步打造自己的纯CSS单标签图标库
原标题:一步步打造自己的纯CSS单标签图标库作者:深海鱼在掘金原文:https://juejin.im/post/5a1c21c1f265da430b7af6e5 图标作为网页设计中的一部分,其在 ...
css写√的图标_用CSS来制作图标
想知道如何利用CSS来制作图标吗?并且只使用一个标签的情况下,不能使用伪元素哦! 在利用CSS制作图标时,经常用到border边框,所以,先看看边框的相关知识. 1.藏在border中的不能说的秘密 ...

【css实现 oppo 图标】

圆角这东西越看越好看，怪不得小米logo这么贵制作，给人一种舒适与安全的感觉

html 源码

css 源码

【css实现 oppo 图标】相关推荐

最新文章

热门文章