CSS 制作3D旋转视频

最新推荐文章于 2023-11-22 18:37:31 发布
最新推荐文章于 2023-11-22 18:37:31 发布
阅读量133 收藏
点赞数
原文链接：http://www.cnblogs.com/potato-lee/p/8544597.html
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作3D旋转视频</title>
    <style>
        body {
            margin-top: 5em;
            text-align: center;
            color: #414142;
            background: rgb(246,241,232);
            background-image:-ms-radial-gradient(farthest-side ellipse at center,rgba(246,241,232,85)39%,rgba(212,204,186,5)100%),url(http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg);
            background-image:-webkit-radial-gradient(farthest-side ellipse at center,rgba(246,241,232,85)39%,rgba(212,204,186,5)100%),url(http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg);
            background-image:radial-gradient(farthest-side ellipse at center,rgba(246,241,232,85)39%,rgba(212,204,186,5)100%),url(http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg);
            /* 任务二、控制背景图像尺寸*/
            background-size:cover;
        }

        h1, .item, .information {
            display: block;
            font-size: 25px;
            font-weight: normal;
            /*margin: 2em auto;*/
        }

        a {
            color: #414142;
            font-style: normal;
            text-decoration: none;
            font-size: 20px;
        }

        a:hover {
            text-decoration: underline;
        }

        #container {
            margin: 0 auto;
            width: 1024px;
        }

        .wrapper {
            display: inline-block;
            width: 310px;
            height: 100px;
            vertical-align: top;
            margin: 1em 1.5em 2em 0;
            cursor: pointer;
            position: relative;
            font-family: Tahoma, Arial;
            -webkit-perspective: 4000px;
            -moz-perspective: 4000px;
            -ms-perspective: 4000px;
            -o-perspective: 4000px;
            perspective: 4000px;
        }

        .item {
            height: 100px;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            /*任务三、给每个条目增加过渡动画效果*/
            transition:transform .6s;
            transition:-webkit-transform .6s;

        }

        .item:hover {
            /*任务四、悬浮状态改变每个列表项的transform效果*/
            transform:translateZ(-50px) rotateX(95deg);
            -webkit-transform:translateZ(-50px) rotateX(95deg);
            -moz-transform:translateZ(-50px) rotateX(95deg);
            -o-transform:translateZ(-50px) rotateX(95deg);
            -ms-transform:translateZ(-50px) rotateX(95deg);
        }

        .item img {
            display: block;
            position: absolute;
            top: 0;
            /*任务五、设置列表项图片的圆角和阴影效果*/
            border-radius:15px;
            box-shadow:0 3px 8px rgba(0,0,0,.3);
            -webkit-transform: translateZ(50px);
            -moz-transform: translateZ(50px);
            -ms-transform: translateZ(50px);
            -o-transform: translateZ(50px);
            transform: translateZ(50px);
            -webkit-transition: all .6s;
            -moz-transition: all .6s;
            -ms-transition: all .6s;
            -o-transition: all .6s;
            transition: all .6s;
            width: 310px;
            height: 100px;
        }

        .item .information {
            display: block;
            position: absolute;
            top: 0;
            height: 80px;
            width: 290px;
            text-align: left;
            border-radius: 15px;
            padding: 10px;
            font-size: 12px;
            text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
            box-shadow: none;
            background: rgb(236,241,244);
            /*任务六、给底层显示文本的层级设置渐变效果*/
            box-shadow:none;
            text-shadow:1px 1px 1px 1px rgba(255,255,255,.5);
            -webkit-transform: rotateX(-90deg) translateZ(50px);
            -moz-transform: rotateX(-90deg) translateZ(50px);
            -ms-transform: rotateX(-90deg) translateZ(50px);
            -o-transform: rotateX(-90deg) translateZ(50px);
            transform: rotateX(-90deg) translateZ(50px);
            -webkit-transition: all .6s;
            -moz-transition: all .6s;
            -ms-transition: all .6s;
            -o-transition: all .6s;
            transition: all .6s;
        }

        .information strong {
            display: block;
            margin: .2em 0 .5em 0;
            font-size: 20px;
            font-family: "Oleo Script";
        }
        .item:hover img {
            /*任务七、列表项悬浮状态时，去掉图片的阴影效果*/
            border-radius: 15px;
        }

        .item:hover .information {
            box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
            border-radius: 3px;
        }
    </style>
</head>
<body>
<div id="container">
    <h1>CSS3 3D变形制作视频展示区</h1>
    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1e900001db6d04630253.png" />
            <span class="information">
            	<strong>澳门风云</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.
            	</span>
        </div>
    </div>

    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1eb20001ed6a03360201.png" />
            <span class="information">
            	<strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
            	</span>
        </div>
    </div>

    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1eef0001c62903830217.png" />
            <span class="information">
            	<strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警•佐原夏辉（佐藤健饰）被分配到银座警察
            	</span>
        </div>
    </div>

    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1f4e0001f90c02850210.png" />
            <span class="information">
            	<strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
            	</span>
        </div>
    </div>
    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1f5500017d5603190214.png" />
            <span class="information">
            	<strong>红眼</strong>1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。
            	</span>
        </div>
    </div>
    <div class="wrapper">
        <div class="item">
            <img src="http://img.mukewang.com/545b1f620001874503500209.png" />
            <span class="information">
            	<strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。
            	</span>
        </div>
    </div>
</div>
</body>
</html>

　　

转载于:https://www.cnblogs.com/potato-lee/p/8544597.html

weixin_30851409
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 3D旋转滚筒文字
liuhao9999的博客
07-04 405
css 3D旋转滚筒文字
html动画效果转换为视频,CSS3制作各种平滑过渡的动画效果
weixin_39798497的博客
05-31 702
通过CSS3的新特性，我们可以不使用javascript或Flash就可以将元素从一个状态过渡到另一个状态。它允许元素在指定的时间里改变它们的值，使各种可以动画的属性执行动画效果。CSS3的动画样式和效果使你可以制作出各种你想要的炫酷效果。在这篇文章中，我们将介绍各种可以在CSS3中使用的过渡和动画效果。形状变化动画对于CSS3元素形状变化的介绍，我们将使用一个圆角矩形图片变化为一个圆形图片为例子...
制作3D旋转视频展示区
10-25 720
根据前面所学，制作下图效果 案例在线展示地址：http://codepen.io/airen/pen/eAztg 任务 任务一、制作多背景        提示：上层有一个径向渐变，渐变图像farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100
css实现3D立体视频翻转动画
qq_44699174的博客
06-06 705
从别的地方看到一个特效， 图一是鼠标没有移动上去，图二是鼠标移动上去的效果， 实现思路不难，对两个立方体进行编辑。但是真正写起来，还是感觉有一些复杂的， html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ..
css3立体旋转特效制作视频
12-29
htmlcss3效果教程，适合新手上路，建议学习，前端视频
html页面转视频-通过canvas动画转视频方案
qq_38068508的博客
11-22 650
页面，通过swiper来进行上下翻页形式的，需要转化成一个可供用户分享的视频，调研后实现方案有 1. 前端将每个swiper页截图，然后将所有截图生成canvas动画，依次展示效果，在将canvas动画转成blob格式视频，将视频上传服务端，返回链接，展示给用户
css3制作3D旋转相册
weixin_44996454的博客
12-14 445
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D旋转相册</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }
纯css制作3D旋转导航
zag666的博客
08-23 798
用css实现3D旋转导航： 代码： <!DOCTYPE html> <html> <head>> <title>制作3D旋转导航</title> <style> @import url("https://www.w3cplus.com/demo/css3/base.css"); @font-face { ...
html+css制作3D旋转正方体特效
m0_63139310的博客
12-28 4620
制作方法： html部分： 连接css 定义大盒子放入想要的图片（此处我直接在放入图片时直接定义了图片的大小，并不规范） css部分： 首先设置盒子的属性，其中transform-style:preserve-3d则是将盒子定义为3d形式，用于制作正方体,而animation:rotateAnimate 10s linear infinite;则是与以下部分相对应，用于创建动画同时设置动画执行一次的时长。 在设置动画之前还要将插入的图片的位置设置成为一个正方体，此时需要对每张图...
纯CSS3制作3D旋转球体
11-04
总结来说，纯CSS3制作3D旋转球体涉及的关键知识点有：`transform`属性、`rotateX`和`rotateY`用于3D旋转、`perspective`定义观察者视角、`animation`实现动态效果以及`border-radius`创建圆形。通过巧妙地组合这些...
单页魔术手（织梦仿站必备）
09-18
仿站必备非常好用的单页魔术手，解压即可使用，下载页面图片和JS以及CSS按不同文件夹存放，非常方便。
css制作3D旋转球
03-27
总的来说，"css制作3D旋转球"是一个结合了CSS3 3D变换和JavaScript交互的实例，展示了现代Web开发中的动态视觉效果和用户体验提升。通过学习和实践这个案例，开发者可以进一步掌握CSS3和JavaScript在创建交互式3D...
HTML+CSS实现3D旋转木马效果.zip
05-09
用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作3D旋转木马效果 用HTML+CSS制作...
CSS3制作3D骰子旋转动画特效
06-24
在本教程中，我们将深入探讨如何使用CSS3创建一个3D骰子旋转动画特效，这是一种交互式的视觉效果，用户可以通过鼠标移动来控制正方体的旋转。CSS3是层叠样式表的最新版本，它引入了许多强大的新特性，包括3D变换和...
纯CSS3制作3D旋转线条球体动画特效特效代码
03-20
【标题】"纯CSS3制作3D旋转线条球体动画特效特效代码"涉及的主要知识点是CSS3中的3D变换和动画效果。CSS3是层叠样式表的第三版，为网页设计提供了更多丰富的视觉表现力，包括3D转换、动画等特性。 1. **CSS3 3D ...
视频文件顺时针旋转90度
风轻云淡
07-20 8014
ffmpeg -y -i 20180415_100950.mp4 -vf transpose=dir=1:passthrough=portrait  background1.mp4
html5转换成mp4视频,HTML5的canvas动画转视频MP4
weixin_28797919的博客
06-09 1738
这是第三篇，主要是canvas画布上的流如何转为mp4视频并保存在本地这也是刚刚从知乎的一篇文章和查阅MDN后在Chrome 85浏览器下测试成功的。具体兼容性未知,直接代码加注释说明下实现思路constchunks=newSet()//先准备个容器保存canvas来的图像流letvideoUrl=nullletmediaRecord=nullfunctioncreate...
Crypto_30_vHsm_Types.h
最新发布
07-09
Crypto_30_vHsm_Types
css 3d旋转滚筒列表
09-12
CSS 3D旋转滚筒列表是一种通过使用CSS的transform属性实现的特效，可以使列表项像滚筒一样旋转展示。这种效果常用于制作时尚的导航菜单或页面特效。 要实现CSS 3D旋转滚筒列表，首先需要创建一个包含多个列表项的父...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值