底盘旋转

对于之前在CSS实现科技感旋转底盘

一文中看见的效果十分心动，但由于没有合适的图片素材，后面自己用纯css写了一下

//div部分
<div style="z-index: 999!important;background-color: #ffffff00;height: 540px;width:540px;left:100px;position: absolute"><div class="ball"></div><div class="round"></div><div class="roundBig"> </div><div class="roundSmall" ></div></div>
//样式
//样式球
.ball{position: absolute;left: 50px;height:50px;width:50px;z-index: 6;background-image:linear-gradient(180deg, rgba(6,4,47,1) 0%, rgba(21,21,91,1) 20%, rgba(85,85,203,1) 64%, rgba(239,246,179,1) 100%);border-radius:50%;//利用圆角，将div变成圆形animation: cir 2s linear infinite alternate;//动画：动画名（cir） 持续时间(2s) 动画方式（linear）动画迭代次数（infinite无限次）动画方向（alternate交替播放}
//圆环样式.round {position: absolute;left: 25px;top:100px;width: 100px;height: 100px;display: inline-block;animation: move 2s infinite linear;border-radius: 50%;z-index: 1;transform-style: preserve-3d;//遮罩，有颜色部分显示原来内容，透明不显示-webkit-mask:radial-gradient(circle at center center, #0000 35px, red 0);background: conic-gradient(#0000 0% 5%,#B9C1F8 5% 25%,#0000 26% 30%,#5979EF 31%,#B9C1F8 100%);}.roundBig {position: absolute;top:100px;left: 0;width: 150px;height: 150px;display: inline-block;animation: move 3s infinite linear;z-index: 2;border-radius: 50%;-webkit-mask:radial-gradient(circle at center center, #0000 70px, red 0);background: conic-gradient(#B9C1F8 0%,#0000 26% 30%,#5979EF 31%,#0000 46% 51%,#B9C1F8 100%);}.roundSmall {position: absolute;top:100px;left: 10px;width: 110px;height: 110px;display: inline-block;animation: move 5s infinite linear;border:10px dashed #B9C1F8;border-radius: 50%;z-index: 1;}@keyframes move {from {transform: rotateX(75deg) rotateZ(0);}to {transform: rotateX(75deg) rotateZ(360deg);}}@keyframes cir{from{margin-top:0px}to{margin-top:105px}}

星空闪烁

vue组件中，页面具体引入和背景颜色什么的就不贴了，星星图片可以自己百度一张，也可以在css的背景里面直接设置成圆角底色

<template>
<div id="star1" ref="star1"><div class="startInti" v-for="(item, index) in 200" :key="index" ref="startInti"></div>
</div>
</template><script>
export default {name: "StarBackground2",mounted() {this.initstart()},data(){return {b:false}},methods:{initstart(){let star = this.$refs.startIntivar screenW = document.documentElement.clientWidth;var screenH = document.documentElement.clientHeight;star.forEach(item=>{var x = parseInt(Math.random() * screenW);var y = parseInt(Math.random() * screenH);item.style.left=x+'px'item.style.top=y+'px'// 随机缩放var scale = Math.random() * 1.5;item.style.transform = 'scale(' + scale +')';// 闪烁推迟var rate = Math.random() * 1.5;item.style.animationDelay = rate + 's';})}}
}
</script><style lang="scss" scoped>
#star1{width: 100%;height: 100%;position: absolute;z-index: 999;.startInti{display: block;width: 10px;height: 10px;position: absolute;//border: 5px saddlebrown solid ;background: url(../assets/start.png) center center / 10px 10px !important;//background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;animation: flash 1s alternate infinite;}.startInti:hover{transform: scale(2) rotate(180deg) !important;transition: all 1s;}
}@keyframes flash{0%{ opacity: 0; scale: 0.5;}100%{ opacity: 1; scale: 1;}
}</style>

效果图（这里把两个放到了一个页面）：

效果图

一些花里胡哨——底盘旋转、闪烁星星相关推荐

旋转的星星_pygame旋转图像实例_作者:李兴球
"""本程序用pygame的变功能让星星旋转,作者:李兴球@2018 通过案例,你能学到如何让图片旋转. """ import pygame ...
生日快乐模板php,HTML5应用-生日快乐动画之实现星星的示例代码分享
在讲述绘制星星动画之前,先介绍一点javascript知识. 面向对象: javascript本质上不是面向对象语言,而是脚本语言,一般只适合简单.代码量少的程序,因为脚本过于复杂会直接导致浏览器出现 ...
OpenGL教程之漂亮的星星
欢迎进入第九课.到现在为止,您应该很好的理解OpenGL了.您已经学会了设置一个OpenGL窗口的每个细节.学会在旋转的物体上贴图并打上光线以及混色(透明)处理.这一课应该算是第一课中级教程.您将学到 ...
Vue实现集成使用第三方Animate.css动画库详细教程（解决鼠标移入移出闪烁问题）
vue通过第三方集成Animate.css简单快速的实现动画,通过类名引用,可以轻松实现Animate的所有动画,Animate.css是一款强大的预设css3动画库,Animate.css内置了很多 ...
一起自学SLAM算法：6.1 底盘运动学模型
连载文章,长期更新,欢迎关注: 写在前面第1章-ROS入门必备知识第2章-C++编程范式第3章-OpenCV图像处理第4章-机器人传感器第5章-机器人主机第6章-机器人底盘 6.1 底盘运 ...
OpenGL_10 3D空间中移动图像
在本节中,并没有新的知识,只是通过glTranslatef()和glRotatef()函数对星星纹理映射的矩形的位置变换以及glColor4ub()函数对星星颜色改变达到混合效果实现星星自转.绕z轴旋 ...
视频教程-前端工程师零基础到就业全套课程-JavaScript
前端工程师零基础到就业全套课程北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥399.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 ...
计算机动漫与游戏制作与影视,中职中专计算机动漫与游戏制作专业系列教材·动画与影视后期制作：After Effects CS4技能应用教程...
中职中专计算机动漫与游戏制作专业系列教材·动画与影视后期制作:After Effects CS4技能应用教程语音编辑锁定讨论上传视频 <中职中专计算机动漫与游戏制作专业系列教材·动画与 ...
近期前端特效资源精品大荟萃#001
原文链接:http://www.gbtags.com/gb/share/5727.htm 1. 前端树形图 -- zTree -- jQuery 树插件这里使用的数据是直接写在js里的.如果能使用a ...
jQuery，Html5前端特效资源精品大荟萃#001
1. 前端树形图 -- zTree -- jQuery 树插件这里使用的数据是直接写在js里的.如果能使用ajax来获取数据,更进一步,如果使用ajax获取选择节点的子节点,那么这个zTree将会更 ...

一些花里胡哨——底盘旋转、闪烁星星

底盘旋转

星空闪烁

一些花里胡哨——底盘旋转、闪烁星星相关推荐

最新文章

热门文章