css动画之平移旋转变换

最新推荐文章于 2022-09-27 14:34:57 发布

杨九日

最新推荐文章于 2022-09-27 14:34:57 发布

阅读量801

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/qq_42835377/article/details/97618995

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

<!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>

效果图：
在这里插入图片描述

杨九日

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css动画之平移旋转变换

平移旋转：将序列编号进行变换<!DOCTYPE html><html><head> <title>动画</title> <style type="text/css"> /*将下列序列编号进行平移旋转*/ .rules{ list-style: none; counter-reset: rule...
复制链接

扫一扫