html圆点光晕特效,使用CSS3做出带有光晕流星旋转光环的效果
今天教大家的这一份代码是用CSS3做出带有光晕的流星旋转光环的效果,感兴趣的朋友可以自己动手实践一下,案列代码如下:html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
background-image: -webkit-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: -moz-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: -ms-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
perspective: 1000px;
}
.bg0 {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url(../images/bg0.png) no-repeat center center;
background-size: 150%;
}
.bg1 {
width: 100%;
height: 100%;
background: url(../images/bg1.png) no-repeat center center;
}
.hx-box {
top: 50%;
left: 50%;
width: 500px;
height: 500px;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg);
}
.hx-box ul {
width: 500px;
height: 500px;
transform-style: preserve-3d;
animation:hxz 20s linear infinite;
}
@keyframes hxz{
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
.hx-box ul li {
width: 500px;
height: 500px;
border: 4px solid #5ec0ff;
border-radius: 1000px;
}
.hx-box ul li span {
display: block;
width: 100%;
height: 100%;
background: url(../images/hx.png) no-repeat center center;
background-size: 100% 100%;
animation: hx 4s linear infinite;
}
@keyframes hx {
to {
transform: rotate(360deg);
}
}
.hx-k2 {
transform: rotateX(60deg) rotateZ(60deg)
}
.hx-k3 {
transform: rotateX(-60deg) rotateZ(-60deg)
}
不得不说CSS3还是很强大的,更多精彩请关注Gxl网其它相关文章!
相关阅读:
css3的弹性盒怎么做出来
在HTML里web标准是什么
CSS3怎么做出响应式布局
html圆点光晕特效,使用CSS3做出带有光晕流星旋转光环的效果相关推荐
- css3 实现盒子四周光晕_使用CSS3做出带有光晕流星旋转光环的效果 -
...章给大家带来的内容是关于CSS3属性:text-shadow文本阴影的使用方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.text-shadow还没有出现时,大家在网页设计中 ...
- css3 实现盒子四周光晕_使用CSS3实现的光晕特效
CSS 语言: CSSSCSS 确定 html { height: 100%; width: 100%; } body { height: 100%; background: #CECECE; fon ...
- js+css3实现鼠标控制图片旋转实现方向舵效果
一.效果 效果如图,这是一个方向舵.用鼠标抓住外面的方向盘旋转,而里面的舵标识保持不动. 二.设计思路 1.目标由2张图片组成,利用CSS定位属性组合在一起 2.监听方向盘图片上的鼠标事件,当鼠标按下 ...
- html怎么做半圆形按钮,css3做出半圆弧线
这次给大家带来css3做出半圆弧线,css3做出半圆弧线的注意事项有哪些,下面就是实战案例,一起来看一下. 本文介绍了css3实现画半圆弧线的示例代码,分享给大家,具体如下: css代码.circle ...
- css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
- 网页特效:用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- prototype鼠标指针_html5鼠标点击页面光标圆点动画特效
特效描述:html5 鼠标点击页面 光标圆点动画特效.html5圆点动画,光标动画,鼠标点击页面事件. 代码结构 1. 引入JS 2. HTML代码 点击任何地方看效果 'use strict'; v ...
- css3 特效大全,CSS3 特效范例整理
CSS3 總特效整理範例 CSS3邊框特效: CSS3:(右下邊框圓角效果)border-bottom-right-radius 复制代码代码如下: border-bottom-right-radiu ...
- html烟花特效案例,HTML5前端特效库 css3 按钮粒子烟花特效源码
HTML5前端特效库 css3 按钮粒子烟花特效源码 效果图 各位长友大家上午好! 今天给大家带来的是 css3 按钮粒子烟花特效源码! 大家可以按照自己的意愿进行修改! 有想要文件版源码的可以 在我 ...
最新文章
- mysql 执行计划 什么用_简述MySQL的执行计划的作用及使用方法
- oracle 学习笔记 Flashback drop
- (29)PDE_PTE属性(PWT/PCD位)
- 在python语言中下列是二进制整数_Python从菜鸟到高手(5):数字
- HALCON示例程序classify_image_class_gmm.hdev使用GMM分类器分割彩色图片
- assertj_AssertJ的SoftAssertions –我们需要它们吗?
- 【基础问题】微信小程序 - 腾讯云 - 一站式方案 - PHP - wafer 和 wafer2的区别和wafer2的实践
- HTML5有哪些新特性
- linux查看log日志在哪,如何查看linux的系统log日志
- eclipse中配置文件设置字符集
- forward/redirect跳转页面的区别
- 代码的执行效率(3)--缓存与局部性 摘自赵劼老师的博客
- 翻译: 4.4. 模型选择Model Selection、欠拟合Underfitting和过拟合Overfitting pytorch
- preg_match 参数获取两个_摄像相机标定到底是啥?标定完成得到的参数有什么用?...
- 在系统编程ISP及在应用编程IAP
- GOF设计模式(概念、原则、场景、优点、缺点、应用)
- WF本质论 OpenSesame 芝麻开门代码
- 直播预告丨技术干货:易鲸捷HTAP融合型分布式数据库连接服务层介绍
- C51单片机实验——中断实验
- STM32(7):中断方式让按键点亮LED