如何利用css3做一个盖章图标,下面编程教程网小编给大家详细介绍一下实现代码!
css3代码:
html,body {
width:100vw;
height:100vh;
margin:0;
padding:0;
}
.circle {
display:flex;
align-items:center;
justify-content:center;
position:absolute;
right:30px;
top:30px;
width:50px;
height:50px;
font-size:12px;
color:gray;
border-radius:50%;
border:2px solid rgba(0,0,0,0.2);
transform:scale(1) rotateZ(-35deg);
transition:all;
animation:rollingover 0.6s ease-in;
}
@keyframes rollingover {
0% {
opacity:0.1;
transform:scale(1) rotateZ(-35deg) rotateY(0deg);
}
50% {
opacity:0.5;
transform:scale(1.5) rotateZ(-35deg) rotateY(180deg);
}
100% {
opacity:1;
transform:scale(1) rotateZ(-35deg) rotateY(0deg);
}
}
.circle::after {
content:"";
display:block;
position:absolute;
width:40px;
height:40px;
border-radius:50%;
border:2px dotted rgba(0,0,0,0.2);
}
新建一个div.circle
以上是编程学习网小编为您介绍的“如何利用css3做一个盖章图标”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:如何利用css3做一个盖章图标
基础教程推荐
猜你喜欢
- vue引入html2canvas插件实现图片嵌入div展示下载 2023-10-08
- Vue项目安装(前端)+Vuex指南 2023-10-08
- 关于ajax对象一些常用属性、事件和方法大小写比较常见的问题总结 2022-10-17
- HTML5打开手机扫码功能及优缺点 2022-09-16
- javascript实现弹幕墙效果 2023-12-08
- 网页简历结构和语义信息 hResume微格式 2024-01-16
- CSS清除浮动大全共8种方法 2023-12-19
- HTML5不支持标签和新增标签详解 2023-12-20
- Vue中实现过渡动画效果实例详解 2024-03-10
- css绘制透明三角形 2024-01-16
