CSS3:3D环绕实现
CSS3：3D环绕实现篇
废话不多说，直接给大家看效果：[不仅有背景，还有音乐]
大神请绕道：小白请继续往下看：
是不是心动了呢，心动不如行动：代码在手，天下我有，表白利器可不要错过了。
HTML,CSS代码都在下方，至于图片的话就不在这里粘贴了，把图片路径改成自己喜欢的就可以了。
源代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D播放器</title> <style> *{ margin: 0;padding: 0; } body{ background-size: cover;background:url("images/image10/bg.jpg") center top;background-repeat: no-repeat;overflow: hidden; } ul{ width: 200px;height: 200px;position: absolute;top: 400px;left: 20%;margin-left: -100px;transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg);animation: play 6s linear 0s infinite normal; } ul li { list-style: none;width: 200px;height: 200px;line-height: 200px;font-size: 60px;text-align: center;position: absolute;top: 0; left: 0; } ul li img{ width: 200px;height: 200px;border: 5px solid skyblue;box-sizing: border-box; } ul:hover{ animation-play-state: paused; } ul:hover li img{ opacity: 0.7; } ul li:hover img{ opacity: 1; } ul li:nth-child(1){ transform: rotateY(60deg) translateZ(200px); } ul li:nth-child(2){ transform: rotateY(120deg) translateZ(200px); } ul li:nth-child(3){ transform: rotateY(180deg) translateZ(200px); } ul li:nth-child(4){ transform: rotateY(240deg) translateZ(200px); } ul li:nth-child(5){ transform: rotateY(300deg) translateZ(200px); } ul li:nth-child(6){ transform: rotateY(360deg) translateZ(200px); } @keyframes play { from{ transform: rotateX(-12deg) rotateY(0deg); } to{ transform: rotateX(-12deg) rotateY(360deg); } } .heart{ width: 173px;height: 157px;position: absolute;left: 100px;bottom: 100px;animation:plays 5s linear 0s infinite normal; } @keyframes plays { 0%{ left: 150px;bottom: 150px;opacity: 0.8; } 20%{ left: 250px;bottom: 250px;opacity: 0.6; } 40%{ left: 350px;bottom: 350px;opacity: 0.5; } 60%{ left: 500px;bottom: 500px;opacity: 0.3; } 80%{ left: 600px;bottom: 300px;opacity: 0.5; } 90%{ left: 800px;bottom: 100px;opacity: 0.8; } 100%{ left: 900px;bottom: 0px;opacity: 0.1; } } </style></head><body><ul> <li><img src="data:images/image10/y1.jpeg"></li> <li><img src="data:images/image10/y2.jpg"></li> <li><img src="data:images/image10/y3.jpeg"></li> <li><img src="data:images/image10/y4.png"></li> <li><img src="data:images/image10/y5.jpg"></li> <li><img src="data:images/image10/y6.jpg"></li></ul><img src="data:images/image10/xin.png"class="heart"><audio src="data:images/image10/song.mp3" autoplay="autoplay" loop="loop"></audio><script>
</script></body></html>转载于:https://www.cnblogs.com/fy666/p/7856614.html
CSS3:3D环绕实现相关推荐
- 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画 如 ...
- CSS3 3D的总结（初学者易懂）
CSS3 3D案例的总结 如果要说是3D的基础概念,首先我就来说一说rotateX().rotateY().rotateZ()这几个属性 rotateX():对应的是3D模型中的X轴上的旋转,传入的参 ...
- [应用][js+css3]3D盒子导航[PC端]
CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...
- 7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
- css3轮播不用jpuery_js和CSS3 3D轮播图
这是一款js和CSS3 3D轮播图.这组3D轮播图中,共演示了6种轮播图效果.这些3D轮播图都是通过简单的JS代码配合CSS3来完成的. 使用方法 HTML结构 以8张图片的3D轮播图为例,它的基本H ...
- 一篇文章搞定css3 3d效果
css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...
- CSS3 3D transform变换
transform的坐标是需要了解的特性. 我们的rotateX,rotateY,rotateZ,和translateX,translateY等都是基于相同的坐标系来定位的. 3D的坐标如下入所示: ...
- （28）css3 3D转换
transform 属性不止能实现 2D 转换,也可以制作 3D 立体转换效果,比普通的 x.y 轴组成的平面效果多了一条 z 轴,如下图: 一.透视 电脑显示屏是一个 2D 平面,图像之所以具有立体 ...
- html3d转换,CSS3 3D 转换
# CSS3 3D 转换 ## 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: * rotateX() * rotateY() 点击下 ...
- html控制弯曲图,html – CSS3 3D弯曲视角
CSS3 3D变换动画非常棒.我想知道是否有办法让某些东西弯曲. 这个例子翻转了(纸质)div,但是动画看起来很僵硬,因为实际上,当你翻动纸张时,它会弯曲一点. 那么我忽略的任何属性,或者是一个让它看 ...
最新文章
- Go安装web框架revel
- [改善Java代码]不使用stop方法停止线程
- 【51单片机快速入门指南】2：GPIO LED与按键
- ucosii事件控制块------信号量集
- Flutter 权限申请
- npm 私有库开源组件_苹果的ResearchKit，npm私有模块以及更多开源新闻
- 基于51单片机的八位流水灯（三种形式）
- python的requests快速上手、高级用法和身份认证
- windows服务器上安装的有mysql环境怎么创建数据库_Windows环境MySQL数据库安装方法...
- Android WiFi Dhcp 获取到 IP 和配置的过程
- 无法发送电子邮件,可能原因:您的主机禁用了mail()函数
- 5-前置处理器：Pre Processors
- ARINC429硬件层初探
- 【esxi跑网心云（cdn）软路由拨号】esxi服务器使用ikuai虚拟机拨号并配置家庭路由器上网
- java中peek是什么意思,在Java流中，PEEK真的只用于调试吗？
- 教育类小程序APP开发
- 【大赛八卦】2020国际初中生信息学竞赛中国代表队蝉联团体总分第一和金牌人数第一
- ES6的Lambda表达式
- 如何设计一款高性能分布式锁，实现数据的安全访问?
- 浅谈用户体验与界面设计