高大上html动画效果图,css实例教程 一款纯css3实现的超炫动画背画特效

最新推荐文章于 2022-01-27 17:44:18 发布
最新推荐文章于 2022-01-27 17:44:18 发布
阅读量354 收藏
点赞数
文章标签： 高大上html动画效果图

之前为大家介绍了很多款由纯css3实现的特效。今天要再给大家带来一款纯css3实现的超炫动画背画特效。代码非常简单，没有引用任何其它js代码。css代码也不多。效果非常炫。一起看下效果图：

9682056f41889d95d7bcd6829fbb371a.png

实现的代码：

html代码：

复制代码代码如下:

css3代码：

复制代码代码如下:

body{

background: #000;

-webkit-perspective:35px;

-moz-perspective:35px;

-ms-perspective:35px;

-o-perspective:35px;

perspective:35px;

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-ms-transform-style:preserve-3d;

-o-transform-style:preserve-3d;

transform-style:preserve-3d;

-webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);

-moz-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);

-ms-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);

-o-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);

transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);

}

.fake-gif {

position: relative;

margin: 10rem auto 0 auto;

width: 20rem;

height: 20rem;

}

.fake-gif .stripe {

position: absolute;

border-radius: 50%;

-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);

box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);

-webkit-transform: translate3d(0px, 0px, 0px);

transform: translate3d(0px, 0px, 0px);

}

.fake-gif .stripe:nth-child(odd) {

left: 0;

width: 100%;

height: 5%;

background-color: rgba(109, 60, 209, 0.5);

box-shadow: 0px 6px 40px #5800FF, inset 0px 2px 5px #DF00FF;

}

.fake-gif .stripe:nth-child(even) {

top: 0;

width: 5%;

height: 100%;

background-color: rgba(0, 240, 40, 0.5);

box-shadow: 0px 6px 40px #007D35, inset 0px 2px 5px #7CFFB5;

}

.fake-gif .stripe:nth-child(4n+1) {

z-index: 3;

}

.fake-gif .stripe:nth-child(4n+2) {

z-index: 4;

}

.fake-gif .stripe:nth-child(4n+3) {

z-index: 1;

}

.fake-gif .stripe:nth-child(4n) {

z-index: 2;

}

.fake-gif .stripe:nth-child(2) {

left: 4.7%;

-webkit-animation: move-y 2.7s 0.2s infinite;

animation: move-y 2.7s 0.2s infinite;

}

.fake-gif .stripe:nth-child(4) {

left: 11.9%;

-webkit-animation: move-y 2.7s 0.4s infinite;

animation: move-y 2.7s 0.4s infinite;

}

.fake-gif .stripe:nth-child(6) {

left: 19.1%;

-webkit-animation: move-y 2.7s 0.6s infinite;

animation: move-y 2.7s 0.6s infinite;

}

.fake-gif .stripe:nth-child(8) {

left: 26.3%;

-webkit-animation: move-y 2.7s 0.8s infinite;

animation: move-y 2.7s 0.8s infinite;

}

.fake-gif .stripe:nth-child(10) {

left: 33.5%;

-webkit-animation: move-y 2.7s 1s infinite;

animation: move-y 2.7s 1s infinite;

}

.fake-gif .stripe:nth-child(12) {

left: 40.7%;

-webkit-animation: move-y 2.7s 1.2s infinite;

animation: move-y 2.7s 1.2s infinite;

}

.fake-gif .stripe:nth-child(14) {

left: 47.9%;

-webkit-animation: move-y 2.7s 1.4s infinite;

animation: move-y 2.7s 1.4s infinite;

}

.fake-gif .stripe:nth-child(16) {

left: 55.1%;

-webkit-animation: move-y 2.7s 1.6s infinite;

animation: move-y 2.7s 1.6s infinite;

}

.fake-gif .stripe:nth-child(18) {

left: 62.3%;

-webkit-animation: move-y 2.7s 1.8s infinite;

animation: move-y 2.7s 1.8s infinite;

}

.fake-gif .stripe:nth-child(20) {

left: 69.5%;

-webkit-animation: move-y 2.7s 2s infinite;

animation: move-y 2.7s 2s infinite;

}

.fake-gif .stripe:nth-child(22) {

left: 76.7%;

-webkit-animation: move-y 2.7s 2.2s infinite;

animation: move-y 2.7s 2.2s infinite;

}

.fake-gif .stripe:nth-child(24) {

left: 83.9%;

-webkit-animation: move-y 2.7s 2.4s infinite;

animation: move-y 2.7s 2.4s infinite;

}

.fake-gif .stripe:nth-child(26) {

left: 91.1%;

-webkit-animation: move-y 2.7s 2.6s infinite;

animation: move-y 2.7s 2.6s infinite;

}

.fake-gif .stripe:nth-child(1) {

top: 3.6%;

-webkit-animation: move-x 2.7s 0.1s infinite;

animation: move-x 2.7s 0.1s infinite;

}

.fake-gif .stripe:nth-child(3) {

top: 10.8%;

-webkit-animation: move-x 2.7s 0.3s infinite;

animation: move-x 2.7s 0.3s infinite;

}

.fake-gif .stripe:nth-child(5) {

top: 18%;

-webkit-animation: move-x 2.7s 0.5s infinite;

animation: move-x 2.7s 0.5s infinite;

}

.fake-gif .stripe:nth-child(7) {

top: 25.2%;

-webkit-animation: move-x 2.7s 0.7s infinite;

animation: move-x 2.7s 0.7s infinite;

}

.fake-gif .stripe:nth-child(9) {

top: 32.4%;

-webkit-animation: move-x 2.7s 0.9s infinite;

animation: move-x 2.7s 0.9s infinite;

}

.fake-gif .stripe:nth-child(11) {

top: 39.6%;

-webkit-animation: move-x 2.7s 1.1s infinite;

animation: move-x 2.7s 1.1s infinite;

}

.fake-gif .stripe:nth-child(13) {

top: 46.8%;

-webkit-animation: move-x 2.7s 1.3s infinite;

animation: move-x 2.7s 1.3s infinite;

}

.fake-gif .stripe:nth-child(15) {

top: 54%;

-webkit-animation: move-x 2.7s 1.5s infinite;

animation: move-x 2.7s 1.5s infinite;

}

.fake-gif .stripe:nth-child(17) {

top: 61.2%;

-webkit-animation: move-x 2.7s 1.7s infinite;

animation: move-x 2.7s 1.7s infinite;

}

.fake-gif .stripe:nth-child(19) {

top: 68.4%;

-webkit-animation: move-x 2.7s 1.9s infinite;

animation: move-x 2.7s 1.9s infinite;

}

.fake-gif .stripe:nth-child(21) {

top: 75.6%;

-webkit-animation: move-x 2.7s 2.1s infinite;

animation: move-x 2.7s 2.1s infinite;

}

.fake-gif .stripe:nth-child(23) {

top: 82.8%;

-webkit-animation: move-x 2.7s 2.3s infinite;

animation: move-x 2.7s 2.3s infinite;

}

.fake-gif .stripe:nth-child(25) {

top: 90%;

-webkit-animation: move-x 2.7s 2.5s infinite;

animation: move-x 2.7s 2.5s infinite;

}

@-webkit-keyframes move-y {

0%, 100% {

-webkit-transform: translateZ(-25px);

transform: translateZ(-25px);

}

50% {

-webkit-transform: translateZ(25px);

transform: translateZ(25px);

}

}

@-webkit-keyframes move {

0%, 100% {

-webkit-transform: rotateX(-25deg) rotateY(-25deg);

transform: rotateX(-25deg) rotateY(-25deg);

}

50% {

-webkit-transform: rotateX(25px) rotateY(25deg);

transform: rotateX(25px) rotateY(25deg);

}

}

@keyframes move-y {

0%, 100% {

-webkit-transform: translateY(-25%);

transform: translateY(-25%);

}

50% {

-webkit-transform: translateY(25%);

transform: translateY(25%);

}

}

@-webkit-keyframes move-x {

0%, 100% {

-webkit-transform: translateZ(-25px);

transform: translateZ(-25px);

}

50% {

-webkit-transform: translateZ(25px);

transform: translateZ(25px);

}

}

@keyframes move-x {

0%, 100% {

-webkit-transform: translateX(-25%);

transform: translateX(-25%);

}

50% {

-webkit-transform: translateX(25%);

transform: translateX(25%);

}

}

以上就是纯css3实现的超炫动画背画特效，是不是很简单，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。

临雅
关注
HTML动画效果
weixin_50509134的博客
06-04 2658
我们在浏览一些网页时，页面上不止有图片和文字，还有着许多动画。那动画是怎么编写的呢？接下来我们就简单的对它进行一些初步的了解。 首先我们来看一串代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
动态CSS
wangcheng
03-13 221
项目里要添加 custom css 功能 (dynamic stylesheet )，总结一下实现方法。 1。在JSP中动态设定文件path 预先生成一些css文件，由用户选择，在jsp被请求时，动态加载用户选择的css文件。 xml 代码 &lt;link rel="STYLESHEET" type="text/css" href="css file" &gt;    ...
html与css结合动效案例,CSS3制作动画效果例子
weixin_42143221的博客
06-27 427
实现网站的图片、文字的动态效果，我们有photoshop制作多帧动画GIF、用flash制作更精巧的动画，还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果。然而，即使有这么多的方法可以实现动态效果，我们仍然觉得不满足，为什么呢？1.用photoshop制作的动画，制作过程比较长，要产出一个比较理想、细腻的动画图片，花费的时间比较长，一旦需要修改某个部分，就得对源文...
CSS3动画简单案例
qq_52622178的博客
04-08 1337
CSS3动画简单案例 刚学习完h5和c3,做了两个简单动画。 1.动画的放大缩小： 代码如下: <style> @keyframes move { 0%{ transform: scale(1); } 25%{ transform: scale(1.1); } 50%{ transform: scale(1); } 75%{ transform: scal
html图片运动动画效果图,使用CSS实现图片帧动画与曲线运动
weixin_39760689的博客
06-04 801
所有动画的基本原理都是：在短时间内连续依次展示对应的图片，这样在视觉上看起来就是'动'的了。本文主要来说一说第4点和第5点。图片帧动画当我们要实现的动画效果比较复杂，而且开发排期比较紧的情况下，用一张gif动图来实现动画是成本最低，效果也不错的一种方案。比如下面这种动画效果：可是如果我们想让动效在某个时候暂停，隔一段时间后，再从断点开始继续播放动效，用gif图就实现不了了。 gif图的动效是没有办...
一款利用纯css3实现的超炫3D表单的实例教程
01-19
今天要给大家分享一款纯css3实现的超炫3D表单。该特效页面的加载的时候3d四十五度倾斜，当鼠标经过的时候表单动画回正。效果非常炫，一起看下效果图： 　实现的代码。 　html代码： XML/HTML Code复制内容到剪贴板 ...
CSS3 SVG实现超炫的游乐园动画效果源码.zip
最新发布
10-31
在本资源中，"CSS3 SVG实现超炫的游乐园动画效果源码.zip" 提供了一个利用CSS3和SVG技术创建动态、引人入胜的游乐园场景的示例。这个压缩包可能包含一个HTML文件、CSS文件以及可能的SVG图形文件。下面将详细介绍CSS3...
2014 HTML5/CSS3热门动画特效TOP10
12-10
6. **CSS3选择器和过渡效果**：在第6个和第7个特效中，CSS3的选择器被用来实现鼠标悬停时的动态效果，如图片缩小和文字弹出，而过渡效果则让这些变化平滑自然。 7. **Animate.css库**：第10个知识点介绍了Animate....
HTML5CSS3 3D环形图片墙 伴随旋转动画
11-03
在“HTML5CSS3 3D环形图片墙 伴随旋转动画”这个项目中，开发者利用了这两门技术的优势，构建了一个独特且引人注目的视觉效果。 首先，HTML5引入了许多新的元素和API，使得网页结构更清晰，同时增强了多媒体支持。...
css3实现超炫风车特效
01-21
前面讲过css3可以替代很多js实现的效果，其实很多时候纯css3甚至可以替代图片，直接用css3就可以画出一些简单的图片。虽然css3画出来的图片效果可能不如直接用图片的好，实现起来也比较复杂，最麻烦的是兼容性问题，...
12个经典大气的HTML5/CSS3应用动画
08-23
昨天为大家收集了15个华丽的HTML5动画应用，有几个应用还比较实用。今天我们就接着来分享第二波干货，也是基于HTML5和CSS3的动画应用，将涉及到HTML5表单、HTML5图片特效以及HTML5图表等应用领域，希望大家会喜欢。 1、HTML5/CSS3自定义下拉框 3D卡片折叠动画 之前我们分享过一款CSS3带小图标下拉菜单，它更多的是一款菜单，但是今天要分享的一款CSS3自定义下拉框取代了传统的Select样式，用不一样的风格来让select更加美观。这款CSS3下拉框还有3D立体的卡片折叠动画效果，非常酷。 在线演示        源码下载 2、HTML5/CSS3发光搜索表单 超酷CSS3表单 之前我们分享过一款纯CSS3实现的发光登录表单，发光特效非常不错。今天我们要再来分享一款放光表单，是一款CSS3发光搜索表单，表单整体是黑色的风格，搜索框被激活时，输入框就会发光，由于黑色的背景，整个搜索表单就显得格外绚丽光亮。 在线演示        源码下载 3、jquery视差滑块幻灯特效 非常酷的一款jQuery全屏焦点图插件，图很美。[......] 阅读全文>>
租房前台HTML效果图
09-30
卖房，租房类，java项目前台HTML效果图，有需要前台设计的可以下载，内含HTML，CSS，JS等文件。
html制作循环动画语句,写多个物件css3循环动画案例原理_html/css_WEB-ITnose
weixin_31546795的博客
06-07 357
在写h5页面中，我们可能经常遇到要写很多css3动画，有没有同学遇到多个物件同样的动画效果，循环保存步调一致呢，我就经常碰到，之前一直不知道其中的原理，只是简单的迁移改改，可是遇到稍微复杂多一点的就hold不住了，只能硬着头皮去分析其中的原理。那么接下来，让我们先看看案例，然后了解之中的原理css3动画循环案例案例一：loading动画效果html代码：css样式:案例二：圆形放大或缩小的load...
高大上html动画效果图,如何做出高大上的动画效果？
weixin_42314711的博客
06-03 303
当我们要在页面上实现一些动画效果的时候，通常会考虑两种方式：1、通过css3的animation+keyframes，或者transition2、通过setTimeout或者setInterval。毫无疑问，首选的方案是第一种。而当需要考虑兼容性，或者需要精确的控制动画的时候，无可避免地会使用setTimeout/setInterval来实现动画。这种实现方式是低效的，而且在当前时间点，可以考虑更...
18个强大的纯CSS3动画案例分享
热门推荐
web前端开发
08-12 1万+
编辑整理 | web前端开发在之前，我也分享过很多关于CSS3,HTML5的动画案例，今天我要与你分享的这18个动画案例，也是比较炫酷的，可以实现很多交互，这些CSS3动...
【源码案例】14个超炫酷 HTML5/CSS3应用和动画特效实例
web前端开发
10-20 5354
html5现在已经不是很前卫的东西了，越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享几款超绚丽的HTML5/CSS3应用和动画特...
HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
weixin_33208553的博客
06-03 891
html5+css3实现2D-3D动画效果实例主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。文章目录html5+css3实现2D-3D动画效果实例2D变换3D变换案例实现相关知识点透明属性过渡属性定位属性2D中应用实现案例3D中应用实现案例css3动画效果显示： 2D变换是在一个平面对元素进行的操作。可以对元素进行水平或者垂直位移、旋转或者拉伸.*2d对下面面坐标系简单分...
html页面效果图
weixin_58448172的博客
01-27 370
相关代码
html 线条效果图,HTML5新特性开发者实践之Canvas线条篇
weixin_28913019的博客
06-03 310
【IT168专稿】在HTML5中，其中最令开发者和用户值得留意的新特性，莫过于Canvas的功能了，它能在目前的IE 9，IE 10以及Chrome,FireFox等多种浏览器中使用，是目前HTML5中富客户端动画效果的实现方式，有了它，HTML5就有了跟Adobe Flash对抗的资本，用户以后只要使用支持HTML5的浏览器，就可以不用安装Flash插件了。在上篇《开发者值得关注的HTML5新特...
使用CSS3和SVG创造游乐园动画效果教程
本资源包提供了一个使用CSS3和SVG技术结合实现的游乐园动画效果的源代码，为学习者和开发者提供了一个极佳的实例参考。 ### CSS3关键知识点： 1. **动画（Animations）**：CSS3新增的动画功能允许开发者创建复杂的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值