如何利用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做一个盖章图标
基础教程推荐
猜你喜欢
- CSS3中currentColor关键字的妙用 2024-03-31
- 总结JavaScript中布尔操作符||与&&的使用技巧 2023-12-03
- 前端必会的Webpack优化技巧 2024-01-22
- 关于 html:Embedding too small on mobile (bandcamp) 2022-09-21
- 通过JavaScript实现动态圣诞树详解 2023-08-12
- 使用AngularJS2中的指令实现按钮的切换效果 2022-07-07
- CSS在UL LI的样式用法(UI上的应用) 2023-12-20
- css教程:选择合适的、有意义的元素描述内容 2024-04-26
- css布局模型全面了解 2024-01-24
- ajax实现城市三级联动 2023-02-24