本篇内容主要讲解“css3代码怎么实现自定义W形运行轨迹”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3代码怎么实现自定义W形运行轨迹”吧!代码如下:<!DOCTYPE h
本篇内容主要讲解“css3代码怎么实现自定义W形运行轨迹”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3代码怎么实现自定义W形运行轨迹”吧!
代码如下:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0; } #div{ width:900px; height:400px; border:2px solid black; margin: 100px auto; } #span{ float:left; display: block; font-size: 100px; width: 100px; height: 100px; line-height: 80px; text-align: center; border-radius: 50%; background: radial-gradient(blue,green); animation: move 4s ease 0s infinite alternate; } @keyframes move { 0%{ transfORM: translate(0px,0px); } 25%{ transform: translate(200px,300px); } 50%{ transform: translate(400px,0px); } 75%{ transform: translate(600px,300px); } 100%{ transform: translate(800px,0px); } } </style></head><body><div id="div"> <span id="span">w</span></div></body></html>
css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等
到此,相信大家对“CSS3代码怎么实现自定义W形运行轨迹”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
--结束END--
本文标题: CSS3代码怎么实现自定义W形运行轨迹
本文链接: https://www.lsjlt.com/news/347933.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0