css動畫Demo---水波動畫和邊框動畫

dongfangyiyu 發布于2019-04-23 13:39 / 2324人閱讀

摘要：先上效果圖水波動畫邊框動畫水波動畫實現代碼水波動畫邊框動畫實現代碼邊框動畫

先上效果圖：

　　水波動畫：

　　邊框動畫：

1.水波動畫

　　實現代碼

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>水波動畫title>
 6     <style>
 7         .water{
 8             width: 50px;
 9             height: 50px;
10             position: relative;
11         }
12         .point{
13             position: absolute;
14             border-radius: 50%;
15             animation:border 2s linear infinite;
16         }
17         .point2{
18             -webkit-animation-delay:.5s;
19         }
20         .point3{
21             -webkit-animation-delay:1s;
22         }
23         .point4{
24             -webkit-animation-delay:1.5s;
25         }
26 
27         @keyframes border{
28             from { 
29                 width:0;  
30                 height:0;  
31                 top:50%;  
32                 left:50%;  
33                 background-color: rgba(235, 51, 36, 1);
34             }  
35             to { 
36                 width:100%;  
37                 height:100%;  
38                 top:0;  
39                 left:0;  
40                 background-color: rgba(235, 51, 36, 0);
41             }
42         }
43     style>
44 head>
45 <body>
46     <div class="water">
47         <div class="point point1">div>
48         <div class="point point2">div>
49         <div class="point point3">div>
50         <div class="point point4">div>
51     div>
52 body>
53 html>

2.邊框動畫:

　　實現代碼

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>邊框動畫title>
 6     <style>
 7         .block{
 8             width: 100px;
 9             height: 50px;
10             position: relative;
11             background-color: #fcfcfc;
12             overflow: hidden;
13         }
14         .block:before{
15             content: ";
16             width: 0;
17             height: 0;
18             top: 0;
19             left: -1px;
20             display: block;
21             border-top: 1px solid red;
22             border-right: 1px solid red;
23             position: absolute;
24             z-index: 1;
25         }
26         .block:hover:before{
27             content: ";
28             width: 100%;
29             height: 100%;
30             border-radius: 5px;
31             animation: border .5s linear 1;
32         }
33         .block:after{
34             content: ";
35             width: 0;
36             height: 0;
37             bottom: 0;
38             right: -1px;
39             display: block;
40             position: absolute;
41             z-index: 1;
42             border-bottom: 1px solid red;
43             border-left: 1px solid red;
44         }
45         .block:hover:after{
46             content: ";
47             width: 100%;
48             height: 100%;
49             border-radius: 5px;
50             animation: border2 1s linear 1;
51         }
52         @keyframes border{
53             0%{
54                 width: 0;
55                 height: 0;
56             }
57             50%{
58                 width: 100%;
59                 height: 0;
60             }
61             100%{
62                 width: 100%;
63                 height: 100%;
64             }
65 
66         }
67         @keyframes border2{
68             0%{
69                 width: 0;
70                 height: 0;
71             }
72             50%{
73                 width: 0;
74                 height: 0;
75             }
76             75%{
77                 width: 100%;
78                 height: 0;
79             }
80             100%{
81                 width: 100%;
82                 height: 100%;
83             }
84         }
85     style>
86 head>
87 <body>
88     <div class="block">div>
89 body>
90 html>

GPU云服務器云服務器邊框閃爍動畫 css3動畫高性能css3動畫事件和動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2156.html

前端每日實戰：137# 視頻演示如何用純 CSS 創作一個抽象的水波蕩漾的動畫

摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbg3CU?w=400&h=301); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...

yck 2019-08-02 16:05 評論0 收藏0
前端每日實戰：137# 視頻演示如何用純 CSS 創作一個抽象的水波蕩漾的動畫

摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbg3CU?w=400&h=301); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...

rottengeek 2019-08-30 15:54 評論0 收藏0
mask-image的應用

摘要：大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。利用能做出一些不錯的效果，比如。想到用這個屬性正合適，于是要來了心型圖片，拿到設計師導出的文件，用壓縮下得到一個。遮罩層，如果學過Flash的同學應該都聽過，跟PS的剪切蒙版差不多。大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。類似于現實世界中一張A4卡紙剪了個洞，我...

HollisChuang 2019-08-30 11:19 評論0 收藏0