网站首页编程语言正文

css:动画小米官网盒子阴影心跳动画

作者：小强有个dream 更新时间： 2022-04-04 编程语言

小米官网盒子阴影

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		ul,
		ol {
			list-style: none;
		}

		input,
		button {
			outline: none;
			border: none;
		}

		a {
			text-decoration: none;
		}

		.clearfix::before,
		.clearfix::after {
			content: "";
			height: 0;
			line-height: 0;
			display: block;
			visibility: hidden;
		}

		.clearfix::after {
			clear: both;
		}




		body {
			padding: 100px;
			background-color: #f5f5f5;
		}

		.product li {
			float: left;
			width: 234px;
			height: 246px;
			padding: 34px 0 20px;
			z-index: 1;
			margin-left: 14px;
			margin-bottom: 14px;
			background: #fff;
			-webkit-transition: all .2s linear;
			transition: all .2s linear;
			position: relative;
		}

		.pro-img {
			width: 150px;
			height: 150px;
			margin: 0 auto 18px;
		}

		.pro-img a {
			width: 100%;
			height: 100%;
		}

		.pro-img img {
			display: block;
			width: 100%;
			height: 100%;
		}

		.product li h3 {
			margin: 0 10px;
			font-size: 14px;
			font-weight: 400;
			text-align: center;
		}

		.product li h3 a {
			color: #333;
		}

		.desc {
			margin: 0 10px 10px;
			height: 18px;
			font-size: 12px;
			text-align: center;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			color: #b0b0b0;
		}

		.price {
			font-size: 14px;
			margin: 0 10px 10px;
			text-align: center;
			color: #ff6700;
		}

		.price del {
			color: #b0b0b0;
		}

		.review {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 3;
			width: 234px;
			height: 0;
			overflow: hidden;
			font-size: 12px;
			background: #ff6700;
			opacity: 0;
			-webkit-transition: all .2s linear;
			transition: all .2s linear;
		}

		.review a {
			color: #757575;
			display: block;
			padding: 8px 30px;
			outline: 0;
		}

		.review a span {
			display: block;
			margin-bottom: 5px;
			color: #fff;
		}

		.product li:hover {
			-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
			box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
			-webkit-transform: translate3d(0, -2px, 0);
			transform: translate3d(0, -2px, 0);
		}

		.product li:hover .review {
			opacity: 1;
			height: 76px;
		}
	</style>
</head>

<body>
	<div class="product">
		<ul>
			<li>
				<div class="pro-img">
					<a href="#">
						<!-- 产品： 比如电脑 -->
						<img src="https://img2.baidu.com/it/u=1400893503,3291252764&fm=26&fmt=auto" alt="">
					</a>
				</div>
				<h3><a href="#">小米电视4A 43英寸青春版</a></h3>
				<p class="desc">全高清屏 / 人工智能语音</p>
				<p class="price">
					<span>1499</span>元
					<del>1699</del>
				</p>
				<div class="review">
					<a href="#">
						<span class="msg">一如既往的好，小米情怀</span>
						<span class="auther"> 来自于 惊喜 的评价 </span>
					</a>
				</div>
			</li>
		</ul>
	</div>
</body>

</html>

心跳动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>勇敢的心</title>
  <style type="text/css">
    html {
      height: 100%;
      overflow:hidden; /*设置超出部分内容隐藏*/
    }
    body {
      height: 100%;
      /*设置渐变背景*/
      background:-webkit-linear-gradient(bottom, #fff 0%,pink 100%);
    }
    .chest {
      width: 500px;
      height: 390px;
      margin:100px auto;
      position: relative;
    }
    .chest div {
      width: 220px;
      height: 220px;
      background-color: #f50a45;
      position: absolute;
     
    }
    /*交集选择器，设置共有样式的*/
    .left, 
    .right {
      top: 0;
      border-radius: 50%;
      box-shadow: 0 0 5px 5px rgba(213, 9, 60, 0.5); 
      animation:beat 1s linear infinite;
    }
    .left {
      left: 60px;
    }
    .right {
      right: 60px;
    }

    .chest .side {
      width: 212px;
      height: 212px;
      left: 50%;
      top:50%;
      transform: translate(-50%,-50%) scale(1) rotate(45deg);
      box-shadow: 8px 8px 10px -3px rgba(213, 9, 60, 0.5);
      animation:beat1 1s linear infinite;
      border-radius: 0px 0px 10px 0px;
    }
    /*定义心跳动画*/
    @keyframes beat {
      0% {
        transform: scale(1) rotate(45deg);
        box-shadow: 0 0 40px rgba(213, 9, 60,0.3);
      }
      50% {
        transform: scale(1.1) rotate(45deg);
        box-shadow: 0 0 40px rgba(213, 9, 60, 1);
      }
      100%{
        transform: scale(1) rotate(45deg);
        box-shadow: 0 0 40px rgba(213, 9, 60,0.3);
      }
    }
    /*由于和我们底部盒子居中 有属性冲突 ，所以底部盒子需要另外定义动画*/
    @keyframes beat1 {
      0% {
        transform: translate(-50%,-50%) scale(1) rotate(45deg);
        box-shadow: 13px 13px 28px rgba(213, 9, 60,0.2);
      }
      50% {
        transform: translate(-50%,-50%) scale(1.1) rotate(45deg);
        box-shadow: 13px 13px 28px rgba(213, 9, 60, 0.3);
      }
      100%{
        transform: translate(-50%,-50%) scale(1) rotate(45deg);
        box-shadow: 13px 13px 28px rgba(213, 9, 60,0.2);
      }
    }
  </style>
</head>
<body>
  <div class="chest">
      <div class="right"></div>
      <div class="left"></div>
      <div class="side"></div>
  </div>
</body>
</html>

原文链接：https://blog.csdn.net/qq_36413371/article/details/120393989

上一篇：快应用开发自定义事件快应用层级图片对象Image 获取元
下一篇：使用uniapp封装简易通用的ajax请求以及携带token

网站首页 编程语言 正文

css:动画 小米官网盒子阴影 心跳动画

相关推荐

网站首页编程语言正文

css:动画小米官网盒子阴影心跳动画