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

小米官网盒子阴影

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

css:动画小米官网盒子阴影心跳动画相关推荐

用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
HTML+CSS制作小米官网
经过一个星期学习了中国大学MOOC上北京林业大学精品课--<Web前端开发>(对小白来说太友好).看完之后为了巩固学过的知识点,对着小米官网的布局敲了一遍.本着记录学习的想法发了这篇文章. ...
HTML+CSS实现小米官网顶部导航栏
效果图效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
教你用html和css仿制小米官网页面！
一.使用的工具? 博主使用的是Visual Studio Code.这个是真的方便啊,体型小不说,好用的插件还不少!赞一个.不过为了之后的后端学习,我开始慢慢转向用IDEA 了,这个软件使用起来也是真 ...
HTML/CSS实现小米官网搜索框效果
效果图: 需求分析: 1.输入框焦点事件 onfocus:成为焦点, 点击输入框的时候,出现闪烁光标,此时可以输入内容. onblur :失去焦点, 点击页面空白区域,光标消失.此时不可以输入内容. ...
教你用html和css仿制小米官网页面
教你仿制小米官网页面(仅用html+css) 前言哈哈哈,我又来了.经过前面的不懈探索.我感觉我对html和css已经比较熟练了.这是在学完c语言和java后,学习的第三门语言(HTML算不上编程语 ...
静态小米官网主页html5设计,web案例-css制作小米官网产品展示
web前端群,189394454,有视频.源码.学习方法等大量干货分享效果知识点: 企业布局思维的巧妙运用, DIV加CSS,css样式拆解与归类,css3过度与阴影,定位与动,常用如何搭配,开发标 ...

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

css:动画小米官网盒子阴影心跳动画相关推荐

最新文章

热门文章

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

css:动画 小米官网盒子阴影 心跳动画相关推荐

最新文章

热门文章

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

css:动画小米官网盒子阴影心跳动画相关推荐