html5 css3做圆周运动,css3实例教程 一款纯css3实现的发光屏幕旋转特效

最新推荐文章于 2023-05-18 10:02:27 发布
最新推荐文章于 2023-05-18 10:02:27 发布
阅读量147 收藏
点赞数
文章标签： html5 css3做圆周运动

*{

margin: 0;

padding: 0;

}

*,

*:before,

*:after {

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

}

html,body{

height: 100%;

}

html{

background-color:#1d1d1d;

}

body{

position:relative;

margin: 0;

padding: 0;

transform-style: preserve-3d;

-webkit-perspective:500px;

perspective:500px;

}

/*Screen*/

.screen{

position:absolute;

top: 50%;

left: 50%;

width:320px;

height:210px;

margin-top: -105px;

margin-left: -160px;

border-radius:8px;

box-shadow: 0 080px#0caba8;

overflow:hidden;

z-index: 100000;

-webkit-animation: screenMove01 2s,

boxShine     2.5s 2s infinite alternate ,

screenMove02 5s infinite alternate linear;

-moz-animation: screenMove01 2s,

boxShine     2.5s 2s infinite alternate ,

screenMove02 5s infinite alternate linear;

-o-animation: screenMove01 2s,

boxShine     2.5s 2s infinite alternate ,

screenMove02 5s infinite alternate linear;

animation: screenMove01 2s,

boxShine     2.5s 2s infinite alternate ,

screenMove02 5s infinite alternate linear;

}

.screen::before{

display:block;

content:"";

position:absolute;

top: 0;

left: 0;

width:320px;

height:210px;

border-width:5px;

border-style:solid;

border-image: -webkit-linear-gradient(tobottombottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1;

border-image:    -moz-linear-gradient(tobottombottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1;

border-image:      -o-linear-gradient(tobottombottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1;

border-image:         linear-gradient(tobottombottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1;

}

.screen::after{

display:block;

content:"";

position:absolute;

top:3px;

left:3px;

width:314px;

height:204px;

border:3pxsolid#1d1d1d;

border-color:rgba(29,29,29,0.9);

border-radius:5px;

background: -webkit-linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);

background:    -moz-linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);

background:      -o-linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);

background:         linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);

-webkit-background-size: 300% 300%;

-moz-background-size: 300% 300%;

-o-background-size: 300% 300%;

-ms-background-size: 300% 300%;

background-size: 300% 300%;

-webkit-animation: bgShine 5s  infinite alternate linear;

-moz-animation: bgShine 5s  infinite alternate linear;

-o-animation: bgShine 5s  infinite alternate linear;

animation: bgShine 5s  infinite alternate linear;

}

/**/

/*Animation*/

/*screenMove01*/

@-webkit-keyframes screenMove01 {

0%   {opacity: 0;top: 100%; transform: rotateY(0deg);}

100% {opacity: 1;top: 50%;  transform: rotateY(-30deg);}

}

@-moz-keyframes screenMove01 {

0%   {opacity: 0;top: 100%; transform: rotateY(0deg);}

100% {opacity: 1;top: 50%;  transform: rotateY(-30deg);}

}

@-o-keyframes screenMove01 {

0%   {opacity: 0;top: 100%; transform: rotateY(0deg);}

100% {opacity: 1;top: 50%;  transform: rotateY(-30deg);}

}

@keyframes screenMove01 {

0%   {opacity: 0;top: 100%; transform: rotateY(0deg);}

100% {opacity: 1;top: 50%;  transform: rotateY(-30deg);}

}

/**/

/*screenMove02*/

@-webkit-keyframes screenMove02 {

0%   {transform: rotateY(-30deg);}

100% {transform: rotateY(30deg);}

}

@-moz-keyframes screenMove02 {

0%   {transform: rotateY(-30deg);}

100% {transform: rotateY(30deg);}

}

@-o-keyframes screenMove02 {

0%   {transform: rotateY(-30deg);}

100% {transform: rotateY(30deg);}

}

@keyframes screenMove02 {

0%   {transform: rotateY(-30deg);}

100% {transform: rotateY(30deg);}

}

/**/

/*box shine*/

@-webkit-keyframes boxShine {

0%   {box-shadow: 0 050px#0caba8;}

100% {box-shadow: 0 0200px#0caba8;}

}

@-moz-keyframes boxShine {

0%   {box-shadow: 0 050px#0caba8;}

100% {box-shadow: 0 0200px#0caba8;}

}

@-o-keyframes boxShine {

0%   {box-shadow: 0 050px#0caba8;}

100% {box-shadow: 0 0200px#0caba8;}

}

@keyframes boxShine {

0%   {box-shadow: 0 050px#0caba8;}

100% {box-shadow: 0 0200px#0caba8;}

}

/**/

/*bg shine*/

@-webkit-keyframes bgShine {

0%   {-webkit-background-size: 300% 300%;}

100% {-webkit-background-size: 100% 100%;}

}

@-moz-keyframes bgShine {

0%   {-moz-background-size: 300% 300%;}

100% {-moz-background-size: 100% 100%;}

}

@-o-keyframes bgShine {

0%   {-o-background-size: 300% 300%;}

100% {-o-background-size: 100% 100%;}

}

@keyframes bgShine {

0%   {background-size: 300% 300%;}

100% {background-size: 100% 100%;}

}

乐正昶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3 彩带扩散效果_利用纯css3实现圆形从中心向四周扩散动画效果代码
weixin_39937447的博客
12-23 292
先来个简单的示例，例如：@keyframes hovertreemove{from {top:30px;}to {top:130px;}}效果：http://hovertree.com/texiao/css3/37/1.htm可以通过 @keyframes 规则，创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变...
综合案例（窗口拖动，css3线性运动动画，轮播图，跑马灯，闪动的红点）
weixin_45256247的博客
02-27 491
案例一 盒子拖拽案例 <style> * {padding:0px;margin:0px} .login { width: 300px; height:300px; background: pink; position: absolute; } .login .header {cursor:move;width:100%;height:100px;background: black;} &lt
CSS 实现跳动的方块动画
苏苏就是小苏苏的博客
12-02 2255
transform-style+transform实现多个小方块，速速来Get吧~
css动画从左到右滚动的光点
_小郑有点困了的博客
01-15 1667
先看效果： 这个小点是从左往右运动的，也非常简单，一开始绝对定位到x方向看不到，然后在生命周期函数里面定时器500毫秒，行内样式改变left的值，运动到有点看不到的位置。当然后需要有个transition才能看到动画效果 代码： <!-- 亮点 --> <span class="lightDot" ref="lightDot" :style="{left:leftPlace,transition:`left ${time}s ease-in-out`}"></span&gt
css 带轮廓的圆,CSS3 圆球轮廓动画
weixin_39612726的博客
08-03 113
CSS语言：CSSSCSS确定html {background: #111;overflow: hidden;}#wrapper {height: 0;width: 0;position: relative;left: 50%;top: 50vh;margin-left: 57px;}.item {position: absolute;height: 0;width: 0;border: 2px ...
纯CSS3绘制的太阳系行星动画运动轨迹效果特效代码
03-20
画面上各个行星围绕着中心的太阳以自身的速度做圆周运动，动画效果流畅自然，采用纯css3技术实现动画效果。是一款比较经典的css3动画效果源码。建议使用支持css3与HTML5效果较好的火狐或谷歌浏览器
纯CSS3弹性果冻动画特效
06-24
纯CSS3弹性果冻动画特效是一款通过圆周运动不断变换的弹性动画特效。
纯CSS3弹性果冻动画特效.zip
07-11
纯CSS3弹性果冻动画特效是一款通过圆周运动不断变换的弹性动画特效。
纯CSS3弹性果冻动画特效特效代码
03-20
纯CSS3弹性果冻动画特效是一款通过圆周运动不断变换的弹性动画特效。
纯CSS3绘制的太阳系行星动画运动轨迹效果源码.zip
07-04
画面上各个行星围绕着中心的太阳以自身的速度做圆周运动，动画效果流畅自然，采用纯css3技术实现动画效果。是一款比较经典的css3动画效果源码。建议使用支持css3与HTML5效果较好的火狐或谷歌浏览器预览本源码
css3-rotate实现超炫环形旋转特效特效代码
03-20
css3-rotate实现超炫环形旋转特效是一款采用css3 rotate实现的蓝色环形旋转特效代码。
css3旋转的环形菜单动画特效
11-04
css3旋转的环形菜单动画特效 css3旋转的环形菜单动画特效
纯CSS3实现炫酷大数据圆圈动态发光特效动画
weixin_42541698的博客
10-22 2912
//html <div class="circle-wrap" v-if="isFocusProgress"> <div class="circle"> <div class="big-circle"></div> ...
关于CSS中opacity:0, visibility:hidden, display:none的对比区别
shallow77的博客
07-22 1748
文章目录前言opacity:0visibility:hiddendisplay:none总结 前言 前几天参加笔试的时候被考到opacity这个CSS属性，因为平时自己写代码没用过，所以懵了，现在特此总结一下 opacity:0 这个属性是设置元素透明度用的，设置opacity:0后元素会直接变成透明，但还会占用着页面元素的位置，并且设置的事件能够触发。相当于一个透明人站在你面前，虽然看不见，但依旧能触摸到。 visibility:hidden 这个属性是设置元素是否可见的，设置visibility:.
opacity: 0、visibility: hidden、display: none 有啥区别
zhoukaibai的博客
05-18 1311
这三种方式的使用场景分别是：● opacity: 0：隐藏元素，但是需要占据原来的空间；需要注意的是，opacity 属性不仅影响元素的可见性，还影响其交互行为（例如点击事件的响应）● visibility: hidden：隐藏元素，但是需要占据原来的空间，并且保持元素布局不变；● display: none：隐藏元素，并且不需要占据原来的空间，也不影响其他元素的布局。
html5 css3做圆周运动,css3实现元素圆周运动
weixin_34632251的博客
06-17 290
2015-04-09 14:22:50在网页的编写中，好多特效都是通过js来实现，但是还有很多通过css3实现的特效，并且这种方法实现的特效不需要引入外部文件，只需要短短几行代码即可实现，下面这段代码就是由css3来实现的元素进行圆周运动的代码：body{/*背景色*/background:#000;}*{margin:0;padding:0;}.stage{width:400px;height:...
html5 css3做圆周运动,圆周运动的css3特效案例
weixin_39842955的博客
06-17 181
圆周运动的css3特效.box{width:300px;height:300px;margin:200px auto;position:relative;-webkit-perspective:1500px;}.div{width:300px;height:300px;position:absolute;transform-style:preserve-3d;animation:name 8s l...
（纯css3实现）3d效果----环中心球形图片旋转 中心球形图片前面的元素透明度为1 图片后面透明度为0.1
weixin_57145577的博客
08-31 2844
图片示例 html <!-- 转动区域 --> <section id="slideshow"> <div class="entire-content"> <div class="content-carrousel"> <div class="shadow" v-for="(item,index) in funList" @click="toPage(item)"> <svg-icon :icon-class="item
html5 css3做圆周运动,​css3实现圆周运动效果
weixin_39569389的博客
06-17 265
css3新增了transform和animation等新的样式，也可以用来做圆周运动。transform里面有一个变形函数是rotate，这时就需要使用逆向思维。元素本身并不发生运动，而是轨道自身在旋转，会实现视觉上的圆周运动效果html>body{margin-top:100px;}@keyframesrotate1{100%{transform:rotate(360deg);}}@...
html5+css3小实例:炫彩的发光字特效
最新发布
06-28
这个发光字特效是一个很好的HTML5和CSS3小实例，它利用了CSS3中的渐变和动画效果来创建这种炫彩的视觉效果。 首先，我们可以通过CSS3的linear-gradient属性创建一个带有彩虹色渐变的背景图像。接下来，我们创建一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值