心形陀螺案例css3
2024-09-04 01:27:31
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background:#000;
}
.box{
width:300px;
height:300px;
margin:200px auto;
-webkit-perspective:1500px;
position:relative;
}
.div{
width:150px;
height:250px;
position:absolute;
transform-style:preserve-3d;
animation:name 2s linear infinite;
transform:rotateY(0deg);
}
@-webkit-keyframes name {
from{
transform:rotateY(0deg);
}
to{
transform:rotateY(360deg);
}
}
.div>div{
width:140px;
height:240px;
position:absolute;
border-width:10px 10px 0 0;
border-radius:50% 50% 0% 50%;
border-color:red;
border-style:solid;
}
.div>div:nth-of-type(1){
transform:rotateY(0deg) rotateZ(45deg) translateX(50px);
}
.div>div:nth-of-type(2){
transform:rotateY(450deg) rotateZ(45deg) translateX(50px);
}
.div>div:nth-of-type(3){
transform:rotateY(90deg) rotateZ(45deg) translateX(50px);
}
.div>div:nth-of-type(4){
transform:rotateY(135deg) rotateZ(45deg) translateX(50px);
}
.div>div:nth-of-type(5){
transform:rotateY(180deg) rotateZ(45deg) translateX(50px);
}
.div>div:nth-of-type(6){
transform:rotateY(225deg) rotateZ(45deg) translateX(50px);
}
.div>div:nth-of-type(7){
transform:rotateY(270deg) rotateZ(45deg) translateX(50px);
}
.div>div:nth-of-type(8){
transform:rotateY(315deg) rotateZ(45deg) translateX(50px);
}
.div>div:nth-of-type(9){
transform:rotateY(360deg) rotateZ(45deg) translateX(50px);
}
</style>
</head>
<body>
<div class="box">
<div class="div">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
最新文章
- S5PV210_流水灯
- ecshop修改后台访问地址
- Mybatis 示例之 SelectKey
- winform的datagridview单元格输入限制和右键单击datagridview单元格焦点跟着改变
- 使用SchemaSpy逆向工程生成数据库依赖关系使用SchemaSpy工具可以快速的从数据库中得到
- h5拖放-上传图片预览功能
- HW5.6
- sql sever 随机查询
- 【LeetCode练习题】Minimum Depth of Binary Tree
- SSH整合方案2
- android 泰国/缅甸语/捷克较低，Contacts联系出现精神错乱之类的问题清单
- Web前端学习（1）：上网的过程与网页的本质
- Does Java pass by reference or pass by value?(Java是值传递还是引用传递) - 总结
- 我的前端故事----来聊聊怎么写react-native上的样式吧
- Linux网络基本网络配置方法介绍
- 基于USB网卡适配器劫持DHCP Server嗅探Windows NTLM Hash密码
- js 获取二级域名
- [算法]Collebarative Filtering
- ACM-ICPC 2018 南京赛区网络预赛 Solution
- [leetcode]26. Remove Duplicates from Sorted Array有序数组去重(单个元素只出现一次)