css3旋转效果练习 以及 高斯模糊 （水滴融合的写法）

最新推荐文章于 2021-08-04 00:40:22 发布
最新推荐文章于 2021-08-04 00:40:22 发布
阅读量199 收藏
点赞数
原文链接：http://www.cnblogs.com/happyZhou/p/8657341.html
版权

属性：filter：blur(15px)  contrast(30);   前者表示模糊度   后者表示在某个区域内存在两个以上的颜色才行  对比度

 

水滴融合的实现前提：1.背景必须高斯模糊     2,，必须有对比度

border的样式：点线边框：dotted;  虚线边框:dashed;

动画的暂停:   animation-play-state:paused;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .message{
        width:940px;
        height:300px;
        margin: 0 auto;
    }
    ul,li.messageList{
        display: inline-block
        width:100%;
        height:100%;
    }
    .messageList{
        width:220px;
        height:300px;
        position: relative;
        float: left;
        margin-right: 20px;
        perspective:1000px;
    }
    .messageList:last-child{
        margin-right: 0px;
    }
    .messageText,.messagePic{
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height: 300px;
        background: rgba(0,0,0,.6);
        transition: 0.5s;/*过渡  使之速度慢点*/
    }
    .messageText{
        background: rgba(0,0,0,.6);
        text-align: center;
        line-height: 300px;
        color:#fff;
        transform: rotateY(90deg);
    }
    .messageList:hover  .messageText{
        transform: rotateY(0deg);
    }
    .messageList:hover  .messagePic{
        transform: rotateY(-90deg);
    }
    h2{
        text-align: center;
        padding: 25px;
    }

    /*小球碰撞*/
    .box1{
        width:100%;
        height:300px;
        background: #000;
    }
    .bubble{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 450px;
        height:300px;
        background: #000;
        margin: 0 auto;
        padding-left: 50px;
        filter: blur(15px) contrast(30);
    }
    /*模仿一个伪元素  来清除浮动*/
    .bubble:after{
        display: block;  /*模仿一个伪元素  表示为块元素*/
        content: "";  /*模仿一个伪元素  内容设置为空*/
        clear:both;  /*模仿一个伪元素  来清除浮动*/
    }
    .content{
        width:100px;
        height:100px;
        border-radius: 50%;
        background: #fff;
    }
    /*可以做了影子  改变影子的位置  实现 碰撞的效果*/
    .content:nth-child(2){
        animation:changeFs 2s  infinite alternate ease-in-out;
    }

    @keyframes changeFs {
        from{
            box-shadow:350px 0 0 #fff;
        }to{
            box-shadow:-350px 0 0 #fff;
                 }
    }
    /*.clearfix{*/
        /*clear: both;*/
    /*}*/
   /*时光漏斗*/
    .Box{
        width:100%;
        height:auto;
        perspective: 1000px;
    }
    .box{
        width: 1000px;
        height:350px;
        margin: 74px auto;
        border:5px dotted blue;
        border-radius: 30px;
        animation: go 4s infinite linear ;
    }
    .box:hover{
        animation-play-state:paused;
    }
    .box ul{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .box ul li{
         width: 220px;
         height: 300px;
         position: relative;
         transform-style: perserve-3d;
        /*perspective:600px;*/
     }
    .box ul li.listLi:hover .imgPic{
        transform: rotateY(-90deg);
    }
    .box ul li.listLi:hover .text{
        transform: rotateY(0deg);
    }
    .imgPic,.text{
        width:100%;
        height:300px;
        position: absolute;
        top:0;
        left:0;
        transition: .5s;
    }
    .text{
        background: orange;
        text-align: center;
        line-height: 300px;
        transform: rotateY(90deg);
    }
    @keyframes go {
        0%{
            transform: rotateX(45deg);
        }
        50%{
            transform: rotateX(-45deg);
        }
        100%{
            transform: rotateX(45deg);
         }
    }

</style>
<body>
<p>
    <h2>3d旋转</h2>
</p>
  <div class="message">
      <ul>
          <li class="messageList">
              <div class="messagePic">
                  <img src="images/1.jpg" alt="图片1" width="220" heigth="300"/>
              </div>
              <div class="messageText">
                  文字描述
              </div>
          </li>
          <li class="messageList">
              <div class="messagePic">
                  <img src="images/1.jpg" alt="图片1" width="220" heigth="300"/>
              </div>
              <div class="messageText">
              文字描述
              </div>
          </li>
          <li class="messageList">
              <div class="messagePic">
                  <img src="images/1.jpg" alt="图片1" width="220" heigth="300"/>
              </div>
              <div class="messageText">
              文字描述
              </div>
          </li>
          <li class="messageList">
              <div class="messagePic">
                  <img src="images/1.jpg" alt="图片1" width="220" heigth="300"/>
              </div>
              <div class="messageText">
              文字描述
              </div>
          </li>
      </ul>
  </div>


<p>
<h2>小球碰撞-弹性布局</h2>
</p>
<div class="box1">
    <div class="bubble">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <!--<div class="clearfix"></div><!–清除浮动–>-->
    </div>
</div>
<p>
    <h2 style="margin-top: 40px">时光漏斗</h2>
</p>
<div class="Box">
    <div class="box">
        <ul>
            <li class="listLi">
                <div class="imgPic">
                    <img src="images/1.jpg" alt="图片" width="220" height="300"/>
                </div>
                <div class="text">111</div>
            </li>
            <li class="listLi">
                <div class="imgPic">
                    <img src="images/2.jpg" alt="图片"  width="220" height="300"/>
                </div>
                <div class="text">222</div>

            </li>
            <li class="listLi">
                <div class="imgPic">
                    <img src="images/3.jpg" alt="图片"  width="220" height="300"/>
                </div>

                <div class="text">333</div>

            </li>
            <li class="listLi">
                <div class="imgPic">
                    <img src="images/4.jpg" alt="图片"  width="220" height="300"/>
                </div>
                <div class="text">444</div>

            </li>
        </ul>
    </div>
</div>

</body>
</html>

　　

 

连接的地址：   https://zhouxiao632292.github.io/d-rotate/

 

转载于:https://www.cnblogs.com/happyZhou/p/8657341.html

diuchuo7514
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS水滴融合效果
liuhao9999的博客
07-04 212
CSS水滴融合效果
css实现水滴融合效果
yizheng_zeng的博客
09-01 224
【代码】css实现水滴融合效果。
CSS 水滴融合效果
qq_41670382的博客
03-02 317
CSS 水滴融合效果        初步介绍：对水滴元素设置filter属性为blur(6px);进行模糊处理，对水滴的上一层容器添加属性：filter:contrast(30);将模糊了的边框提升对比度，实现效果。 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <st
css水滴融合网页,CSS3+SVG 水滴分裂融合的动画
weixin_36402765的博客
08-04 296
HTML导入代码模板：id="Layer_1" x="0px" y="0px" viewBox="0 0 132.986 101.573" enable-background="new 0 0 132.986 101.573" xml:space="preserve">id="Layer_1" x="0px" y="0px" viewBox="0 0 132.986 101.573" ena...
css水滴融合网页,SVG+CSS3 彩虹水滴融合/分解动画
weixin_42396588的博客
08-04 178
CSS语言：CSSSCSS确定body {background: #fff;}.dots {width: 0;height: 0;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;outline: 1px solid red;-webkit-filter: url(#goo);filter: url(#goo);}....
js+css3实现旋转效果
10-20
总结来说，本文详细介绍了如何通过JavaScript和CSS3结合实现元素的旋转效果，包括设置初始旋转角度、动态更新角度、处理CSS3属性名以及添加浏览器兼容性前缀。了解这些知识点，将有助于开发者创建更加生动有趣的网页...
js CSS3实现卡牌旋转切换效果
12-02
标题中的“js CSS3实现卡牌旋转切换效果”是指利用JavaScript和CSS3技术来创建一种类似卡牌的交互式切换动画。这种效果常见于各种应用和游戏中，通过平滑的旋转过渡来展示不同内容，给人一种视觉上的吸引力。 描述...
CSS3 3D旋转rotate效果实例介绍
09-24
在CSS3中，3D旋转（rotate）是一个强大的特性，它允许元素在三维空间中进行旋转，从而为网页设计带来更丰富的动态效果。本实例主要介绍如何使用CSS3的3D旋转功能，通过rotateX、rotateY和rotateZ属性来实现不同轴上...
CSS3自动旋转正方体3D特效
07-28
本篇将深入解析如何利用CSS3的keyframes属性创建一个自动旋转的正方体3D特效，以此实现动态的图片相册展示效果。 首先，我们需要了解CSS3的`transform`属性，它是实现3D变换的基础。`transform`允许我们对元素进行...
CSS3圆形图片鼠标经过旋转效果.rar_CSS3圆形图片鼠标经过旋转效果
09-23
本教程将深入探讨如何利用CSS3实现圆形图片在鼠标经过时的旋转效果，这在创建交互式用户体验时非常有用。 首先，我们需要创建一个HTML结构，包含一个图片元素。例如： ```html <!DOCTYPE html> , initial-...
纯CSS3水波纹混合元素动画特效.zip
07-03
css3水波纹混合元素动画是一款基于css3 @keyframes属性绘制水波纹背景元素，水滴和波纹结合动画特效。
7种炫酷HTML5 SVG液态水滴融合动画特效
12-12
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效。这些SVG动画特效使一些HTML元素，如菜单、分页按钮、APP、选择框等元素的过渡动画像几粒水滴一样融合分解，效果非常的酷。
css3 3d旋转字体模糊,css3制作3d旋转效果
weixin_39729262的博客
08-03 283
* {margin:0;padding:0;list-style:none}.box {width:300px;height:300px;border:1px solid red;margin:100px auto;perspective:1200px;}ul {width:200px;height:200px;border:1px solid red;margin:50px 50px;posit...
纯css实现Material Design中的水滴动画按钮
weixin_33913332的博客
10-19 248
前言 大家平时应该经常见到这种特效，很炫酷不是吗 这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些js库就显得有些过于庞大了，同时由于是js实现，很多时候还要注意加载问题。 那么，有...
css背景图片高斯模糊_CSS 让指定区域背景图像高斯模糊
weixin_39654352的博客
12-20 476
Nice! CSS 让指定区域背景图像高斯模糊原文：http://www.shejidaren.com/css-blur-image.html在网页设计中很多时候我们只看到半透明效果的层级效果，然而半透明+模糊背景，这种超漂亮的视觉却很少见，其中一个原因就是实现方式有难度，难道真这么难实现吗？No~ 现在只需要用CSS也能实现了！今天分享的 Blur 案例就是使用纯 CSS 实现，可以指定某个...
纯 CSS 实现蜡烛融化（水滴）效果
下雨收衫的博客
04-02 1567
实现效果 实现思路 融化效果是利用 filfilter 的 contrast 和 blur 实现的。 在父元素中设置 contrast 并在子元素中设置 blur 即可实现两者相融的效果。 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
css3使用transform出现字体模糊的解决办法
热门推荐
小小黑
08-25 3万+
这个问题很奇葩，话不多少直接上代码：.g-dialog-wrapper { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 405px; backgro
30个酷毙的交互式网站(HTML5+CSS3)
各研发管理
10-11 5918
很久前就像找些文章来翻译，and这是第一篇，刚开始翻译着很有兴致，但中间就开始累了，感觉好多好多，因为不仅要翻译，还要看网站，还要排版，花了两天空闲时间还是硬着头皮翻译下来了，虽然翻译质量还是好渣，不少单词还得看词典~~ ----------------------------------------------------------------------------------------...
css transform导致像素模糊的问题解决办法
01-08 4591
最近做项目做一个弹出框，然后垂直居中定位，发现很模糊，当时还可以是我屏幕问题，然后在同事上看也是一样模糊，然后发现是CSS的transform: translate(-50%,-50%)导致的，英文这种垂直居中会出现小数点像素，像素是基数的时候就会糊掉，偶数的时候不会！其实原理很简单：元素的边缘应该和像素点对齐，但是经过 CSS translate 后，计算的结果并非整数的像素点，导致本来一个像素...
css 图片高斯模糊效果
最新发布
02-04
3. 使用CSS的`filter`属性来实现高斯模糊效果。设置`filter`属性的值为`blur()`，并指定模糊的程度。 下面是一个示例代码，展示如何实现图片的高斯模糊效果： ```html <!DOCTYPE html> .container { position:...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值