如何利用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做一个盖章图标


基础教程推荐
猜你喜欢
- vuejs获取一周的时间(就是前七天) 2024-12-08
- 前端(HTML)+后端(Django)+数据库(MySQL):用户注册及登录演示 2023-10-26
- CSS或者JS实现鼠标悬停显示另一元素 2023-12-29
- 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题 2022-12-17
- 快速获取Ajax通信对象的方法 2023-02-01
- CSS属性中Display与Visibility区别分析 2024-01-23
- CSS设置列表样式和创建导航菜单实现代码 2023-12-28
- vue打包文件存放位置 2023-10-08
- 【vue】v-for倒序显示/JSON数据倒序 2023-10-08
- HTML 向 XHTML1.0 兼容性指导 2022-11-06