您的位置：首页 > Web前端 > CSS

css动画之平移旋转变换

2019-07-28 20:35 387 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_42835377/article/details/97618995

平移旋转：将序列编号进行变换

<!DOCTYPE html>
<html>
<head>
<title>动画</title>
<style type="text/css">

/*将下列序列编号进行平移旋转*/
.rules{
list-style: none;
counter-reset: rulecount 2;/*计数器重置，命名为rulecount*/
}
.rules li{
counter-increment: rulecount;/*以此计数器递增*/
position: relative;/*为li设置定位（相对定位）*/
}
.rules li:before{
background: #637ab7;
content: '$' counter(rulecount);/*将计数器和标符写进伪元素before内*/
position: absolute;/*绝对定位后，标号自动跑到区块左上角*/
transform-origin: 100% 100%;/*将原点位置设置为右下角*/
transform: translate(-100%,-100%) rotate(-90deg);/*进行平移旋转*/
}
</style>
</head>
<body>
<ol class="rules" start="3">
<li>today is 2019-7-28,hot</li>
<li>list-style:none;去掉列表的默认样式（去掉编号）</li>
<li>counter-reset:rulecount 2;当前计数器已经重置为rulecount（计数器的名字）的值</li>
<li>counter-increme：rulecount；每一项都以rulecount递增</li>
<li>content：'$' counter(rulecount);在rulecount前面加上符号$</li>
<li>哦耶</li>
</ol>
</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航