HTML+css 会旋转的可乐瓶子

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>可口可乐</title><style>*{margin: 0;padding: 0;}body{height: 100px;/* 用flex来布局 */display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;}.kele{/* 给瓶子本身添加壁纸 */background-image: url(../前端开发网课课程/图片/bizhi.png);/* 设置只水平重复 */background-repeat: repeat-x;/* 将壁纸往下拉一点，水平方向不要动 */background-position-y: 10px;/* 为可乐添加动画 名称 持续时间 方式 无限循环*/animation: bg 5s linear infinite;}/* 现在开始制作动画 */@keyframes bg{/* 设置动画开始时的位置 */from{background-position: 0 10px;}/* 动画结束时的位置 */to{background-position:-537px 10px ;}}/* 使 可乐瓶子 位于页面正中间 */.kele{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><div class="kele"><img src="../前端开发网课课程/图片/body.png" alt=""></div>
</body>
</html>

图片地址：图片地址： https://115.com/s/sw381mk3nif#1-可乐瓶子访问码：x146

ps：来自B站大佬：
xiao-high

HTML+css 会旋转的可乐瓶子相关推荐

小案例 CSS之旋转的可乐瓶
在B站上看到的一个挺不错的css特效,简简单单,做个记录分享. html部分 <body><div class="cola"><img src=&qu ...
HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
css实现旋转的小流星动画
效果如下: 完整代码如下 : <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
js设置css色相旋转_色相旋转颜色方案是否保留了对色盲友好的能力？
js设置css色相旋转 Hue rotation is often an easy way to change the appearance of a plot or figure without t ...
css 图片旋转样式
文章目录前言一.css 图片旋转样式总结前言提示:这里可以添加本文要记录的大概内容: 一.css 图片旋转样式示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务 ...
css 图片旋转并自适应div
import { useState} from 'react' function zimg(params) {const [rotateIndex,setrotateIndex]=useState(0 ...
纯css阴阳旋转js特效代码
下载https://yy123.ink/frontDetail/4629下载纯css阴阳旋转特效代码 dd:
html翻牌动画效果,css实现旋转翻牌动画效果
css动画之旋转翻牌效果,具体内容如下所示: 1.我们先设置两个盒子大小,颜色等等,然后定位重叠在一起,最后再进行动画设置例子如下: .box { height: 300px; width: 300 ...
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示设计思路与核心技术旋转地球效果实现主要 ...

HTML+css 会旋转的可乐瓶子

HTML+css 会旋转的可乐瓶子相关推荐

最新文章

热门文章