css target animation 切换 动画

最新推荐文章于 2022-11-10 09:19:15 发布
最新推荐文章于 2022-11-10 09:19:15 发布
阅读量218 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46388469/article/details/104938355
版权
  1. 这是博主的第一篇博客，有些仓促，就记录一下自己的学习吧。博主刚开始学习，源码会暴露出错误，以及在设计上思路的缺限，望指正。
  2. 上图在这里插入图片描述
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<style>
		
		.seleBoxA {
			width: 500px;
			height: 300px;
			border: 5px solid black;
			border-radius: 20px;
			margin: 100px auto;
			/* box-sizing: border-box; */
			overflow: hidden;
			position: relative;
		}

		.seBoA01 {
			width: 500px;
			height: 300px;
			border: 5px solid black;
			border-radius: 20px;
			position: relative;
		}

		/* 左右按钮 */
		.left {
			left: 0px;
			top: 100px;
			width: 52px;
			height: 87px;
			position: absolute;
		}
		.right {
			right: 0px;
			top: 100px;
			width: 52px;
			height: 87px;
			position: absolute;
		}
		/* 下层切换按钮 */
		.seBoA01 div{
			position: absolute;
			z-index: 999;
			right: 15px;
			bottom: 13px;
		}
		
		.seBoA01 div>a{
			display: inline-block;
			padding: 5px 10px;
			color: #333;
			font-size: 14px;
			text-decoration: none;
			font-weight: bold;
			background: #c1c1c1;
			border-radius: 5px;
		}
		.seBoA01 div>a:hover,.seBoA01 div>a:active{
			color: whitesmoke;
			cursor: pointer;
			background: #8c8a8a;
		}
		
		.right:hover{
			 background-color: #666464;
		}
		.left:hover{
			 background-color: #666464;
		}
		/* 创建动画 */
		@keyframes change{
			from{transform:translateY(100%) ;}
			to{transform: translateY(0%);}
		}
		.seBoA01:target {
			animation: change .35s .05s linear forwards;;
			/* animation-delay: .05s;
			animation-duration: .35s; */
		}
		
		
	</style>
</head>

<body>
	<dl class="seleBoxA" id="idseleBoxB">
		
		<dt class="seBoA01" id="idA01">
			<h1>第一张</h1>
			<p>期待更多布局加入</p>
			<p>期待更多布局加入</p>
			<p>期待更多布局加入</p>
			<p>期待更多布局加入</p>
			<a href="#idA02"><img src="img/rightBtn.png" class="right"></a>
			<a href="#idA05"><img src="img/leftBtn.png" class="left"></a>
			<div >
				<a href="#idA01" style="background-color: grey;">1</a>
				<a href="#idA02">2</a>
				<a href="#idA03">3</a>
				<a href="#idA04">4</a>
				<a href="#idA05">5</a>
			</div>
		</dt>

		<dt class="seBoA01" id="idA02">
			<h1>第二张</h1>
			<p>期待更多布局加入期待更多布局加入</p>
			<p>期待更多布局加入期待更多布局加入</p>
			<p>期待更多布局加入期待更多布局加入</p>
			<p>期待更多布局加入期待更多布局加入</p>
			<a href="#idA03"><img src="img/rightBtn.png" class="right"></a>
			<a href="#idA01"><img src="img/leftBtn.png" class="left"></a>
			<div >
				<a href="#idA01">1</a>
				<a href="#idA02" style="background-color: grey;">2</a>
				<a href="#idA03">3</a>
				<a href="#idA04">4</a>
				<a href="#idA05">5</a>
			</div>
			
		</dt>

		<dt class="seBoA01" id="idA03">
			<h1>第三张</h1>
			<p>期待更多布局加入布局加</p>
			<p>期待更多布局加入布局加</p>
			<p>期待更多布局加入布局加</p>
			<p>期待更多布局加入布局加</p>
			<a href="#idA04"><img src="img/rightBtn.png" class="right"></a>
			<a href="#idA02"><img src="img/leftBtn.png" class="left"></a>
			<div >
				<a href="#idA01">1</a>
				<a href="#idA02">2</a>
				<a href="#idA03"  style="background-color: grey;">3</a>
				<a href="#idA04">4</a>
				<a href="#idA05">5</a>
			</div>
		</dt>
		
		<dt class="seBoA01" id="idA04">
			<h1>第四张</h1>
			<p>期待更多布局加入布局加</p>
			<p>期待更多布局加入布局加</p>
			<p>期待更多布局加入布局加</p>
			<p>期待更多布局加入布局加</p>
			<a href="#idA05"><img src="img/rightBtn.png" class="right"></a>
			<a href="#idA03"><img src="img/leftBtn.png" class="left"></a>
			<div >
				<a href="#idA01">1</a>
				<a href="#idA02">2</a>
				<a href="#idA03">3</a>
				<a href="#idA04" style="background-color: grey;">4</a>
				<a href="#idA05">5</a>
			</div>
		</dt>

		<dt class="seBoA01" id="idA05">
			<h1>第五张</h1>
			<p>期待更多布局加入布局加</p>
			<p>期待更多布局加入布局加</p>
			<p>期待更多布局加入布局加</p>
			<p>期待更多布局加入布局加</p>
			<a href="#idA01"><img src="img/rightBtn.png" class="right"></a>
			<a href="#idA04"><img src="img/leftBtn.png" class="left"></a>
			<div >
				<a href="#idA01">1</a>
				<a href="#idA02">2</a>
				<a href="#idA03">3</a>
				<a href="#idA04">4</a>
				<a href="#idA05" style="background-color: grey;">5</a>
			</div>
		</dt>
		
		</dl>

</body>
  1. 写完后，我才明白它这里有个通病是去不掉的，锚点链接进行时内容区会置顶。就这样吧，希望自己能坚持下去。
  2. 例外 那个左右按钮图在这里插入图片描述
    在这里插入图片描述
秃头小hen
关注
CSS3animation动画 + 动画如何切换
季诗筱的博客
03-06 3096
之前做转盘的时候，用的就是animation，然后加@keyframes。当时时间挺紧张的，就在网上搜了下怎么用，就直接用了。现在有时间了，好好看了一下具体的用法。 —《图解CSS3》         CSS3的animation属性可以像Flash制作动画一样，通过关键帧控制动画的每一步，实现复杂的动画效果。 属性： animation-name:指定@keyframes关键帧的名字
css 变量_如何将CSS变量用于动画
Web design 教程小屋
07-09 1147
当我们在讨论中提到CSS时，我们通常将其称为愚蠢的语言。 一种陈述性的语言，缺乏逻辑和洞察力； 但这不是真实的现实。 多年来，开发人员一直渴望标准CSS中的变量，长期以来一直被诸如LESS和Sass之类的预处理器所破坏。 CSS变量不仅是开发人员的实际选择，而且还可以在动画场景中使用。 还在怀疑吗？ 继续了解更多！ 可变基础 CSS变量是用于在样式表中重用的存储值。 使用自定义var()函...
采用:target来实现锚点的动画
Focus-Fe
01-19 339
    本代码片段来自gruntjs的官方文档：      比如： http://gruntjs.com/configuring-tasks#files      &lt;a class="anchor" href="#files" name="files"&gt;Files&lt;/a&gt;   @keyframes 'blink'{ 0%{opacity:1.0}...
ext js window的 AnimateTarget属性
weixin_30644369的博客
11-01 306
window的显示从这个目标控件开始以动画形式渐变地显示出来再渐变的hide（）; 嘿嘿。。。 Modal="true" 设置在show及hide的同时是否有蒙板效果 转载于:https://www.cnblogs.com/AndySong/archive/2009/11/01/1593796.html...
【CSS】css转换、css过渡、css动画_09
青春木鱼的博客
11-10 1406
css转换：改变元素在页面中的位置，大小，角度，形状；css过度：css值在两个状态间，在一段时间内平缓的变化过程；css动画：通过@keyframes 规则，您能够创建动画。
css过渡转变动画,css3过渡（transition）和动画（animation）变换（transform ）
weixin_36065817的博客
08-04 922
1. 过渡(transition)菜鸟教程：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。transition： CSS属性名 持续时间 过渡效果(默认ease) 延迟时间(默认0)；transition：transition-property transition-duration transition-timing-function transition-timing...
纯CSS3实现TAB选项卡切换特效代码
03-20
首先，选项卡切换的基本原理是利用CSS3的伪类选择器，如`:hover`, `:active`, 和 `:target`，以及`transition`和`animation`属性来实现动态效果。在我们的例子中，我们可能有若干个`<div>`或`<li>`元素代表选项卡，...
简单好看CSS3按钮点击气泡动画特效.zip
07-11
 //reset animation  e.target.classList.remove('animate');  e.target.classList.add('animate');  setTimeout(function(){  e.target.classList.remove('animate');  },700); };
CSS3 中的动画（animation 篇）
大概关于
05-30 1467
一些解释 CSS3 时代，动画不再必须依赖 js，变得更加简单、高效。 首先介绍一个常用动画库 animate.css，这里是它的 github 仓库 看看效果 先通过 cdn 方式引入 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"&...
HTML5 css3网页切换特效展示.rar
07-10
CSS3则是对CSS的扩展，它提供了更多的选择器（如伪类选择器`:hover`、`:active`、`:target`等），更丰富的样式属性（如边框半径`border-radius`、阴影`box-shadow`、渐变`gradient`），以及强大的动画和过渡效果（如...
Animation——View动画
奋斗&努力
01-22 1223
什么是动画 动画有下面两种情况 同一个图形通过视图在界面上进行透明度,缩放,旋转,平移的变化(View动画) 在界面的同一个位置上不断切换显示不同的图片(Drawable动画) 动画的分类 View Animation Drawable Animation Android中提供了两种实现动画的方式 纯编码的方式 xml配置的方式 动画在应用中是非常常见的界面效果, 也是提
动画函数
娓娓道来
08-05 417
//设置任意的一个元素,移动到指定的目标位置 function animate(element, target) { clearInterval(element.timeId); //定时器的id值存储到对象的一个属性中 element.timeId = setInterval(function () { //获取元素的当前的位置,数字...
不使用JS，使用CSS3 target 以及 动画效果实现，点击一下弹出，并且保持弹出状态，然后再点击一下弹回的导航栏（或者可以叫做按钮）
qq_29469941的博客
09-14 5708
html> html> head> meta charset="utf-8"/> style> .p-wrap-2 { position: relative; top: 30px; width: 500px; height: 300px; ba
关于:target与定位动画的奇怪现象
bafudanbi37558的博客
03-24 129
今天在制作首页导航图特效demo时，无意发现一个奇怪的交互现象，故记录 经测试，简化了触发该现象的代码，如下： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> @keyfram...
HTML5--拖放事件与dataTransfer对象
热门推荐
Meskjei的博客
04-04 1万+
文章目录简介拖放事件dataTransfer对象方法例子 简介 若不使用HTML5的拖放事件，我们仍可以通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。 然而这样实现的拖拽仅仅是交互上的，即只是显示上的变化，并没有什么实质性的功能。而HTML5中直接提供了拖放的API，只要通过监听元素的拖放事件就能实现各种拖放功能。 若要拖放某个元素，则必须将其...
CSS过渡，转换与动画
qi_bai_jin的博客
10-04 4072
过渡，转换与动画的熟练应用能够将页面实现很好的效果，给用户一个更棒的体验，本文主要讲了过渡，转换与动画的基础，并涵盖了部分实战题目供大家练习，希望对大家有所帮助。
vue实现可拖拽列表组件
xiaobaige6084的博客
06-18 2357
列表内容和样式在外部自定义，话不多说，直接上代码 1. 用drag事件实现，唯一不好的是拖拽时的半透明框没法修改 <template> <divclass="list"ref="listRef1"@mousedown="drag"@mousemove='dragover'@mouseup='dragend'@mouseout="out"> <divclass="list-item"v-for="(item,index)inlistDat...
ext panel 及其 子类 动画属性 animateTarget 设置
xingtianyiyun的专栏
07-27 5304
animateTarget : String/Element id或者一个元素，作为窗口被打开时动画效果的起始点 (默认值为 null，没有动画效果)。 id不用说了  element 获取 可以   ext 对象中的 getEl();方法获取 var win =new Ext.Window({           animCollapse :true,
css3之target选择器
hhlljj0828的博客
06-17 718
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; list-style: none; box-sizing: b
css动画animation 旋转动画
最新发布
07-19
CSS动画中的旋转动画通常通过`@keyframes`规则来创建，它允许你定义一系列关键帧，描述元素从初始状态到最终状态的变化过程，包括旋转的角度。例如： ```css @keyframes rotate { 0% { transform: rotate(0deg); }...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值