如何利用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-cli脚手架build目录中的dev-server.js配置文件 2024-03-09
- 浅析location.href跨窗口调用函数 2024-01-17
- jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明 2024-01-16
- javascript判断网页是关闭还是刷新 2024-03-09
- JavaScript跨域方法汇总 2024-01-16
- 老生常谈css中float的用法 2024-02-07
- 纯CSS如何禁止用户复制网页的内容 2024-02-25
- layer.open父页面传参到子页面 2022-10-05
- AJAX请求是否真的不安全?谈一谈Web安全与AJAX的关系 2023-02-15
- vue实现滚动条始终悬浮在页面最下方 2024-01-04