hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

【杂谈】Css3怎样完成扭转挪动动画殊效

2019-11-18杂谈搜奇网51°c
A+ A-
本篇文章主要给人人引见 css3动画完成扭转殊效的要领。

css即层叠款式表,想必进修前端的小伙伴们已异常熟习了。那末人人应当都晓得,一个炫酷的动画殊效,能使你的网站显得越发嵬峨上,雄厚内容吸收用户。

下面我们就给人人引见一个简朴风趣的动画殊效,也就是完成图片扭转结果。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3完成扭转挪动动画殊效</title>
<head>
    <style>
.main{
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    border-radius: 20px;
    background: red;
    position: relative;
    top: 30px;
    animation: asd 5s;
}
        @keyframes asd {
            0 %{transform: rotate(0deg);}
            25%{transform: rotate(60deg);left: 0px;}
            50%{left:500px;}
            75%{transform: rotate(-520deg);}
            100%{transform: rotate(0deg);left: 0px;}
        }
 </style>
</head>
<body>

<div class="main">
    动画
</div>
</body>
</html>

结果如下图:


css3中相干主要属性引见:

transform :

transform属性示意向元素运用 2D 或 3D 转换,能够对元素举行扭转、缩放、挪动或倾斜。

@keyframes:

经由过程 @keyframes 划定规矩,您能够建立动画。也就是说这里的@keyframes只是用于定义动画,并没有现实寄义。

而css动画的完成道理,也就是从一个css款式逐步变换为另一个css款式。

个中以百分比(或许"from" 和 "to")来划定转变发作的时候。(0% 是动画的最先时候,100% 动画的完毕时候。)

只需人人控制了css动画道理,那末想要经由过程纯css做大多半酷炫的结果也是异常轻易完成的。

本篇文章就是关于css3动画完成扭转挪动殊效的具体要领引见,简朴易懂,愿望对须要的朋侪有所协助!

想要相识更多前端相干学问,能够关注Ki4网CSS3视频教程、CSS视频教程、Bootstrap教程等等相干教程,迎接人人参考进修!

以上就是Css3怎样完成扭转挪动动画殊效的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【杂谈】Css3怎样完成扭转挪动动画殊效

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

本文来源:搜奇网

本文地址:https://www.sou7.cn/281897.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>