首页 > 其他分享 >使用css3给网页元素出场动画让页面动起来

使用css3给网页元素出场动画让页面动起来

时间：2023-09-01 16:01:38浏览次数：50  
标签：css3 动画 1s translateY ease transition transform intro 页面

使用css3给网页元素出场动画让页面动起来

一般情况下网页元素都是静态显示的，能不能做一个幻灯片那样增加个动画出场效果呢

这里使用css实现简单效果

使用css3给网页元素出场动画让页面动起来_html

css样式

test.css

*, *:after, *::before {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, lengend, button, input, textarea, th, td {
	margin: 0;
	padding: 0;
   _background-image:url(about:blank);
   _background-attachment:fixed;
}


/* 设置默认字体 */ 
body, button, input, select, textarea {
	font-family: "微软雅黑","宋体","Arail";
	font-size: 14px;
    outline:none;
}
body{font-size:59.5%;}

/* 列表元素 */ 
ul,ol,li {
	list-style: none;
}

img {
	border: none;
    vertical-align: middle;
}

/* a标签 */ 
a {
	text-decoration: none ; 
    color:#000000 ;
}

a:hover {
	text-decoration: none ;
} 

.container {
    width: 1200px;
    min-width: 1200px;
    margin: 0 auto;
}



.clearfix:after, .clearfix:before {
	content:"";
	display:table
}
.clearfix:after {
	clear:both
}
.clearfix {
	zoom:1
}
.table{display: table;height: 100%}
.table-cell{display: table-cell;vertical-align: middle;}

.title {
	text-align: center
}
.title h3 {
	font-size: 4.2em;
	color: #000;
	margin-bottom: 15px
}
.title p {
	text-transform: uppercase;
	font-size: 1.8em;
	color: #0d6fb8
}
@media (max-width:1500px) {
.title h3 {
	font-size: 3.8em
}
}
@media (max-width:768px) {
.title h3 {
	font-size: 34px;
	margin-bottom: 10px
}
}
@media (max-width:500px) {
.title h3 {
	font-size: 28px;
	margin-bottom: 5px
}
.title p {
	font-size: 16px
}
}
@media (max-width:360px) {
.title h3 {
	font-size: 24px;
	margin-bottom: 5px
}
.title p {
	font-size: 14px
}
}

body, html {
	overflow: hidden;
	overflow-y: auto
}
div[class*=container], section[class*=container], ul[class*=container] {
	margin: 0 auto
}
@media (max-width:1240px) {
div[class*=container], section[class*=container], ul[class*=container] {
	min-width: 100%;
	width: 100%;
	max-width: 100%
}
}

.intro {
	/*padding: 65px 0 80px*/
	/*padding: 5px 0 60px*/
	padding: 5px 0 5px
}
.intro .title span {
	display: inline-block;
	font-size: 1.8em;
	margin-top: 15px;
	transition: color .4s;
	-ms-transition: color .4s;
	-o-transition: color .4s;
	-webkit-transition: color .4s;
	-moz-transition: color .4s
}
.intro .title span:hover {
	color: #ec6c49
}
.intro-item {
	border-top: 1px solid #e6e6e6;
	border-left: 1px solid #e6e6e6;
	/*margin-top: 55px*/
	margin-top: 40px
}
.intro-list {
	text-align: center;
	border-right: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	/*height: 270px;*/
	height: 100px;
	width: 33.33%;
	float: left;
	transition: box-shadow 1s;
	-ms-transition: box-shadow 1s;
	-o-transition: box-shadow 1s;
	-webkit-transition: box-shadow 1s;
	-moz-transition: box-shadow 1s
}
@media (max-width:500px) {
.intro-list {
	width: 50%
}
}

.intro-list:hover {
	box-shadow: 0 0 50px #cdcdcd
}
.intro-list:hover i {
	transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg)
}
.intro-list:nth-child(1) i {
	background: url(img/icon1.png) no-repeat center/contain
}
.intro-list:nth-child(2) i {
	background: url(img/icon2.png) no-repeat center/contain
}
.intro-list:nth-child(3) i {
	background: url(img/icon3.png) no-repeat center/contain
}
.intro-list:nth-child(4) i {
	background: url(img/icon4.png) no-repeat center/contain
}
.intro-list:nth-child(5) i {
	background: url(img/icon5.png) no-repeat center/contain
}
.intro-list:nth-child(6) i {
	background: url(img/icon6.png) no-repeat center/contain
}
.intro-list:nth-child(7) i {
	background: url(img/icon7.png) no-repeat center/contain
}
.intro-list:nth-child(8) i {
	background: url(img/icon8.png) no-repeat center/contain
}
.intro-list:nth-child(9) i {
	background: url(img/icon9.png) no-repeat center/contain
}
.intro-list i {
	display: inline-block;
	width: 41px;
	height: 41px;
	transition: transform 1.2s ease;
	-ms-transition: transform 1.2s ease;
	-o-transition: transform 1.2s ease;
	-webkit-transition: transform 1.2s ease;
	-moz-transition: transform 1.2s ease
}
.intro-list p {
	font-size: 2.2em;
	color: #1a1a1a;
	font-weight: bolder;
	margin: 25px 0 20px
}
.intro-list span {
	line-height: 24px;
	font-size: 1.4em;
	color: #999
}


/* 动画部分 */

.show_right {
    opacity: 0;
    transition: all ease 1s;
    -ms-transition: all ease 1s;
    -o-transition: all ease 1s;
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    transform: translateX(200px);
    -ms-transform: translateX(200px);
    -o-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px)
}

.show_right.scroll-watch-in-view {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0)
}

.show_left {
    opacity: 0;
    transition: all ease 1s;
    -ms-transition: all ease 1s;
    -o-transition: all ease 1s;
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    transform: translateX(-200px);
    -ms-transform: translateX(-200px);
    -o-transform: translateX(-200px);
    -webkit-transform: translateX(-200px);
    -moz-transform: translateX(-200px)
}

.show_left.scroll-watch-in-view {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0)
}
 

.show_bottom {
    opacity: 0;
    transition: transform cubic-bezier(.4,0,.2,1) 1.5s,opacity cubic-bezier(.4,0,.2,1) 1.5s;
    -ms-transition: transform cubic-bezier(.4,0,.2,1) 1.5s,opacity cubic-bezier(.4,0,.2,1) 1.5s;
    -o-transition: transform cubic-bezier(.4,0,.2,1) 1.5s,opacity cubic-bezier(.4,0,.2,1) 1.5s;
    -webkit-transition: transform cubic-bezier(.4,0,.2,1) 1.5s,opacity cubic-bezier(.4,0,.2,1) 1.5s;
    -moz-transition: transform cubic-bezier(.4,0,.2,1) 1.5s,opacity cubic-bezier(.4,0,.2,1) 1.5s;
    transform: translateY(60px);
    -ms-transform: translateY(60px);
    -o-transform: translateY(60px);
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px)
}

.show_bottom.scroll-watch-in-view {
    opacity: 1;
    transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0)
}

.rotateY {
    opacity: 0;
    transform: rotateY(65deg) translateY(90px);
    -ms-transform: rotateY(65deg) translateY(90px);
    -o-transform: rotateY(65deg) translateY(90px);
    -webkit-transform: rotateY(65deg) translateY(90px);
    -moz-transform: rotateY(65deg) translateY(90px);
    transition: transform ease 1.6s,opacity ease 1s;
    -ms-transition: transform ease 1.6s,opacity ease 1s;
    -o-transition: transform ease 1.6s,opacity ease 1s;
    -webkit-transition: transform ease 1.6s,opacity ease 1s;
    -moz-transition: transform ease 1.6s,opacity ease 1s
}

.rotateY.scroll-watch-in-view {
    opacity: 1;
    transform: rotateY(1deg) translateY(0);
    -ms-transform: rotateY(1deg) translateY(0);
    -o-transform: rotateY(1deg) translateY(0);
    -webkit-transform: rotateY(1deg) translateY(0);
    -moz-transform: rotateY(1deg) translateY(0)
}

html

test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"   content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width"/>
    <title>页面动画</title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <link rel="stylesheet" href="test.css"/>  
  <body>
	<section class="intro container">
				<div data-scroll-watch class="title show_bottom">
					<a  href="/html/fwxm">
						<h3>项目</h3>
					</a>
					<p></p>
				</div>
				<!-- rotateY -->
				<ul data-scroll-watch class="intro-item clearfix rotateY">
					<li class="intro-list table">
						<div class="table-cell"><a href="#"><i></i>
						<p>项目1</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a  href="#"><i></i>
						<p>项目2</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a  href="#"><i></i>
						<p>项目3</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a  href="#"><i></i>
						<p>项目4</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a  href="#"><i></i>
						<p>项目5</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a  href="#"><i></i>
						<p>项目6</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a  href="#"><i></i>
						<p>项目7</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a  href="#"><i></i>
						<p>项目8</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a  href="#"><i></i>
						<p>项目9</p>
						</a></div>
					</li>
				</ul>
				
			</section>
			
		 <!-- show_left -->
			<section class="intro container">				 
				
				<ul data-scroll-watch class="intro-item clearfix show_left">
					<li class="intro-list table">
						<div class="table-cell"><a href="#"><i></i>
						<p>项目1</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a  href="#"><i></i>
						<p>项目2</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a  href="#"><i></i>
						<p>项目3</p>
						</a></div>
					</li>
				 
				</ul>
				
			</section>
			
				<!--show_right-->
			<section class="intro container">				 
				<ul data-scroll-watch class="intro-item clearfix show_right">
					<li class="intro-list table">
						<div class="table-cell"><a   href="#"><i></i>
						<p>项目1</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a  href="#"><i></i>
						<p>项目2</p>
						</a></div>
					</li>
					<li class="intro-list table">
						<div class="table-cell"><a href="#"><i></i>
						<p>项目3</p>
						</a></div>
					</li>
				 
				</ul>				
			</section>
			
				<script type="text/javascript" src="jquery.min.js"></script>
				<script type="text/javascript" src="scorllwatch.js"></script>
				
     <script>
		 $(function() {
			 var sw = new ScrollWatch({			 	 
				watchOffset: -50,				 	 
			 	onElementInView: function(data) {
			 	  //
			 	}
			 });			 
		 })		 
	 </script>
  </body>
</html>

使用css3给网页元素出场动画让页面动起来_scorllwatch_02

标签：css3,动画,1s,translateY,ease,transition,transform,intro,页面
From： https://blog.51cto.com/u_12668715/7323962

相关文章

  • 开发指导—利用CSS动画实现HarmonyOS动效（一）
    注：本文内容分享转载自HarmonyOS Developer官网文档一. CSS语法参考CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容JS的类Web开发范式支持的组件样式。尺寸单位● 逻辑像素px（文档中以......
  • 解决Activity启动黑屏及设置android:windowIsTranslucent不兼容activity切换动画问题
    注：如果设置和取消会造成不同bug，冲突的解决设置不同的style，具体另行百度。。。。。。。之前在做APP的时候不太关注这个问题，因为自己在使用其他APP的时候也会在应用启动的初始有一个黑屏闪过后才会出现应用的欢迎页。直到最近开发过程中发现自己在欢迎页启动的线程由于请求和......
  • js实现html页面翻译
    引入js库 <scriptsrc="https://res.zvo.cn/translate/translate.js"></script> 在页面最底部加入js代码//translate.ignore.tag.push('span');//翻译时追加上自己想指定忽略的tag标签，凡是在这里面的，都不进行翻译。//translate.ignore.class.push('test'); //翻译时指定......
  • H5 及 web 页面微信授权登录流程
    https://blog.csdn.net/joe0235/article/details/115935515一、事先准备工作配置参数测试公众平台信息（测试号相关配置示例）：1、打开公众平台的测试账号2、配置js接口安全域名3、扫码关注测试公众号4、修改网页授权地址配置授权回调的域名，至于什么是OAuth2.0，大家自行百度吧。这......
  • el-input出发回车事件时会导致页面刷新
    原因分析：当表单只有一个文本框时，按下回车将会触发表单的提交事件，导致页面的刷新。1：el-input上使用回车事件<el-inputv-model="input"@keyup.enter.native="search1">解决方法一：在el-form表单加上@submit.native.prevent<el-form@submit.native.prevent><el-inputv-......
  • 过渡与动画
    过渡transition:过度属性持续时间过度函数过度延迟（谁过渡，过渡时间，怎么过渡，多久后过渡）过渡属性针对哪个css属性应用过渡，例如填写transform，则表示仅对transform属性应用过渡。若填写all或不填写，则表示针对所有css属性都应用过渡。持续时间css属性变化所持续时间，需要带......
  • 页面加载速度优化的12个建议
    1、合并Js文件和CSS将JS代码和CSS样式分别合并到一个共享的文件，这样不仅能简化代码，而且在执行JS文件的时候，如果JS文件比较多，就需要进行多次“Get”请求，延长加载速度，将JS文件合并在一起后，自然就减少了Get请求次数，提高了加载速度。2、Sprites图片技术Spriting是一种网页图片应用处理......
  • 页面ajax刷新的一种方式
           在做页面异步刷新时，以前的做法是，通过$.ajax()请求返回json格式的数据，然后通过回调方法，将数据一一解析出来，放到标签元素中，再与原页面衔接起来。这里有另一种做法：如：一个页面中有两个TAB，每个TAB都对应有一个具有翻页功能的list。这时如果页面上还有其他的元素，那么通过$......
  • bootstrap页面集成jquery异步请求
    jquery技术是对原生js技术的封装和优化，实现页面上的功能能独立的运行和提交给后台程序，相比之前的用表单整体提交数据可以提高系统的性能，加快响应速度。要在项目中使用jquery必须先引入相关的js脚本，在项目中导入这些js脚本文件：导入后接下来再进行相关技术的操作。实现效果，在一个页面......
  • 在低代码平台执行 API 请求并将结果显示在页面上
    低代码开发平台（Low-CodeDevelopmentPlatform）是一种用于构建应用程序的软件开发环境，它允许开发者通过图形化的方式，而非传统的手动编码方式来创建应用程序。这种方式大大减少了开发应用程序所需的代码量，因此称为低代码。低代码平台的核心是其拖放式的用户界面，这允许开发者通过直......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99